/* =====================================================================
   Clinic admin · Premium Liquid Glass UI
   Midnight Indigo (#212842) + Vanilla Cream (#F0E7D5).
   Дорогая монохромная пара: глубокий синий + тёплый кремовый.
   ===================================================================== */

/* ── Performance optimizations ──
   backdrop-filter: blur(...) был основным «убийцей» FPS на слабых
   машинах — он применяется на 70+ местах (карточки записей в календаре,
   модалки, поповеры, тултипы). Каждый blur создаёт стэкинг-контекст и
   real-time GPU-операцию по фону. На дешёвых ноутбуках без дискретной
   видеокарты это даёт 10–15 fps при скролле/drag-and-drop.
   Отключаем ВСЕ blur'ы одним правилом — визуально почти неотличимо
   (фон карточек теперь просто rgba, а не «стекло»), но FPS x3–x4. */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Calendar event cards: упрощённые тени (раньше было 3-слойные).
   На странице 30–50 таких карточек, и при drag/hover они все
   перерисовываются. Простая тень = меньше работы композитору. */
.rcal-event {
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08) !important;
}
.rcal-event:hover {
  transform: none !important;            /* убираем translateY+scale */
  box-shadow: 0 2px 6px rgba(15, 23, 42, .14) !important;
}
/* Зоны изменения длительности — тянем верх/низ записи (ns-resize). */
.rcal-event__resize {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 5;
}
.rcal-event__resize--top { top: -1px; }
.rcal-event__resize--bottom { bottom: -1px; }
/* Видимый «хват» при наведении на запись */
.rcal-event:hover .rcal-event__resize::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.28);
}
.rcal-event__resize--top::after    { top: 1px; }
.rcal-event__resize--bottom::after { bottom: 1px; }
/* Во время изменения длительности — глушим переходы и hit-test слотов */
body.is-resizing-evt { cursor: ns-resize; user-select: none; }
body.is-resizing-evt .rcal__slot { pointer-events: none; }
/* На коротких карточках resize-зоны мешают клику — отключаем. */
.rcal-event--short .rcal-event__resize { display: none; }
/* Уменьшаем стоимость paint у часто-перерисовываемых блоков сетки */
.rcal__col, .rcal__slot, .rcal-event {
  contain: layout style;
}
/* Фоновые «orbs» (большие blur-кружки) больше не анимируются — на слабых
   машинах постоянная анимация blur-фигур ест ~5% CPU фоном. Оставляем
   статично: визуальный фон сохранён, движения нет. */
.orb { animation: none !important; }
/* Уважаем prefers-reduced-motion — режем все анимации */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───── Tokens ───── */
:root {
  /* Базовый фон-меш: дымка SEBE — мягкая бирюза с зелёным подтоном */
  --bg-1: #dcefee;   /* мягкая бирюза — ядро */
  --bg-2: #cfeae3;   /* чуть глубже, мятный */
  --bg-3: #e9f6f4;   /* светлее, бирюзовый туман */
  --bg-4: #f6fbfa;   /* почти-белый с зелёным подтоном */

  /* Текст — Midnight Indigo и его осветления */
  --ink:   #212842;  /* Midnight Indigo — заголовки, основное */
  --ink-2: #3a4263;  /* приглушённый */
  --ink-3: #6b7493;  /* подписи / muted */
  --ink-4: #9aa1bb;  /* совсем тихий */

  /* Акцент — тот же индиго, монохромный премиум */
  --accent:      #212842;
  --accent-2:    #2e3756;
  --accent-soft: rgba(33, 40, 66, 0.10);
  --success:     #2f8f6f;       /* приглушённо-зелёный, не теряет премиум */
  --warn:        #c89a4a;       /* охра — пастель под прохладный фон */
  --danger:      #c0473b;       /* приглушённый красный, не лимонный */

  /* Стеклянные карточки — чисто-белые с мягкой прозрачностью */
  --glass-bg:          rgba(255, 255, 255, 0.66);
  --glass-bg-strong:   rgba(255, 255, 255, 0.90);
  --glass-bg-soft:     rgba(255, 255, 255, 0.48);
  --glass-border:      rgba(255, 255, 255, 0.72);
  --glass-border-soft: rgba(255, 255, 255, 0.42);
  /* Тени — глубокий тёмно-индиго, многослойные */
  --glass-shadow:
    0 1px 2px    rgba(33, 40, 66, 0.06),
    0 6px 16px   rgba(33, 40, 66, 0.07),
    0 16px 40px  rgba(33, 40, 66, 0.09),
    0 32px 70px  rgba(33, 40, 66, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --glass-shadow-lg:
    0 2px 4px    rgba(33, 40, 66, 0.07),
    0 10px 24px  rgba(33, 40, 66, 0.10),
    0 26px 60px  rgba(33, 40, 66, 0.13),
    0 50px 100px rgba(33, 40, 66, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);

  --surface-1: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: rgba(255, 255, 255, 0.58);
  --hover:     rgba(33, 40, 66, 0.06);
  --border:    rgba(33, 40, 66, 0.10);

  /* Мягкие формы — заметно крупнее радиусы */
  --radius-sm: 14px;
  --radius:    22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  background:
    radial-gradient(1200px 700px at 10% -10%, var(--bg-3) 0%, transparent 60%),
    radial-gradient(1000px 800px at 100% 10%, var(--bg-2) 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 110%, var(--bg-4) 0%, transparent 60%),
    radial-gradient(700px 500px at 90% 90%, var(--bg-1) 0%, transparent 60%),
    linear-gradient(180deg, #eef2f9 0%, #d8e0ee 100%);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}

/* На десктопе админ-страница не должна прокручиваться целиком — только
   внутренние области (календарь, список и т.д.). Публичная страница записи
   (body.is-public) — body становится скролл-контейнером (работает во всех браузерах). */
@media (min-width: 901px) {
  html, body { height: 100vh; min-height: 100vh; overflow: hidden; }
  /* Публичная страница: body — скролл-контейнер */
  body.is-public {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Modern browsers (:has poддержка) — снимаем ограничения и с html для
     совсем естественного скролла, видимая полоса появляется у края экрана */
  html:has(body.is-public) {
    height: auto;
    overflow: visible;
  }
  html:has(body.is-public) body.is-public {
    height: auto;
    overflow: visible;
  }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.55) 0%, transparent 12%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.55) 0%, transparent 14%);
  pointer-events: none;
  z-index: 0;
}

/* Парящие orbs — бирюзово-зелёная дымка SEBE */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 0;
  animation: drift 22s ease-in-out infinite;
}
.orb-1 { width: 440px; height: 440px; background: #6FE0E6; opacity: 0.42; top: -120px; left: -100px; }                          /* бирюзовый блик */
.orb-2 { width: 520px; height: 520px; background: #2EC75F; opacity: 0.18; top: 30%;  right: -150px; animation-delay: -7s; }     /* зелёная вуаль SEBE */
.orb-3 { width: 380px; height: 380px; background: #0FB7C6; opacity: 0.22; bottom: -110px; left: 32%; animation-delay: -14s; }   /* глубокая бирюза */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 30px) scale(0.95); }
}

/* Контент поверх фона */
header, main, .auth-screen {
  position: relative;
  z-index: 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ───── Sidebar layout ───── */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;             /* строго в экран — на десктопе никаких page-scroll */
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: grid-template-columns .25s ease;
}
@media (max-width: 900px) {
  /* на мобильном страница может быть длиннее экрана — возвращаем естественное поведение */
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
}
.app-shell.is-collapsed { grid-template-columns: 72px 1fr; }
.app-shell.is-collapsed .sidebar { padding: 14px 8px; }
.app-shell.is-collapsed .sidebar__logo { height: 56px; }
.app-shell.is-collapsed .minical { display: none; }

/* В свёрнутом режиме — поповер мини-календаря при наведении на иконку календаря */
.app-shell.is-collapsed .minical.minical--floating {
  display: block;
  position: fixed;
  z-index: 200;
  width: 280px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--sb-bg-1, #1a2038) 0%, var(--sb-bg-2, #262e4d) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 44px rgba(15, 18, 30, 0.45);
  animation: minicalFloatIn .18s ease;
}
@keyframes minicalFloatIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* В свёрнутом сайдбаре — одна колонка плиток, плитки маленькие квадратные */
.app-shell.is-collapsed .sidebar__menu { grid-template-columns: 1fr; gap: 6px; padding: 4px 0; }
.app-shell.is-collapsed .sidebar__link {
  aspect-ratio: 1 / 1;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
}
.app-shell.is-collapsed .sidebar__link span { display: none; }
.app-shell.is-collapsed .sidebar__link::after { display: none; }
.app-shell.is-collapsed .sidebar__icon { width: 22px; height: 22px; }
/* «Календарь» в меню нужен только как триггер поповера в свёрнутом режиме —
   в развёрнутом сайдбаре его прячем (есть мини-календарь сверху). */
.app-shell:not(.is-collapsed) .sidebar__link[href="calendar.html"] { display: none; }
.app-shell.is-collapsed .sidebar__user-info,
.app-shell.is-collapsed .sidebar__logout { display: none; }
.app-shell.is-collapsed .sidebar__user { justify-content: center; padding: 6px 0; }

.sidebar {
  /* z-index выше .container/main, чтобы floating-поповеры (мини-календарь
     в свёрнутом режиме) не оказывались под элементами календарной сетки.
     Position:sticky создаёт stacking context — повышаем его уровень. */
  z-index: 10;
  /* Тёмная палитра внутри сайдбара — переопределяет глобальные cream-переменные */
  --sb-bg-1: #1a2038;            /* deep indigo top */
  --sb-bg-2: #262e4d;            /* slightly lighter bottom для градиента */
  --sb-text: #f0e7d5;            /* кремовый базовый текст */
  --sb-text-2: rgba(240,231,213,0.72);
  --sb-text-muted: rgba(240,231,213,0.50);
  --sb-text-dim: rgba(240,231,213,0.32);
  --sb-hover: rgba(255,255,255,0.07);
  --sb-divider: rgba(240,231,213,0.10);
  --sb-active-bg: #f0e7d5;       /* кремовая «таблетка» для активного пункта */
  --sb-active-text: #1a2038;     /* тёмно-индиго текст на кремовом */

  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  margin: 16px 0 16px 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;

  background: linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 100%);
  color: var(--sb-text);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 14px  rgba(33,40,66,0.18),
    0 18px 40px rgba(33,40,66,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--sb-divider);
  text-decoration: none;
}
/* Логотип — переводим в светлый монохром на тёмном фоне */
.sidebar .sidebar__logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Кнопка сворачивания — плавающая справа от sidebar (как в Altegio).
   Тёмный стиль под sidebar — выглядит как «вылет» из него. */
.sidebar-collapse-fab {
  position: fixed;
  top: 22px;
  left: 256px;            /* 240 (sidebar) + 16 (margin sidebar) = 256 */
  z-index: 30;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, #1a2038 0%, #262e4d 100%);
  color: rgba(240,231,213,0.85);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 6px  rgba(33,40,66,0.20),
    0 8px 20px rgba(33,40,66,0.18);
  transition: left .25s ease, background .15s, color .15s, transform .12s;
  padding: 0;
}
body.is-modal-open .sidebar-collapse-fab { display: none; }
.sidebar-collapse-fab:hover {
  background: linear-gradient(135deg, #262e4d 0%, #2e3756 100%);
  color: #f0e7d5;
  transform: translateY(-1px);
}
.sidebar-collapse-fab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-shell.is-collapsed ~ .sidebar-collapse-fab,
.app-shell.is-collapsed .sidebar-collapse-fab { left: 88px; } /* 72 + 16 */
@media (max-width: 900px) {
  .sidebar-collapse-fab { display: none; }
}

/* inline-вариант кнопки в шапке календаря (без position:fixed) */
.sidebar-collapse-btn--inline {
  position: static;
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255,0.70);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  margin-right: 4px;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn--inline:hover {
  background: rgba(255, 255, 255,0.95);
  color: var(--ink);
  border-color: var(--accent);
}
.sidebar-collapse-btn--inline svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.sidebar__logo--icon { display: none; height: 44px; }
.app-shell.is-collapsed .sidebar__logo--full { display: none; }
.app-shell.is-collapsed .sidebar__logo--icon { display: block; }

/* ───── Mini datepicker в сайдбаре ───── */
.minical {
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--sb-divider);
  flex: 0 0 auto;
}
.minical__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.minical__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--sb-text);
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.minical__nav {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sb-text-muted);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.minical__nav:hover { background: var(--sb-hover); color: var(--sb-text); }

.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: 11px;
}
.minical__dow {
  text-align: center;
  color: var(--sb-text-dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 0;
}
.minical__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 1px auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sb-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  position: relative;
  transition: background .15s, color .15s;
}
.minical__day > * { position: relative; z-index: 1; }
/* Кольцо-индикатор: conic-gradient + маска (только обводка) */
.minical__day::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    var(--load-color, transparent) 0deg,
    var(--load-color, transparent) calc(var(--load, 0) * 360deg),
    rgba(255,255,255,0.10) calc(var(--load, 0) * 360deg),
    rgba(255,255,255,0.10) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 10px, black 12px);
          mask: radial-gradient(circle, transparent 10px, black 12px);
  z-index: 0;
}
.minical__day:hover { background: var(--sb-hover); }
.minical__day--out { color: var(--sb-text-dim); opacity: .55; }
.minical__day--out::before { display: none; } /* у чужих месяцев — без кольца */
/* Цвет сегмента-индикатора по уровню загрузки (на тёмном фоне берём более насыщенные оттенки) */
.minical__day--load-empty { --load-color: rgba(255,255,255,.12); --load: 1; }
.minical__day--load-low   { --load-color: #5fc09b; color: #aae0c6; font-weight: 600; }
.minical__day--load-mid   { --load-color: #e0b96a; color: #f0d699; font-weight: 600; }
.minical__day--load-high  { --load-color: #e0786a; color: #f0a89e; font-weight: 600; }

/* «сегодня» — кремовая обводка вместо акцента (на тёмном фоне индиго не виден) */
.minical__day--today {
  outline: 2px solid var(--sb-text);
  outline-offset: 1px;
}

/* выбранный — кремовая заливка с тёмно-индиго цифрой (инверсия — premium look) */
.minical__day--selected {
  color: var(--sb-active-text) !important;
  font-weight: 700 !important;
  outline: 0 !important;
  background: transparent;
}
.minical__day--selected::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--sb-active-bg);
  box-shadow: 0 4px 10px rgba(0,0,0,.30);
  z-index: 0;
}

/* ── Меню сайдбара: 2-колоночная сетка плиток (iOS 26 / Liquid Glass) ── */
.sidebar__menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px 2px;
  flex: 0 0 auto;        /* не растягиваем — занимает естественную высоту */
  align-content: start;
  min-height: 0;
  overflow: visible;     /* без внутреннего скролла */
}
.sidebar__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1.15 / 1;     /* приземистее, чтобы 3 ряда плиток + minical влезали в 100vh */
  padding: 10px 6px;
  border-radius: 18px;
  color: var(--sb-text-muted);
  /* Очень мягкий фон — плитка едва заметна, проявляется на hover */
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  transition:
    transform .22s cubic-bezier(.34, 1.56, .64, 1),
    background-color .18s ease,
    border-color    .18s ease,
    color           .18s ease,
    box-shadow      .22s ease;
  overflow: hidden;
}
.sidebar__link::before {
  /* мягкое свечение в верхней части плитки — появляется на hover */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
  border-radius: 20px 20px 0 0;
}
/* ── Бейдж непрочитанных у пункта меню (Чат) ──────────────────────
   .sidebar__link имеет overflow:hidden (для hover-glow), поэтому
   бейдж лежит внутри обёртки иконки — не обрезается округлёнными
   углами плитки. Wrapper маленький (по размеру SVG), бейдж торчит
   из его правого-верхнего угла.
   ⚠️ Селектор .sidebar__link .sidebar__badge — специально 2 класса:
   перебивает .sidebar__link span (specificity 0,1,1), которое иначе
   сбрасывает min-width:0 и line-height:1.2 → бейдж схлопывался и
   цифра не читалась. */
/* icon-wrap — просто чтобы группа иконки была inline-flex по центру плитки.
   Position НЕ relative — бейдж позиционируется от .sidebar__link (плитки),
   которая overflow:hidden обрезает всё снаружи. Бейдж сидит ВНУТРИ плитки. */
.sidebar__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sidebar__link .sidebar__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
}
.sidebar__link .sidebar__badge[hidden] { display: none; }
.app-shell.is-collapsed .sidebar__link .sidebar__badge {
  top: 4px;
  right: 4px;
}

.sidebar__link span {
  /* override предыдущей стрейч-логики: текст по центру, до 2 строк */
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}
.sidebar__link:hover {
  color: var(--sb-text);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
}
.sidebar__link:hover::before { opacity: 1; }
.sidebar__link:active { transform: translateY(0) scale(0.98); }

.sidebar__link.is-active {
  color: var(--sb-text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.sidebar__link.is-active::after {
  /* тонкая едва заметная лента-индикатор сверху */
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(240, 231, 213, 0.45),
    transparent);
}

.sidebar__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke-width: 1.6;       /* тоньше — менее агрессивно */
  fill: none;
  stroke: currentColor;
  opacity: 0.85;            /* приглушаем по умолчанию, на hover/active — 1 */
  transition:
    transform .22s cubic-bezier(.34, 1.56, .64, 1),
    opacity .18s ease;
}
.sidebar__link:hover .sidebar__icon,
.sidebar__link.is-active .sidebar__icon { opacity: 1; transform: scale(1.05); }

.sidebar__footer {
  margin-top: auto;       /* прижимаем к низу */
  padding-top: 8px;
  border-top: 1px solid var(--sb-divider);
  font-size: 12px;
  flex: 0 0 auto;
}
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
/* строка футера: пользователь + действия (иконки выйти / войти как) справа */
.sidebar__user-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.sidebar__user-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.sidebar__icon-action {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--sb-text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.sidebar__icon-action svg { width: 16px; height: 16px; }
.sidebar__icon-action:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
}
.sidebar__icon-action#navLogout:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #ef9999;
}
/* в свёрнутом сайдбаре действия — под аватаром столбиком */
.app-shell.is-collapsed .sidebar__user-row {
  flex-direction: column;
  padding: 6px 0;
  gap: 4px;
}
.app-shell.is-collapsed .sidebar__user-actions { flex-direction: column; }
.sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0e7d5 0%, #e8dcc4 100%);
  color: var(--sb-active-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
/* Текст роли/email — выровнен по левому краю относительно аватара,
   но сама пара (аватар + текст) центрирована по сайдбару (см. .sidebar__user) */
.sidebar__user-info { min-width: 0; max-width: 160px; }
.sidebar__user-role { font-weight: 600; color: var(--sb-text); }
.sidebar__user-email {
  color: var(--sb-text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__logout {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--sb-divider);
  border-radius: 10px;
  background: transparent;
  color: var(--sb-text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.sidebar__logout:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  border-color: rgba(240,231,213,0.30);
}

/* Мобильный sidebar — hamburger.
   Помещаем в правый верхний угол: сайдбар выезжает слева (280px),
   и бургер не накладывается на логотип ни в открытом, ни в закрытом состоянии. */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(33, 40, 66, 0.10);
}
.sidebar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}
.sidebar-toggle span::before, .sidebar-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.sidebar-toggle span::before { top: -6px; }
.sidebar-toggle span::after  { top: 6px; }

/* ───── Layout ───── */
.container {
  width: 100%;
  padding: 16px 24px 32px;
}
.app-shell .container {
  margin: 0;
}
/* main внутри app-shell — собственный скролл при длинном контенте на десктопе */
.app-shell > main {
  overflow-y: auto;
  min-height: 0;
}
@media (max-width: 900px) {
  .app-shell > main { overflow-y: visible; }
}
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 12px 4px 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-subtitle {
  color: var(--ink-3);
  font-size: 13px;
  margin-top: 2px;
}

/* ───── Glass card ───── */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.card--strong {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-lg);
}
.card__header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card__body { padding: 22px; }
.card__title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}

/* ───── Grid utilities ───── */
.grid {
  display: grid;
  gap: 16px;
}
.grid--kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kpi {
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 12px rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .04);
}
.kpi__label {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi__label::before {
  /* цветной маркер слева у каждой KPI — даёт мгновенное визуальное различие */
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kpi-dot, #6366f1);
  flex: 0 0 auto;
}
.kpi:nth-of-type(1) { --kpi-dot: #6366f1; }   /* Касса — индиго */
.kpi:nth-of-type(2) { --kpi-dot: #f59e0b; }   /* Зарплаты — янтарный */
.kpi:nth-of-type(3) { --kpi-dot: #ef4444; }   /* Расходы — красный */
.kpi:nth-of-type(4) { --kpi-dot: #10b981; }   /* Прибыль — зелёный */
.kpi__value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: -0.02em;
  color: #1a2038;
  font-variant-numeric: tabular-nums;
}
.kpi__sub {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}
@media (max-width: 640px) {
  .grid--kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 14px 16px; border-radius: 14px; }
  .kpi__value { font-size: 22px; }
}
/* ── Блок «Администраторы» в Кассе ───────────────────────────────── */
.kassa-adm { padding: 0; overflow: hidden; }
.kassa-adm__title {
  font-size: 14px; font-weight: 700;
  color: var(--accent-2, #2e3756);
  padding: 14px 18px 6px;
}
.kassa-adm__title .muted { font-weight: 500; font-size: 12px; }
.kassa-adm__row {
  display: grid;
  /* Чёткие колонки во всех строках одной секции:
     Имя (гибкая, минимум 200px) · Тариф · Смена (150px) · Сумма+✎ (160px).
     Фиксированная ширина для двух правых колонок гарантирует, что
     селекты смены и суммы выстраиваются в ровные столбики, даже когда
     админов несколько с разной длиной имени. */
  grid-template-columns: minmax(200px, 1fr) auto 150px 160px;
  align-items: center;
  gap: 12px 18px;
  padding: 12px 18px;
  border-top: 1px solid rgba(15,23,42,.05);
  transition: background .12s;
}
.kassa-adm__row:not(.kassa-adm__row--total):hover {
  background: rgba(99, 102, 241, 0.035);
}
/* Лёгкая шапка таблицы для секции админов */
.kassa-adm__head {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto 150px 160px;
  gap: 12px 18px;
  padding: 8px 18px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(15,23,42,.06);
  background: rgba(248, 250, 252, 0.5);
}
.kassa-adm__head-cfg { text-align: left; }
.kassa-adm__head-shift { text-align: center; }
.kassa-adm__head-sum { text-align: right; }
.kassa-adm__shift-wrap { display: flex; justify-content: flex-end; }
.kassa-adm__shift {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.kassa-adm__shift:hover { border-color: rgba(99,102,241,.5); color: #4338ca; }
/* Цветовая индикация выбранной смены — по значению селекта */
.kassa-adm__shift[data-current="day"],
.kassa-adm__shift option[value="day"]:checked,
.kassa-adm__shift:has(option[value="day"]:checked) {
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.35);
}
.kassa-adm__shift[data-current="evening"],
.kassa-adm__shift:has(option[value="evening"]:checked) {
  background: linear-gradient(180deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.35);
}
.kassa-adm__name { font-size: 14px; font-weight: 600; color: #1a2038; }
.kassa-adm__cfg  { font-size: 12px; color: var(--muted, #6b7280); }
.kassa-adm__sum  {
  font-size: 15px; font-weight: 700; color: #2d7a4a;
  font-variant-numeric: tabular-nums; min-width: 110px; text-align: right;
}
.kassa-adm__row--total {
  background: rgba(248,250,252,.6);
}
.kassa-adm__row--total .kassa-adm__name { color: var(--accent-2, #2e3756); }
.kassa-adm__row--total .kassa-adm__sum  { color: var(--accent); }
/* Обёртка «сумма + карандашик» в блоке админов кассы */
.kassa-adm__sum-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}
/* Кнопка «+ кабинет» в строке админа/медсестры (только когда учётки ещё нет) */
.kassa-adm__cabinet-btn,
.staff-row__cabinet {
  appearance: none;
  border: 1px dashed rgba(99,102,241,.4);
  background: rgba(99,102,241,.06);
  color: #4338ca;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 8px;
  transition: background .15s, border-color .15s;
}
.kassa-adm__cabinet-btn:hover,
.staff-row__cabinet:hover {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.7);
}
/* ── Единый inline-эдитор сумм ────────────────────────────────────────
   Структура: <span.confirm-input-wrap> > <input.confirm-input-money>
   + <button.confirm-input-btn--ok> + [<button.confirm-input-btn--cancel>]

   Применяется ко ВСЕМ местам, где правится денежная сумма inline:
   - зарплата админа в кассе
   - цена услуги в кассе записи
   - цена услуги в hover-поповере записи
   - выплата хирургу за операцию
   Виджет наследует layout родителя (inline-flex). */
.confirm-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.confirm-input-money {
  width: 110px;
  text-align: right;
  border: 1.5px solid var(--accent, #6366f1);
  border-radius: 10px;
  padding: 6px 22px 6px 10px;        /* справа место под SVG-фон ₸ */
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #1a2038;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  box-sizing: border-box;
  /* SVG с тенге внутри input справа — гарантированно не вылезает на кнопки. */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'><line x1='6' y1='5' x2='18' y2='5'/><line x1='6' y1='10' x2='18' y2='10'/><line x1='12' y1='5' x2='12' y2='20'/></svg>") right 6px center / 11px no-repeat #fff;
}
.confirm-input-money::-webkit-outer-spin-button,
.confirm-input-money::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.confirm-input-money:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}
/* Круглые кнопки ✓ (зелёная) и × (серая → красная на hover) */
.confirm-input-btn {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.confirm-input-btn--ok {
  background: linear-gradient(180deg, #34d399, #10b981);
  color: #fff;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(5, 150, 105, 0.25) inset;
}
.confirm-input-btn--ok:hover {
  background: linear-gradient(180deg, #10b981, #059669);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45), 0 0 0 1px rgba(5, 150, 105, 0.35) inset;
}
.confirm-input-btn--cancel {
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
}
.confirm-input-btn--cancel:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.confirm-input-btn:active { transform: scale(0.92); }
.confirm-input-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Старые .kassa-adm__edit*, .kassa-adm__inp, .kassa-adm__edit-ok/cancel
   удалены — все inline-эдиторы сумм теперь используют единый виджет
   .confirm-input-wrap + .confirm-input-money + .confirm-input-btn--ok/cancel
   (см. js/confirm-input.js и определения выше). */
@media (max-width: 560px) {
  /* На мобильных: имя слева сверху, сумма справа сверху (span 2 строки);
     внизу — конфиг и селект смены. */
  .kassa-adm__row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .kassa-adm__cfg        { grid-column: 1; grid-row: 2; }
  .kassa-adm__shift-wrap { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .kassa-adm__sum-wrap, .kassa-adm__sum { grid-column: 2; grid-row: 1 / span 2; }
}
/* Прибыль — выделена зелёным (красным при убытке) */
.card.kpi--profit {
  background: linear-gradient(180deg, rgba(16,185,129,0.12), rgba(16,185,129,0.045));
  border-color: rgba(16,185,129,0.32);
}
.kpi--profit .kpi__label { color: #047857; }
.kpi--profit .kpi__value { color: #059669; }
.card.kpi--profit.is-loss {
  background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.045));
  border-color: rgba(239,68,68,0.32);
}
.kpi--profit.is-loss .kpi__label { color: #b91c1c; }
.kpi--profit.is-loss .kpi__value { color: #dc2626; }

/* Разбивка прибыли в KPI: «налом» / «безналом» (всё ниже основного числа).
   Размеры под мобайл — компактно, но читаемо. */
.kpi__breakdown {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(16,185,129,0.30);
}
.kpi--profit.is-loss .kpi__breakdown { border-top-color: rgba(239,68,68,0.30); }
.kpi__bd-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 12px; line-height: 1.15;
  color: rgba(33,40,66,0.65);
}
.kpi__bd-row b {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #059669;                  /* зелёный, как основная прибыль */
}
.kpi__bd-row b.is-loss { color: #dc2626; }

/* ── Блок «Расходы» внутри Кассы (перенесён из раздела Расходы) ───── */
.kassa-exp { padding: 0; overflow: hidden; }
.kassa-exp__title {
  font-size: 14px; font-weight: 700;
  color: var(--accent-2, #2e3756);
  padding: 16px 18px 0;
}
.kassa-exp .quick-add {
  display: grid;
  /* 3 видимых элемента: title (растягивается) | сумма (фикс) | кнопка (auto).
     Скрытый input[type=hidden] для даты не занимает grid-cell. */
  grid-template-columns: 1fr 170px auto;
  gap: 10px;
  padding: 14px 18px;
  align-items: center;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.kassa-exp .quick-add .input { height: 40px; }
.kassa-exp .quick-add button { height: 40px; padding: 0 18px; }
.kassa-exp .expenses-day { border-bottom: 1px solid rgba(15,23,42,.06); }
.kassa-exp .expenses-day:last-child { border-bottom: none; }
.kassa-exp .expenses-day__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px 8px;
  background: rgba(248,250,252,.55);
}
.kassa-exp .expenses-day__date {
  font-size: 14px; font-weight: 700; color: #1a2038; text-transform: capitalize;
}
.kassa-exp .expenses-day__total {
  font-size: 14px; font-weight: 700; color: #b91c1c;
  font-variant-numeric: tabular-nums;
}
.kassa-exp .expenses-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  transition: background .12s ease;
}
.kassa-exp .expenses-row:hover { background: rgba(99,102,241,.04); }
.kassa-exp .expenses-row__title  { font-size: 14px; color: #1a2038; }
.kassa-exp .expenses-row__amount {
  font-weight: 700; color: #1a2038; font-variant-numeric: tabular-nums;
}
.kassa-exp .expenses-row__author {
  font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em;
}
.kassa-exp .expenses-row__del {
  width: 28px; height: 28px; border: 0;
  background: transparent; color: #94a3b8; cursor: pointer;
  border-radius: 6px; transition: background .15s, color .15s;
}
.kassa-exp .expenses-row__del:hover { background: rgba(239,68,68,.10); color: #b91c1c; }
.kassa-exp .expenses-row__del[disabled] { opacity: .35; cursor: not-allowed; }
.kassa-exp .expenses-row__del[disabled]:hover { background: transparent; color: #94a3b8; }
@media (max-width: 720px) {
  .kassa-exp .quick-add { grid-template-columns: 1fr 1fr; }
  .kassa-exp .quick-add button { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .kassa-exp .quick-add { grid-template-columns: 1fr; }
  .kassa-exp .expenses-row {
    grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; padding: 11px 16px;
  }
  .kassa-exp .expenses-row__title  { grid-column: 1; grid-row: 1; font-weight: 600; }
  .kassa-exp .expenses-row__amount { grid-column: 1; grid-row: 2; font-size: 13px; }
  .kassa-exp .expenses-row__author { grid-column: 1; grid-row: 3; }
  .kassa-exp .expenses-row__del    { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 10px; }

/* ───── Buttons ───── */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .14s, background-color .18s, color .18s, box-shadow .18s;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--bg-1);
  box-shadow:
    0 1px 2px  rgba(33,40,66,.22),
    0 6px 18px rgba(33,40,66,.32);
}
.btn-primary:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px  rgba(33,40,66,.28),
    0 10px 26px rgba(33,40,66,.40);
}
.btn-secondary {
  background: rgba(255, 255, 255,0.78);
  color: var(--ink);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255,0.95);
  text-decoration: none;
}
.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 1px 2px rgba(192,71,59,.20), 0 6px 18px rgba(192,71,59,.30);
}
.btn-danger:hover { background: #a83a30; text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--ink-3);
  padding: 7px 14px;
}
.btn-ghost:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.btn-block { width: 100%; }
.btn-sm    { padding: 7px 14px; font-size: 12px; }

button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ───── Forms ───── */
.label {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.input, select.input, textarea.input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-row + .form-row { margin-top: 14px; }
/* В двухколоночной модалке записи — компактнее, чтобы вся форма помещалась без скролла */
.modal--side.has-kassa form#formAppt .form-row + .form-row { margin-top: 8px; }
.modal--side.has-kassa form#formAppt .row + .form-row { margin-top: 8px; }
.modal--side.has-kassa form#formAppt .form-row + .row { margin-top: 8px; }
.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ───── Tables ───── */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--glass-border-soft);
  vertical-align: middle;
}
.table th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  background: rgba(255, 255, 255,.40);
}
.table tbody tr:hover { background: var(--hover); }
.table--rowlink tbody tr { cursor: pointer; }

/* ───── Status pills ───── */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(33,40,66,0.07);
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.pill--ok      { background: rgba(47,143,111,.16); color: #1e6a51; }
.pill--warn    { background: rgba(200,154,74,.18); color: #7a5a1f; }
.pill--temp    { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #92400e; font-weight: 800; }
.pill--danger  { background: rgba(192,71,59,.16);  color: #8c2c22; }
.pill--info    { background: var(--accent-soft);   color: var(--accent); }

/* ───── Notices ───── */
.notice {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border-soft);
  color: var(--ink-2);
}
.notice--ok      { background: rgba(47,143,111,.13); color: #1e6a51; border-color: rgba(47,143,111,.28); }
.notice--danger  { background: rgba(192,71,59,.12);  color: #8c2c22; border-color: rgba(192,71,59,.28); }
.notice--warn    { background: rgba(200,154,74,.14); color: #7a5a1f; border-color: rgba(200,154,74,.30); }
.notice--info    { background: var(--accent-soft);   color: var(--accent); border-color: rgba(33,40,66,.22); }

/* ───── Empty state ───── */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* ───── Auth screen ───── */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 36px;
  border-radius: var(--radius-xl);
}
/* «Запомнить меня» и «Забыли пароль» на экране входа */
.login-remember {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink-2, #444b60); cursor: pointer;
  margin-top: -2px;
}
.login-remember input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #4f46e5); }
.login-forgot {
  background: none; border: 0; padding: 6px;
  color: var(--accent, #4f46e5); font: inherit; font-size: 13px;
  cursor: pointer; text-align: center; width: 100%;
}
.login-forgot:hover { text-decoration: underline; }
.auth-card .auth-logo {
  display: block;
  margin: 0 auto 18px;
  height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(33,40,66,.10));
}
.auth-card .page-title {
  font-size: 22px;
  text-align: center;
}
.auth-card .page-subtitle {
  text-align: center;
  margin-top: 4px;
}

/* SEBE-локап: эмблема + слово «SEBE» (сайдбар развёрнутый + логин) */
.sebe-lockup { display: flex; align-items: center; gap: 10px; }
.sebe-lockup__mark { height: 38px; width: auto; display: block; flex: none; }
.sebe-lockup__name {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(135deg, #0FB7C6 0%, #2EC75F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sebe-lockup--auth {
  justify-content: center;
  margin: 0 auto 18px;
  filter: drop-shadow(0 4px 14px rgba(33,40,66,.10));
}
.sebe-lockup--auth .sebe-lockup__mark { height: 46px; }
.sebe-lockup--auth .sebe-lockup__name { font-size: 30px; }

.demo-quick {
  width: 100%;
}

.demo-quick__grid {
  display: grid;
  gap: 10px;
}

.demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 40, 66, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: 700 15px/1.2 inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(33, 40, 66, 0.06);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.demo-btn:hover {
  border-color: rgba(33, 40, 66, 0.28);
  box-shadow: 0 8px 22px rgba(33, 40, 66, 0.12);
}

.demo-btn:active {
  transform: scale(0.985);
}

.demo-btn:disabled {
  opacity: .58;
  cursor: default;
  transform: none;
}

.demo-btn--primary {
  border: 0;
  background: linear-gradient(135deg, #212842, #3a4263);
  color: #fff;
  box-shadow: 0 12px 28px rgba(33, 40, 66, 0.22);
}

/* Логотип-ссылки внизу экрана логина */
.cred-link {
  color: var(--accent);
  font-weight: 500;
}

/* ───── Modal ───── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Полностью непрозрачная подложка — за модалкой ничего не просвечивает. */
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .18s ease;
}
.modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255,0.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  animation: slideUp .22s ease;
}
.modal::-webkit-scrollbar { width: 0; height: 0; }
.modal__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  padding-right: 44px;
}
.modal { position: relative; }
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(33, 40, 66, 0.05);
  color: var(--muted, #5b6478);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              background-color .2s ease,
              color .2s ease,
              border-color .2s ease,
              box-shadow .2s ease;
}
.modal__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.modal__close:hover {
  background: rgba(231, 76, 92, 0.12);
  color: var(--danger, #e74c5c);
  border-color: rgba(231, 76, 92, 0.25);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(231, 76, 92, 0.18);
}
.modal__close:hover svg { transform: rotate(90deg); }
.modal__close:active { transform: scale(0.94); }
.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231, 76, 92, 0.28);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ───── Центральная модалка записи ───── */
.modal-backdrop--side {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop--side .modal--side {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  margin: 0;
  padding: 22px 26px;
  border-radius: var(--radius-xl);
  box-shadow:
    0 24px 60px rgba(15,18,30,0.22),
    inset 0 1px 0 rgba(255,255,255,0.4);
  /* длинная касса (оплаты + форма + блок операции) может быть выше
     экрана — окно скроллится внутри max-height, не уходит за низ */
  overflow-y: auto;
  overflow-x: hidden;
}
/* Когда в окне видна касса — раскладываем в 2 колонки: форма слева, касса справа.
   Используем grid-template-areas + обёртку .appt-form-fields, чтобы кассы и
   форма не толкали друг друга по высоте — каждая колонка в своей ячейке. */
.modal-backdrop--side .modal--side.has-kassa {
  max-width: 920px;
}
.modal--side.has-kassa form#formAppt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "fields kassa"
    "actions actions";
  column-gap: 22px;
  row-gap: 12px;
  align-items: start;
}
.modal--side.has-kassa form#formAppt > .appt-form-fields { grid-area: fields; }
.modal--side.has-kassa form#formAppt > #apKassa {
  grid-area: kassa;
  margin: 0;
  align-self: start;
}
.modal--side.has-kassa form#formAppt > #apSecondaryActions { grid-area: actions; }
/* В одноколоночном режиме обёртка ничего не делает */
.appt-form-fields { display: contents; }
.modal--side.has-kassa .appt-form-fields { display: block; }
@media (max-width: 880px) {
  /* Узкий экран — двухколоночная не помещается, возвращаемся к одной */
  .modal--side.has-kassa form#formAppt {
    display: block;
  }
  .modal--side.has-kassa { max-width: 640px; }
  .modal--side.has-kassa .appt-form-fields { display: contents; }
}
/* ── Окно записи на телефоне: нативная «шторка» снизу (bottom-sheet) ──
   Раньше .modal--side был overflow:visible с max-height — на мобиле
   длинный контент (услуги + касса) уходил за экран без скролла. Теперь
   лист выезжает снизу на всю ширину, со своим скроллом и липкой шапкой. */
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .modal-backdrop--side {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  .modal-backdrop--side .modal--side {
    max-width: 100%;
    width: 100%;
    /* dvh — без скачка при появлении/скрытии адресной строки браузера */
    max-height: 92vh;
    max-height: 92dvh;
    margin: 0;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: sheetUp .44s cubic-bezier(.16, 1, .3, 1);
  }
  /* Шапка прилипает — заголовок и крестик всегда под рукой при скролле */
  .modal--side .modal__header {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -16px 12px;
    padding: 18px 16px 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.80) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  /* «Грабли» сверху — как у нативных iOS-шторок */
  .modal--side .modal__header::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(33, 40, 66, 0.16);
  }
  .modal--side .modal__header .modal__title { font-size: 19px; }
  /* Услуги — одной колонкой, крупные тап-цели */
  .appt-services { grid-template-columns: 1fr; }
  /* Касса (после создания записи) тоже одной колонкой и со скроллом листа */
  .modal--side.has-kassa { max-width: 100%; }
}
/* Когда внизу показан impersonation-bar — учитываем его 48px */
body.is-impersonating .modal-backdrop--side .modal--side {
  max-height: calc(100vh - 96px);
}

/* ───── Список услуг в окне записи (multi-select до 2) ───── */
.appt-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.appt-services.is-limit { animation: limitShake .38s ease; }
@keyframes limitShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.appt-service-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(33, 40, 66, 0.10);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 36px;
  line-height: 1.25;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.appt-service-card:hover {
  border-color: rgba(33, 40, 66, 0.22);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 40, 66, 0.06);
}
.appt-service-card.is-selected {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.10);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) inset;
  padding-left: 30px;
}
.appt-service-card__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.appt-service-card__meta {
  font-size: 12px;
  color: var(--muted, #5b6478);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.appt-service-card__order {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.appt-service-card.is-selected .appt-service-card__order {
  transform: translateY(-50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════
   iOS 26 (Liquid Glass) — скоуп: только окно записи (.modal--side)
   ═══════════════════════════════════════════════════════════════════ */
.modal-backdrop--side {
  background: rgba(15, 18, 30, 0.32);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.modal--side {
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255, 255, 255,0.32) 18%, rgba(255, 255, 255,0.16) 100%),
    rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 24px 60px rgba(15,18,30,0.20);
  animation: iosPopIn .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes iosPopIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.modal--side .modal__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 14px;
  padding-bottom: 10px;
}
/* Декоративная градиент-полоска под шапкой */
.modal--side .modal__header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(33, 40, 66, 0.45) 25%,
    #22c55e 60%,
    rgba(34, 197, 94, 0.45) 80%,
    transparent 100%
  );
  opacity: 0.7;
}
.modal--side .modal__header .modal__title {
  margin: 0;
  padding-right: 0;
  font-size: 22px;
  flex: 1;
}
.modal--side .modal__header .modal__close {
  position: static;
  flex-shrink: 0;
}

/* Поля ввода — squircle + glass */
.modal--side .label {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--accent-2, #2e3756);
}
.modal--side .input,
.modal--side select.input,
.modal--side textarea.input {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(33, 40, 66, 0.10);
  padding: 11px 14px;
  font-size: 15px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.modal--side .input:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.modal--side .form-row + .form-row { margin-top: 16px; }

/* Кнопки — пилюли */
.modal--side .btn-primary,
.modal--side .btn-secondary,
.modal--side .btn-ghost,
.modal--side .btn-danger {
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.modal--side .btn-primary {
  box-shadow: 0 6px 18px rgba(33, 40, 66, 0.22);
}
.modal--side .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(33, 40, 66, 0.28); }
.modal--side .btn-primary:active { transform: translateY(0); }
.modal--side .btn-secondary {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(33, 40, 66, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal--side .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.85);
}
.modal--side .btn-sm {
  padding: 7px 14px;
  font-size: 12.5px;
}

/* Чипы пациента/услуги — пилюли */
.modal--side .chip {
  background: rgba(33, 40, 66, 0.08);
  border: 1px solid rgba(33, 40, 66, 0.10);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
}

/* Карточки услуг — Liquid Glass */
.modal--side .appt-service-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(33, 40, 66, 0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              background-color .22s ease,
              border-color .22s ease,
              box-shadow .22s ease;
}
.modal--side .appt-service-card:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(33, 40, 66, 0.18);
  box-shadow: 0 6px 18px rgba(33, 40, 66, 0.06);
  transform: translateY(-1px);
}
.modal--side .appt-service-card.is-selected {
  background: rgba(33, 40, 66, 0.06);
  border-color: rgba(33, 40, 66, 0.32);
  box-shadow:
    0 0 0 1px rgba(33, 40, 66, 0.30) inset,
    0 6px 16px rgba(33, 40, 66, 0.10);
}
.modal--side .appt-service-card__order {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 6px rgba(33, 40, 66, 0.30);
}

/* Notice — squircle + glass */
.modal--side .notice {
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Кнопка закрытия — чуть прозрачнее, под Liquid Glass */
.modal--side .modal__close {
  background: rgba(33, 40, 66, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Краткая статистика пациента (как в Altegio): визиты / последний / сумма */
/* Строка пациент-чипа + статистики (Первый визит / визитов / суммы) —
   располагаем рядом, статистика обтекает справа от пациента. */
.patient-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.patient-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.patient-stats__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(33, 40, 66, 0.06);
  border: 1px solid rgba(33, 40, 66, 0.10);
  font-size: 12px;
  color: var(--accent-2, #2e3756);
  font-variant-numeric: tabular-nums;
}
.patient-stats__chip b { font-weight: 700; }
.patient-stats__chip--new {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
  color: #15803d;
}

/* Подсказки найденных пациентов под полем телефона */
.patient-suggest {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.patient-suggest:empty { display: none; }
.patient-suggest__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(33, 40, 66, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  text-align: left;
  transition: background-color .18s ease, border-color .18s ease, transform .15s ease;
}
.patient-suggest__item:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(33, 40, 66, 0.20);
  transform: translateY(-1px);
}
.patient-suggest__item .muted {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Авто-раскрытие полей Имя/Фамилия */
.new-patient-fields {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height .32s cubic-bezier(.4,0,.2,1),
              opacity .25s ease,
              margin-top .25s ease;
}
.new-patient-fields.is-open {
  max-height: 220px;
  opacity: 1;
  margin-top: 10px;
}

/* ───── Поле телефона с выбором страны (по умолчанию 🇰🇿) ───── */
.phone-field {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(33, 40, 66, 0.10);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.phone-field:focus-within {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.phone-cc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
  background: none;
  border: 0;
  border-right: 1px solid rgba(33, 40, 66, 0.10);
  border-radius: 14px 0 0 14px;
  cursor: pointer;
  font: inherit;
  color: var(--accent-2, #2e3756);
}
.phone-cc:hover { background: rgba(33, 40, 66, 0.04); }
.phone-cc__flag,
.phone-cc-opt__flag { display: inline-flex; align-items: center; }
.cc-flag-img {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.cc-flag-txt {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #6b7280;
}
.phone-cc__code { font-size: 15px; font-weight: 600; }
.phone-cc__chev {
  width: 14px; height: 14px; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55;
}
.phone-num {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 11px 14px;
  font-size: 15px;
  color: inherit;
  outline: none;
  border-radius: 0 14px 14px 0;
}
.phone-cc-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(320px, 86vw);
  max-height: 280px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 18, 30, 0.22);
  overflow: hidden;
}
.phone-cc-menu[hidden] { display: none; }
.phone-cc-search {
  margin: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(33, 40, 66, 0.12);
  border-radius: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.7);
  outline: none;
}
.phone-cc-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.phone-cc-list { overflow-y: auto; padding: 0 6px 8px; }
.phone-cc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.phone-cc-opt:hover { background: rgba(33, 40, 66, 0.06); }
.phone-cc-opt__flag { font-size: 18px; }
.phone-cc-opt__name { flex: 1; font-size: 14px; color: var(--accent-2, #2e3756); }
.phone-cc-opt__dial { font-size: 13px; font-weight: 600; color: #6b7280; }
.phone-cc-empty { padding: 14px; text-align: center; color: #9aa1ad; font-size: 13px; }

/* Единый ритм между блоками формы записи: 16px между всеми блоками,
   независимо от типа (.form-row, .row, .appt-finish и т.д.).
   .appt-form-fields — обёртка с display:contents, поэтому реальные
   блоки лежат на уровень глубже: целимся и в них, иначе ряд
   «Начало/Длительность» слипается с «Комментарий/Записать». */
.modal--side #formAppt > * + *,
.modal--side #formAppt > .appt-form-fields > * + * { margin-top: 16px; }

/* Финишная зона: пропорции = ряд "Начало (2fr) / Длительность (1fr)";
   высоты textarea и кнопки выравниваются через align-items: stretch */
.modal--side .appt-finish {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.modal--side .appt-finish__notes {
  resize: none;
  min-height: 0;
  margin: 0;
  height: auto;
}
.modal--side .appt-finish__submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 0;
  outline: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--bg-1);
  box-shadow:
    0 8px 22px rgba(33, 40, 66, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .18s ease, box-shadow .35s ease;
}
/* Иконка кнопки — мягкий «прыжок» при ховере */
.modal--side .appt-finish__submit-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.modal--side .appt-finish__submit:hover .appt-finish__submit-icon {
  animation: apptIconPop .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes apptIconPop {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.18) translateY(-2px); }
  60%  { transform: scale(0.96) translateY(0); }
  100% { transform: scale(1.06) translateY(0); }
}
/* Галочка внутри календаря — «дорисовывается» при ховере */
.modal--side .appt-finish__submit-icon polyline {
  stroke-dasharray: 12;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s ease;
}
.modal--side .appt-finish__submit:hover .appt-finish__submit-icon polyline {
  animation: apptCheckDraw .6s ease both;
}
@keyframes apptCheckDraw {
  0%   { stroke-dashoffset: 12; }
  40%  { stroke-dashoffset: 12; }
  100% { stroke-dashoffset: 0; }
}
.modal--side .appt-finish__submit-label { display: inline-block; }
/* Зелёный градиент-оверлей: на старте прозрачный, при ховере проявляется. */
.modal--side .appt-finish__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.modal--side .appt-finish__submit:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 14px 32px rgba(34, 197, 94, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.modal--side .appt-finish__submit:hover::before {
  opacity: 1;
}
.modal--side .appt-finish__submit:active {
  transform: translateY(0) scale(0.99);
}
.modal--side .appt-finish__submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.30),
    0 14px 32px rgba(34, 197, 94, 0.34);
}
@media (max-width: 560px) {
  .modal--side .appt-finish {
    grid-template-columns: 1fr;
  }
}

/* ───── Toolbar ───── */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar .input { width: auto; min-width: 220px; }

/* ───── Color swatch (для сотрудников) ───── */
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-block;
  border: 1px solid var(--glass-border-soft);
  vertical-align: middle;
}

/* ───── Chips (для услуг сотрудника) ───── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}
.chip--muted { background: rgba(33,40,66,.06); color: var(--ink-3); }

/* ── Правка ФИО пациента прямо в chip записи ── */
.appt-pat-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent, #4f46e5);
  cursor: pointer;
  opacity: 0.7;
  transition: background .12s, opacity .12s;
}
.appt-pat-edit:hover { background: rgba(99,102,241,.14); opacity: 1; }
.appt-pat-edit svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.appt-pat-name-input {
  border: 1.5px solid var(--accent, #6366f1);
  border-radius: 8px;
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #1a2038;
  outline: none;
  min-width: 120px;
  max-width: 200px;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}
.appt-pat-name-input:focus { border-color: #4f46e5; }

/* ───── Stats line on cards ───── */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.row--between { justify-content: space-between; }
.muted { color: var(--ink-3); font-size: 12px; }
.text-right { text-align: right; }

/* ───── Wizard (public booking) ───── */
.wizard-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.wizard-progress__step {
  flex: 1;
  height: 6px;
  background: rgba(33,40,66,.08);
  border-radius: 999px;
  transition: background .25s;
}
.wizard-progress__step.is-done   { background: var(--accent); }
.wizard-progress__step.is-active { background: var(--accent); }

.wizard-step-label {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.tile {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255,0.70);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s, border-color .18s, background .18s;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.tile:hover {
  background: rgba(255, 255, 255,0.92);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33,40,66,.12);
}
.tile__title { font-weight: 600; letter-spacing: -0.01em; }
.tile__meta  { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.tile--staff {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.day-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.day-pill {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255,0.70);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  text-align: center;
  min-width: 64px;
  transition: background .18s, border-color .18s, transform .14s;
}
.day-pill:hover { background: rgba(255, 255, 255,0.92); }
.day-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(33,40,66,.30);
}
.day-pill__dow  { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.day-pill__date { font-size: 16px; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.day-pill__mon  { font-size: 11px; opacity: .7; }
/* Маленький badge с числом доступных слотов под датой */
.day-pill__cnt {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(47, 143, 111, 0.16);
  color: #1e6a51;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.day-pill.is-active .day-pill__cnt {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* День без слотов — приглушённый, не кликабельный */
.day-pill.is-empty {
  opacity: 0.40;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.day-pill.is-empty:hover { background: rgba(255, 255, 255, 0.70); transform: none; }
.day-pill[disabled] { pointer-events: none; }

/* Группировка слотов: Утро / День / Вечер */
.slots-section + .slots-section { margin-top: 14px; }
.slots-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px;
}
.slots-section__icon {
  font-size: 14px;
  line-height: 1;
}
.slots-section__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.slots-section__cnt {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(33, 40, 66, 0.07);
  padding: 1px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.slot-pill {
  padding: 10px;
  text-align: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255,0.70);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background .18s, border-color .18s, transform .14s;
}
.slot-pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.success-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 18px;
  box-shadow: 0 12px 30px rgba(33,40,66,.30);
}
.success-icon svg {
  width: 48px;
  height: 48px;
  stroke: #fff;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───── Лендинг-шапка публичной страницы ───── */
.public-header {
  margin: 16px auto;
  max-width: 1100px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  z-index: 1;
}
.public-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  min-width: 0;
}
.public-header__logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex-shrink: 0;
}
.public-header__title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.public-header__subtitle {
  font-size: 12px;
  color: var(--ink-3);
}
.public-header__contacts {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-3);
}
.public-header__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.public-header__chip svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.public-header__chip a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.public-header__login {
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
}
.public-header__login:hover { color: var(--ink); }

/* ───── Hero-блок ───── */
.public-hero {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.public-hero__inner {
  text-align: center;
  padding: 14px 18px;
}
.public-hero__eyebrow {
  font-size: 13px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.public-hero__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 10px;
}
.public-hero__sub {
  font-size: 15px;
  color: var(--ink-3);
  max-width: 540px;
  margin: 0 auto;
}

/* ───── Контейнер визарда ───── */
.public-main {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ───── Карточки-инфо «Адрес / Часы / Контакты» ───── */
.public-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.public-info__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.public-info__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.public-info__icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.public-info__label {
  font-weight: 600;
  margin-bottom: 2px;
}
.public-info__card a { color: inherit; }

/* ───── Адаптив для публичной страницы: планшет (≤ 820px) ───── */
@media (max-width: 820px) {
  .public-info { grid-template-columns: repeat(2, 1fr); }
}

/* ───── Адаптив: мобильный (≤ 640px) ───── */
@media (max-width: 640px) {
  /* Шапка — компактная вертикаль */
  .public-header {
    margin: 12px;
    padding: 12px 14px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .public-header__brand { gap: 10px; }
  .public-header__logo  { height: 32px; max-width: 140px; }
  .public-header__title { font-size: 15px; }
  .public-header__subtitle { font-size: 11px; }
  .public-header__contacts {
    gap: 12px;
    font-size: 12px;
    border-top: 1px solid var(--glass-border-soft);
    padding-top: 10px;
  }
  .public-header__login { margin-left: auto; }

  /* Hero — компактнее */
  .public-hero { margin-top: 8px; padding: 0 12px; }
  .public-hero__inner { padding: 8px 4px; }
  .public-hero__eyebrow { font-size: 11px; margin-bottom: 4px; }
  .public-hero__title  { font-size: 24px; line-height: 1.18; }
  .public-hero__sub    { font-size: 13px; }

  /* Контейнер: убрать боковые отступы у container, добавить свои */
  .public-main { padding: 0 12px !important; }
  .public-main .card__body { padding: 16px; }
  .public-main .page-title { font-size: 20px; }
  .public-main .page-subtitle { font-size: 12px; }

  /* Tile-grid → одна колонка */
  .tile-grid { grid-template-columns: 1fr; gap: 8px; }
  .tile { padding: 12px 14px; font-size: 13px; }
  .tile--staff { padding: 10px 12px; gap: 10px; }
  .tile-avatar { width: 36px; height: 36px; font-size: 14px; }

  /* Day-strip — scroll-snap, плотнее */
  .day-strip {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    gap: 6px;
  }
  .day-pill {
    scroll-snap-align: start;
    min-width: 56px;
    padding: 8px 10px;
  }
  .day-pill__date { font-size: 14px; }
  .day-pill__cnt  { font-size: 9px; padding: 1px 5px; }

  /* Слоты — мельче ячейки */
  .slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
  }
  .slot-pill { padding: 9px 6px; font-size: 13px; }
  .slots-section + .slots-section { margin-top: 12px; }
  .slots-section__head { gap: 6px; margin-bottom: 6px; }
  .slots-section__title { font-size: 11px; }

  /* Форма — крупные touch-таргеты + 16px font (iOS не зумит на focus) */
  .public-main .input {
    padding: 12px 14px;
    font-size: 16px;
    min-height: 44px;
  }

  /* Карточки-инфо — одна колонка */
  .public-info { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .public-info__card { padding: 14px 16px; }
}

/* ───── Очень узкий (≤ 380px) — ещё чуть плотнее ───── */
@media (max-width: 380px) {
  .public-hero__title { font-size: 22px; }
  .day-pill { min-width: 52px; padding: 7px 8px; }
  .slots-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .public-header__contacts { gap: 8px; flex-wrap: wrap; }
}

/* ───── Resource Calendar (Altegio-style) ───── */
.rcal {
  --rcal-row-h: 28px;        /* высота строки 15 минут */
  --rcal-time-col-w: 44px;   /* шкала времени — тонкая */
  --rcal-staff-h: 60px;       /* высота шапки сотрудника */
  --rcal-min-col-w: 200px;
  background: rgba(255, 255, 255,0.55);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  /* На десктопе занимает экран по высоте; нижний край совпадает с sidebar.
     16px сверху + 16px снизу = 32px полей. */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
}

.rcal__topbar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255,0.68);
  border-bottom: 1px solid var(--glass-border-soft);
  gap: 14px;
  flex-wrap: wrap;
}
.rcal__nav {
  flex-shrink: 0;
}
.rcal__topbar > .btn-primary { flex-shrink: 0; }
.rcal__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcal__date-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-left: 8px;
}
.rcal__view-toggle {
  display: inline-flex;
  background: rgba(33,40,66,.06);
  border-radius: 999px;
  padding: 3px;
}
.rcal__view-toggle button {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.rcal__view-toggle button.is-active {
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(33,40,66,.08);
}

/* Кнопка-лупа шага сетки + popover */
.rcal__zoom-wrap {
  position: relative;
  margin-left: auto;
}
.rcal__zoom-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255,0.70);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.rcal__zoom-btn:hover {
  background: var(--surface-1);
  color: var(--ink);
  border-color: var(--accent);
}
.rcal__zoom-btn.is-open {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.rcal__zoom-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rcal__zoom-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  padding: 18px 20px 14px;
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-lg);
  z-index: 20;
  animation: zoomPopIn .18s ease;
}
.rcal__zoom-popover[hidden] { display: none; }
@keyframes zoomPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.rcal__zoom-popover input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 22px;
  cursor: pointer;
  margin: 0;
}
.rcal__zoom-popover input[type="range"]:focus { outline: none; }
.rcal__zoom-popover input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(33,40,66,.15);
  border-radius: 2px;
}
.rcal__zoom-popover input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(33,40,66,.15);
  border-radius: 2px;
  border: 0;
}
.rcal__zoom-popover input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  margin-top: -7.5px;
  border: 0;
  box-shadow: 0 2px 6px rgba(33,40,66,.30);
  transition: transform .15s;
}
.rcal__zoom-popover input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.rcal__zoom-popover input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 0;
  box-shadow: 0 2px 6px rgba(33,40,66,.30);
}
.rcal__zoom-popover__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.rcal__zoom-popover__labels span {
  cursor: pointer;
  user-select: none;
  flex: 1;
  text-align: center;
  transition: color .15s;
}
.rcal__zoom-popover__labels span:first-child { text-align: left; }
.rcal__zoom-popover__labels span:last-child  { text-align: right; }
.rcal__zoom-popover__labels span:hover { color: var(--ink); }
.rcal__zoom-popover__labels span.is-active { color: var(--ink); font-weight: 600; }

@media (max-width: 480px) {
  .rcal__zoom-popover { width: calc(100vw - 32px); right: -8px; }
}

/* Анимация при перерисовке сетки (смена шага / смена даты) */
.rcal__grid { transition: opacity .25s ease; }
.rcal__grid.is-changing {
  opacity: 0.35;
  pointer-events: none;
}

.rcal__scroll {
  overflow-x: hidden;     /* горизонтальный скролл выключен — врачи листаются стрелками сверху */
  overflow-y: auto;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.rcal__grid {
  display: grid;
  grid-template-columns: var(--rcal-time-col-w) repeat(var(--rcal-cols, 1), minmax(var(--rcal-min-col-w), 1fr)) var(--rcal-time-col-w);
  position: relative;
  min-width: 100%;
  width: 100%;            /* грид строго по ширине .rcal__scroll, без выезжания */
}

/* ── Пагинация по врачам (видна, когда staff > 10) ─────────────────────── */
.rcal__staff-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(33, 40, 66, 0.05);
  border: 1px solid rgba(33, 40, 66, 0.08);
  flex-shrink: 0;
}
.rcal__staff-nav[hidden] { display: none; }
.rcal__staff-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.rcal__staff-nav__btn:hover:not(:disabled) {
  background: rgba(33, 40, 66, 0.10);
}
.rcal__staff-nav__btn:active:not(:disabled) {
  transform: scale(0.94);
}
.rcal__staff-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rcal__staff-nav__label {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #444b60);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* шапки */
.rcal__corner {
  background: #fff;
  border-bottom: 1px solid var(--glass-border-soft);
  border-right: 1px solid var(--glass-border-soft);
  min-height: var(--rcal-staff-h);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
}
.rcal__staff-head {
  display: flex;
  align-items: center;
  gap: 6px;                   /* было 10px — сжали зазор аватар↔текст, чтобы дать ФИО больше места */
  padding: 10px;              /* было 10px 14px — горизонтальный padding тоже сжали */
  background: #fff;
  border-bottom: 1px solid rgba(33,40,66,0.10);
  border-right: 1px solid rgba(33,40,66,0.10);     /* контрастная вертикальная граница между колонками */
  /* min-height вместо фиксированной height — строка шапки растёт по самому длинному имени */
  min-height: var(--rcal-staff-h);
  position: sticky;
  top: 0;
  z-index: 4;
  /* PERF: sticky-шапка без compositor layer заставляет браузер репэинтить
     её КАЖДЫЙ кадр скролла. will-change поднимает в отдельный GPU-слой —
     при скролле шапка просто двигается, без paint. transform хинт — потому
     что sticky фактически реализуется через transform. */
  will-change: transform;
  /* contain для изоляции от соседей */
  contain: layout style;
}
.rcal__staff-head:last-of-type { border-right: 0; }
/* Счётчик записей за день в углу шапки врача */
.rcal__staff-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #4338ca;
  background: rgba(33, 40, 66, 0.12);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.rcal__staff-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
/* Операционная (ресурс, не врач) — приглушённая колонка + иконка вместо фото */
.rcal__staff-head--res,
.rcal__staff-head--alt.rcal__staff-head--res {
  background: linear-gradient(135deg, #19b7a6 0%, #128f82 100%);
}
.rcal__staff-head--res .rcal__staff-name,
.rcal__staff-head--res .rcal__staff-name-line {
  color: #fff;
}
.rcal__staff-avatar--res {
  position: relative;
  background: linear-gradient(135deg, #6b7a90 0%, #4d5a6e 100%);
  color: #fff;
}
.rcal__staff-avatar--res .rcal__res-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
}
.rcal__staff-avatar--res .rcal__res-ic svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.rcal__res-num {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 10px;
  background: #fff;
  color: #3d4a5e;
  font-size: 12px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}
.rcal__staff-head--res .rcal__staff-spec {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}
.rcal__staff-name {
  font-weight: 600;
  /* размер задаётся динамически в fitColWidth() — чем уже колонка, тем мельче */
  font-size: var(--rcal-staff-name-font, 13px);
  line-height: 1.25;
  color: var(--ink);
  /* ФИО — три отдельные строки (фамилия / имя / отчество), каждая в своём span */
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rcal__staff-name-line {
  display: block;
  white-space: nowrap;       /* фамилию/имя/отчество не разбиваем на 2 строки */
  overflow: hidden;
  text-overflow: ellipsis;   /* …auto-fit в JS дотянет шрифт, чтоб ellipsis не появлялся */
  min-width: 0;
}
.rcal__staff-spec {
  font-size: var(--rcal-staff-spec-font, 11px);
  color: var(--ink-3);
  line-height: 1.2;
  margin-top: 2px;
  /* специальность — до 3-х строк (авто-усадка шрифта в JS дотянет, если надо) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;   /* очень длинные слова всё-таки разрешим переносить */
}

/* шкала времени — тонкая, приглушённо-серая */
.rcal__time-cell {
  height: var(--rcal-row-h);
  border-bottom: 1px solid rgba(33,40,66,.03);
  font-size: 10.5px;
  color: rgba(33,40,66,0.45);
  text-align: center;
  padding: 2px 2px 0;
  position: sticky;
  background: rgba(255, 255, 255,0.45);
  z-index: 3;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.rcal__time-cell--left  { left: 0; border-right: 1px solid rgba(33,40,66,0.10); }
.rcal__time-cell--right { right: 0; border-left:  1px solid rgba(33,40,66,0.10); }
.rcal__time-cell--hour { font-weight: 500; color: rgba(33,40,66,0.62); font-size: 12px; }

/* ── Шкала времени: контейнер sticky (left/right), подписи наложены
   абсолютно и ВСЕГДА с шагом 15 минут (независимо от шага сетки) ── */
.rcal__timescale { position: sticky; z-index: 5; background: rgba(250,251,253,0.94); }
.rcal__timescale--left  { left: 0;  border-right: 1px solid rgba(33,40,66,0.10); }
.rcal__timescale--right { right: 0; border-left:  1px solid rgba(33,40,66,0.10); }
/* Ячейки внутри sticky-контейнера — обычные блоки (высота + слабая линия),
   подписи в них не пишем. */
.rcal__timescale .rcal__time-cell {
  position: static; background: transparent;
  border-right: 0; border-left: 0;
}
/* Наложенные подписи времени (абсолютно, по пикселям) */
.rcal__time-lbl {
  position: absolute; left: 0; right: 0;
  padding-top: 2px; text-align: center;
  pointer-events: none; z-index: 2; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.rcal__time-q { font-size: 10px; font-weight: 500; color: rgba(33,40,66,0.40); }

/* Формат "09⁰⁰": часы крупно, минуты надстрочно */
.rcal__time-h {
  font-size: 14px;
  font-weight: 600;
  color: rgba(33,40,66,0.72);
}
.rcal__time-m {
  font-size: 9px;
  font-weight: 600;
  color: rgba(33,40,66,0.50);
  vertical-align: super;
  margin-left: 1px;
  line-height: 1;
}
/* Полная метка ЧЧ:ММ (шаги 20/25 мин) — одним компактным блоком */
.rcal__time-h.rcal__time-h--full {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* В a11y режиме чуть крупнее */
body.is-large-text .rcal__time-h { font-size: 15px; }
body.is-large-text .rcal__time-m { font-size: 10px; }

/* ячейки сетки */
.rcal__slot {
  height: var(--rcal-row-h);
  border-bottom: 1px solid rgba(33,40,66,.04);
  border-right: 1px solid rgba(33,40,66,0.10);   /* контрастная граница между колонками */
  cursor: pointer;
  position: relative;
  /* PERF: убран transition: background — на 1404 слотах каждый hover
     растягивал paint на 120мс (7 кадров). Instant = 1 paint. */
}
.rcal__slot--hour { border-bottom-color: rgba(33,40,66,.10); }
/* Hover на слоте больше не подсвечивает весь слот — иначе при шаге сетки
   45 мин фон занимает 45 мин по высоте, и непонятно где именно встанет
   запись. Видимость даёт .rcal__hover-line (5-мин блок у курсора). */
.rcal__slot:hover { background: transparent; }
/* PERF: во время drag/scroll слот-hover отключаем. Ghost-preview уже
   показывает куда упадёт запись, а slot:hover триггерил paint на каждом
   mousemove под курсором (1404 слотов × paint при заходе/выходе). */
body.is-dragging-evt .rcal__slot:hover,
body.is-scrolling .rcal__slot:hover {
  background: transparent;
}
/* ghost-превью: куда встанет перетаскиваемая запись.
   Раньше навешивали класс на N слотов (querySelectorAll + forEach каждый
   кадр) — на быстром перетаскивании отставало. Сейчас это ОДИН
   абсолютно позиционированный блок, у которого на dragover меняется
   только parent (колонка) + style.top/height — константная работа на кадр. */
.rcal__drop-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  background: rgba(100, 116, 139, 0.22);
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.30);
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
  will-change: top;
  display: flex;
  align-items: flex-start;
  padding: 4px 8px;
}
.rcal__drop-ghost__time {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: rgba(255,255,255,0.9);
  padding: 2px 6px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.rcal__slot--last-staff { border-right: 0; }
.rcal__slot--off {
  /* приглушено сильнее, чем раньше — почти не выделяется, граница
     рабочего времени едва видна */
  background: repeating-linear-gradient(
    -45deg,
    rgba(33,40,66,.012),
    rgba(33,40,66,.012) 6px,
    rgba(33,40,66,.028) 6px,
    rgba(33,40,66,.028) 12px
  );
  /* cursor: pointer — клик разрешён, при сохранении выскочит
     подтверждение «записать вне графика?». */
  cursor: pointer;
}
.rcal__slot--off:hover { background: repeating-linear-gradient(
    -45deg,
    rgba(33,40,66,.012),
    rgba(33,40,66,.012) 6px,
    rgba(33,40,66,.028) 6px,
    rgba(33,40,66,.028) 12px
  ); }

/* колонка-контейнер для событий */
.rcal__col {
  position: relative;
  /* нечётные колонки немного теплее, чтобы соседние врачи визуально различались */
  /* PERF: content-visibility:auto → браузер пропускает рендер офскрин-колонок
     при горизонтальном скролле (5 видимых из 9 = ~45% экономия paint).
     contain-intrinsic-size резервирует место в layout, чтобы скролл-бар не
     прыгал. ~1500px = 14ч × 60мин / 15мин × 27px. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1500px;
}
.rcal__col--alt {
  background: rgba(220, 228, 242,0.18);   /* тёплый шампанский тинт поверх кремового фона .rcal */
}
/* колонка операционной — тело без особого фона (выделение только в шапке) */
/* шапки врачей — тоже чередуются, чтобы зебра тянулась сверху-донизу */
.rcal__staff-head--alt {
  background: #eef2f8;   /* непрозрачный лёгкий тинт, не просвечивает фон */
}

/* «Прилетевшая» запись от другого админа (через SSE) — зелёная обводка
   + лёгкая пульсация (3 мигания outline-color за ~1.8 сек), потом просто
   обводка ещё ~1.4 сек. Используем outline-color (не box-shadow), это
   дешёво — браузер перерисовывает только тонкую рамку, не пейнтит весь
   фон. На low-perf машинах анимация автоматически отключается через
   body.is-low-perf * { animation-duration: 0.001s }. */
@keyframes rcal-event-blink {
  0%, 100% { outline-color: #22c55e; }
  50%      { outline-color: rgba(34, 197, 94, 0.15); }
}
.rcal-event--just-changed {
  outline: 2px solid #22c55e;
  outline-offset: 1px;
  z-index: 6;     /* поверх соседей */
  animation: rcal-event-blink 0.6s ease-in-out 3;
}

/* (Удалены стили .rcal-event--op-shadow — overlay «Идёт операция»
   в колонке оперирующего врача больше не рисуется. Операции теперь
   записываются прямо под врача в его колонке, отображаются обычной
   карточкой с бейджем «ОП».) */

/* Бейдж «ОП» в карточке записи-операции — компактная капсула
   акцент-цвета. Стоит перед названием услуги. */
.rcal-event__op-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
  /* Яркий красный — операция должна сразу бросаться в глаза. */
  background: linear-gradient(135deg, #ef4444, #dc2626);
  padding: 1.5px 6px;
  border-radius: 5px;
  letter-spacing: 0.6px;
  vertical-align: middle;
  line-height: 1.35;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.45);
}

/* Карточка-операция: тонкая акцент-полоска по левому краю — отличает
   операцию от обычного приёма с одного взгляда. */
.rcal-event--operation {
  border-left: 3px solid #d97706;
}

/* ── Peer-view: «занято»-карточка чужой записи / зеркало чужой операции.
   Видит врач (напр. Анар), когда смотрит график коллеги или операционных
   без права знать пациента/услугу/цену. Деликатно-серый, без статус-цвета. */
.rcal-event--peer-anon {
  background: linear-gradient(180deg, rgba(33,40,66,0.06), rgba(33,40,66,0.10)) !important;
  border: 1px solid rgba(33,40,66,0.15) !important;
  color: rgba(33,40,66,0.78) !important;
  border-radius: 8px;
  padding: 4px 8px !important;
  cursor: default !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  pointer-events: auto;
  /* поверх состояния «paid/online» — однотонно */
  box-shadow: none !important;
}
.rcal-event--peer-anon::before,
.rcal-event--peer-anon::after { content: none !important; }
.rcal-event--peer-anon .rcal-event__peer-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(33,40,66,0.88);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rcal-event--peer-anon .rcal-event__peer-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(33,40,66,0.68);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcal-event--peer-anon .rcal-event__peer-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(33,40,66,0.55);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Анонимная операция — мягкий янтарный левый край (намёк на «операция»),
   но без яркого красного бейджа «ОП» (его не рендерим для peer). */
.rcal-event--peer-anon--op {
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.16)) !important;
  border-color: rgba(217,119,6,0.30) !important;
  border-left: 3px solid #d97706 !important;
}
.rcal-event--peer-anon--op .rcal-event__peer-time,
.rcal-event--peer-anon--op .rcal-event__peer-title { color: #92400e; }
.rcal-event--peer-anon--op .rcal-event__peer-sub  { color: #b45309; }
/* Зеркало чужой операции в OR — такой же приглушённый янтарный */
.rcal-event--op-mirror.rcal-event--peer-anon {
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.16)) !important;
  border-color: rgba(217,119,6,0.30) !important;
  color: #92400e !important;
}

/* ── Ручная отправка WhatsApp-шаблона из окна записи ─────────────── */
/* Кнопка «Шаблон» — в шапке модалки записи, слева от ✕. */
.appt-tpl__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: auto;
  margin-right: 8px;
  border: 1px solid #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.appt-tpl__btn:hover { background: #ccfbf1; }
.appt-tpl__btn:active { transform: scale(.96); }
.appt-tpl__btn[hidden] { display: none; }
.appt-tpl__btn svg { width: 16px; height: 16px; }
/* Popover-форма «Отправить шаблон» — abs под кнопкой в шапке. */
.modal__header { position: relative; }
.appt-tpl {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  width: min(420px, calc(100vw - 24px));
  z-index: 50;
  padding: 14px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  animation: appt-tpl-in .15s ease;
}
@keyframes appt-tpl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.appt-tpl[hidden] { display: none; }
.appt-tpl__head {
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 8px;
}
.appt-tpl__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.appt-tpl__row select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.appt-tpl__hist {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.appt-tpl__hist-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.appt-tpl__hist-item {
  font-size: 12px;
  color: #475569;
  padding: 4px 8px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.appt-tpl__hist-item.is-ok { border-left: 3px solid #22c55e; }
.appt-tpl__hist-item.is-failed { border-left: 3px solid #ef4444; }
.appt-tpl__hist-item.is-disabled { border-left: 3px solid #94a3b8; opacity: .7; }
.appt-tpl__hist-item b { color: #0f172a; }
.appt-tpl__hist-item .muted { color: #94a3b8; font-size: 11px; margin-left: 8px; }
.appt-tpl__err { display: block; color: #b91c1c; font-size: 11px; margin-top: 2px; }
.appt-tpl__hint {
  font-size: 11px;
  margin-top: 8px;
  color: #64748b;
  font-style: italic;
}

/* Запись с сайта (онлайн-запись) — карточка ЦЕЛИКОМ бирюзовая
   (светлый фон + насыщенная полоса слева + бирюзовая рамка), плюс
   значок-глобус в строке услуги. Через ::before (не border-left),
   чтобы уживалось с операцией (у неё свой border-left) и не сдвигало
   контент. !important — перебивает базовый белый фон .rcal-event и
   уживается с .rcal-event--paid-closed (та только opacity меняет). */
.rcal-event--online {
  background: linear-gradient(180deg, #ecfeff 0%, #a5f3fc 100%) !important;
  border-color: #06b6d4 !important;
}
.rcal-event--online::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: #06b6d4;
  z-index: 6;
  pointer-events: none;
}
.rcal-event__online-badge {
  display: inline-block;
  width: 13px; height: 13px;
  flex-shrink: 0;
  color: #0891b2;
  vertical-align: -2px;
}
.rcal-event__online-badge svg {
  width: 13px; height: 13px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Комментарий к операции — выделен фоном и не курсивом (как обычные
   notes), чтобы был приметнее. Иконка 💬 в начале. */
.rcal-event__notes--op {
  font-style: normal !important;
  color: #7c4a03 !important;
  background: rgba(245, 158, 11, 0.10);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 600;
  white-space: normal !important;
  line-height: 1.3;
}

/* Поле «Комментарий к операции» в модалке записи — подсветка фоном
   когда выбрана услуга-операция, чтобы админ увидел что комментарий
   видим в карточке. */
.appt-finish__notes--op {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(217, 119, 6, 0.40);
}

/* WhatsApp-кнопка в quick-view поповере — компактная иконка-only,
   живёт рядом с телефоном и кнопкой «копировать». */
.appt-popover__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 6px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
}
.appt-popover__wa:hover { background: #20bd5b; }
.appt-popover__wa svg { width: 13px; height: 13px; }

/* WhatsApp-кнопка в окне записи — фирменный зелёный, открывает чат
   с пациентом в новой вкладке (без заготовленного текста). */
.appt-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #25d366;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.appt-wa-btn:hover { background: #20bd5b; }
.appt-wa-btn:active { background: #1aa14d; }
.appt-wa-btn svg { display: block; }

/* «Операционная для операции» — выделенный блок: оранжевая обводка слева
   и фон, чтобы админ сразу видел обязательность. */
.form-row--op-room {
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid #d97706;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 4px;
}
.form-row--op-room .label { color: #7c4a03; font-weight: 700; }
.appt-required {
  color: #b45309;
  font-weight: 700;
  margin-left: 2px;
}
.form-row--op-room.is-error {
  background: rgba(220, 38, 38, 0.10);
  border-left-color: #dc2626;
}
.form-row--op-room.is-error .label { color: #991b1b; }

/* «Зеркало операции» в колонке операционной (op_room_id) — оригинальная
   запись живёт в колонке хирурга, здесь только сводка: кто оперирует +
   комментарий. Click открывает оригинал. */
.rcal-event--op-mirror {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-left: 3px solid #d97706;
  color: #5a3c00;
  cursor: pointer;
  overflow: hidden;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  font-size: 11px;
  line-height: 1.25;
  contain: layout style paint;
}
.rcal-event--op-mirror:hover {
  background: rgba(245, 158, 11, 0.28);
}
.rcal-event--op-mirror__op {
  font-weight: 700;
  font-size: 11.5px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcal-event--op-mirror__surgeon {
  font-weight: 600;
  font-size: 10.5px;
  color: #5a3c00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcal-event--op-mirror__notes {
  font-weight: 500;
  color: #5a3c00;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* событие — карточка в стиле iOS Liquid Glass */
.rcal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.96);
  /* PERF: одна тень вместо трёх. Тройная тень требует ~3× больше пэйнт-работы
     для каждой карточки. На скролле 50+ карточек это ощутимо. */
  box-shadow: 0 2px 6px rgba(33, 40, 66, 0.10);
  border: 1px solid rgba(33, 40, 66, 0.06);
  z-index: 2;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  /* PERF: contain изолирует карточку — браузер знает, что её перерисовка
     не затрагивает соседей, и пропускает invalidation. Особенно важно
     при ховере (одна карточка → не пересчитываем layout остальных). */
  contain: layout style paint;
}
.rcal-event:hover {
  /* PERF: убран transform (translateY+scale) — он триггерил layout у
     соседей и box-shadow-анимацию. Hover теперь — только подъём тени,
     без transition (instant — для слабых машин это лучше анимации). */
  box-shadow: 0 4px 12px rgba(33, 40, 66, 0.18);
  z-index: 3;
}
.rcal-event:active {
  box-shadow: 0 1px 3px rgba(33, 40, 66, 0.14);
}

/* PERF: «Low-perf mode» — автоматически включается на слабых машинах
   (cores≤4 ИЛИ deviceMemory≤4). Можно форсировать через ?perf=low.
   Глобально гасит все анимации, transitions, тени-на-hover, hover-lift.
   UI становится «инстантным» (любое изменение мгновенно), без декора. */
body.is-low-perf *,
body.is-low-perf *::before,
body.is-low-perf *::after {
  transition: none !important;
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
}
/* Карточки — никаких hover-эффектов (тени и z-index остаются как у обычной) */
body.is-low-perf .rcal-event:hover {
  box-shadow: 0 2px 6px rgba(33, 40, 66, 0.10);
  z-index: 2;
}
/* Слот при наведении выделяем даже в low-perf — это лёгкий background
   (не анимация), и функционально важен: админ видит, куда кликает для
   создания записи. Тяжёлый paint при скролле гасит отдельное правило
   body.is-scrolling .rcal__slot:hover ниже. */
body.is-low-perf .rcal__slot:hover {
  background: var(--accent-soft);
}
/* Кнопки/ссылки — без transition */
body.is-low-perf .btn-primary,
body.is-low-perf .btn-ghost,
body.is-low-perf .btn-secondary { transition: none !important; }

/* PERF: во время скролла календаря выключаем hit-testing на сетке и
   hover-эффекты. Браузер во время скролла перестаёт искать элемент
   под курсором (1800+ нод) и не запускает hover-paint при попадании
   на карточку. Класс is-scrolling вешает JS на 150мс после последнего
   события scroll. */
body.is-scrolling .rcal__grid {
  pointer-events: none;
}
body.is-scrolling .rcal-event:hover,
body.is-dragging-evt .rcal-event:hover {
  box-shadow: 0 2px 6px rgba(33, 40, 66, 0.10);  /* как обычная карточка */
  z-index: 2;
}
/* PERF: во время drag/scroll глобально гасим все transition.
   Любая анимация цвета/размера соседних элементов в этот момент =
   лишний paint, который воспринимается как «лагает». */
body.is-dragging-evt *,
body.is-scrolling * {
  transition: none !important;
  animation-duration: 0s !important;
}
.rcal-event__time {
  /* Шапка с временем — компактная. padding-right (22px) резервирует место
     под абсолютно-позиционированную ⓘ-кнопку (12px + 5px зазор).
     Vertical padding 2px + line-height 1.3 + font 10.5px → высота ~17px
     (раньше было ~21px). Освобождает 4px под содержимое карточки —
     помещаются услуга/имя/телефон без обрезки. */
  padding: 2px 22px 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);            /* пастельные фоны: тёмный текст */
  background: var(--accent);    /* fallback */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* очень мягкий блик сверху */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Status & Info — иконка использует currentColor от шапки (тёмный текст
   на пастельных фонах), полупрозрачный фон в тон бордера. */
.rcal-event__status,
.rcal-event__info {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: inherit;
}
.rcal-event__status svg,
.rcal-event__info svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
/* Info — кнопка с reset + hover. Абсолютное позиционирование в правом
   верхнем углу карточки, всегда на одной и той же позиции. */
.rcal-event__info {
  position: absolute;
  top: 3px;
  right: 5px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  transition: background-color .15s ease, transform .18s ease, border-color .15s ease;
}
.rcal-event__info:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.30);
  transform: scale(1.12);
}
.rcal-event__info:hover svg { opacity: 1; }

/* Поповер с детальной инфой записи (Altegio-стиль).
   ВАЖНО: явно объявляем display:none для [hidden], иначе display:flex в .appt-popover
   перебивает дефолтное скрытие от атрибута hidden и поповер остаётся видимым. */
.appt-popover[hidden] { display: none !important; }
.appt-popover {
  position: fixed;
  z-index: 150;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  /* без overflow: всё помещается за счёт компактных отступов */
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(33, 40, 66, 0.10);
}
/* Invisible-«мостик» 20px ВОКРУГ popover'а ловит курсор пока он движется
   от карточки к попапу. Иначе при положении popover'а СЛЕВА от карточки
   (когда справа не помещается) курсор пересекал 10px-зазор и срабатывал
   mouseout → popover скрывался. */
.appt-popover[hidden] { display: none; }
.appt-popover:not([hidden])::before {
  content: '';
  position: absolute;
  inset: -20px;
  /* прозрачный hit-зон 20px ВОКРУГ popover'а — ловит курсор пока он
     движется через 10px-зазор от карточки к попапу. Без этого слева-
     открытый popover мгновенно закрывался при движении мыши влево. */
}
/* ::before позиционирован → лежит ВЫШЕ непозиционированных детей (правило
   stacking-order). Без этого фикса он перекрывает кнопки внутри поповера
   (например статусные кнопки) и съедает клики — пользователь жмёт, ничего
   не происходит. Делаем всех прямых детей поповера position: relative —
   они попадают в тот же слой, что и ::before, а по source-order лежат
   ПОСЛЕ него = поверх. Hit-зона ::before на ховер (20px вокруг) при этом
   сохраняется — она остаётся доступной снаружи bounds поповера. */
.appt-popover > * { position: relative; }
.appt-popover {
  border: 1px solid rgba(33, 40, 66, 0.10);
  box-shadow:
    0 16px 36px rgba(15, 18, 30, 0.18),
    0 4px 12px rgba(15, 18, 30, 0.08);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  font-size: 13.5px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: apptPopoverIn .26s cubic-bezier(.16, 1, .3, 1);
}
@keyframes apptPopoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Поповер быстрого просмотра на телефоне: шторка снизу + backdrop ──
   На десктопе поповер позиционируется JS впритык к карточке (узкий 340px).
   На телефоне это неудобно — делаем нативную шторку снизу на всю ширину со
   своим скроллом. !important перебивает inline left/top, которые ставит JS. */
@media (max-width: 720px) {
  .appt-popover:not([hidden]) {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 22px 22px 0 0 !important;
    padding-top: 22px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -12px 44px rgba(15, 18, 30, 0.28) !important;
    animation: sheetUp .44s cubic-bezier(.16, 1, .3, 1);
    font-size: 14.5px;
  }
  /* крестик закрытия крупнее под палец */
  .appt-popover__close { width: 36px; height: 36px; top: -4px; right: -2px; }
  .appt-popover__close svg { width: 19px; height: 19px; }
  .appt-popover__del-icon { right: 42px; width: 34px; height: 34px; }
  .appt-popover__head .appt-popover__name { padding-right: 82px; }
  /* «грабли» сверху (на десктопе ::before — hit-зона; на мобиле — ручка) */
  .appt-popover:not([hidden])::before {
    content: '' !important;
    position: absolute !important;
    inset: auto !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(33, 40, 66, 0.18) !important;
    pointer-events: none;
  }
  /* крупнее тап-цели внутри поповера */
  .appt-popover .appt-popover__svc-name,
  .appt-popover .appt-popover__svc-price,
  .appt-popover button { min-height: 32px; }
}
.appt-popover__head { display: flex; flex-direction: column; gap: 4px; }
.appt-popover__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.appt-popover__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-2, #2e3756);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.appt-popover__copy {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: transparent; border: 0; cursor: pointer;
  color: inherit;
  transition: background-color .15s ease, color .2s ease;
}
.appt-popover__copy svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.appt-popover__copy:hover { background: rgba(33, 40, 66, 0.08); }
.appt-popover__copy.is-copied { color: #15803d; background: rgba(34, 197, 94, 0.14); }

/* Статистика пациента — теперь в одну строку, а не три */
.appt-popover__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--accent-2, #2e3756);
}
.appt-popover__stats b { color: var(--ink); font-weight: 700; }

/* 4 статуса в одну строку — компактнее, чем 2x2 */
.appt-popover__statuses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.appt-popover__status {
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid rgba(33, 40, 66, 0.12);
  background: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.appt-popover__status:hover { background: rgba(255, 255, 255, 0.85); }
.appt-popover__status.is-active {
  background: var(--accent, #212842);
  color: #fff;
  border-color: var(--accent, #212842);
}

.appt-popover__total-row {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 10px; border-top: 1px solid rgba(33, 40, 66, 0.08);
}
.appt-popover__total-row .muted { font-size: 12px; }
.appt-popover__total-row b { font-size: 16px; font-weight: 700; }

.appt-popover__details, .appt-popover__notes {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12.5px;
}
.appt-popover__section-title {
  font-size: 10.5px;
  color: var(--ink-3, #7a8294);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}
.appt-popover__notes > div:last-child {
  background: rgba(33, 40, 66, 0.04);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
}
/* Компактная иконка-корзина в правом верхнем углу быстрого просмотра */
.appt-popover__head { position: relative; }
/* Крестик закрытия — верхний правый угол (как у окна записи) */
.appt-popover__close {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(33, 40, 66, 0.06);
  color: #6b7280;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.appt-popover__close:hover { background: rgba(33, 40, 66, 0.12); color: #1e293b; }
.appt-popover__close svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}
.appt-popover__del-icon {
  position: absolute;
  top: 0;
  right: 36px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b0b7c3;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.appt-popover__del-icon:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
}
.appt-popover__del-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* имя не должно залезать под иконки (крестик + корзина) */
.appt-popover__head .appt-popover__name { padding-right: 70px; }
/* кнопка «Редактировать запись» — открыть полное окно из быстрого просмотра */
.appt-popover__edit-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 4px; padding: 11px 12px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: #0e7490; color: #fff;
  font: inherit; font-weight: 600; font-size: 14px;
  transition: filter .12s;
}
.appt-popover__edit-btn:hover { filter: brightness(1.08); }
.appt-popover__edit-btn svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════
   Касса в поповере записи: услуги + баланс + приём оплаты
   ═══════════════════════════════════════════════════════════════════ */
.appt-popover__kassa {
  border-top: 1px solid rgba(33, 40, 66, 0.08);
  padding-top: 8px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.appt-popover__svc-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 0;
}
.appt-popover__svc {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(33, 40, 66, 0.04);
  font-size: 12.5px;
}
.appt-popover__svc-name {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Стало кликабельной кнопкой — клик открывает inline-выбор смены услуги.
     Визуально остаётся «как текст» (без фона/рамки), при ховере подчёркивание. */
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color .12s;
}
.appt-popover__svc-name:hover { border-bottom-color: rgba(99, 102, 241, .35); }
.appt-popover__svc-name-edit {
  /* inline-селект, замещающий имя услуги при правке. Совпадает по
     размеру с обычным span — чтобы не «прыгало». */
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  padding: 2px 6px;
  border: 1px solid rgba(99, 102, 241, .35);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
  min-width: 180px;
}
.appt-popover__svc-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--accent-2, #2e3756);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* кнопка-цена — кликабельная для редактирования (фиолетовая капсула с карандашом) */
  border: 1px solid rgba(99, 102, 241, .15);
  background: rgba(99, 102, 241, .06);
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.appt-popover__svc-price:hover {
  background: rgba(99, 102, 241, .12);
  border-color: rgba(99, 102, 241, .35);
}
.appt-popover__svc-pencil {
  width: 14px; height: 14px;
  flex: 0 0 auto;
  stroke: #6366f1; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  border-radius: 50%;
  background: rgba(99, 102, 241, .15);
  padding: 3px;
  box-sizing: content-box;
  transition: background-color .15s;
}
.appt-popover__svc-price:hover .appt-popover__svc-pencil {
  background: rgba(99, 102, 241, .25);
}
/* статичная (нередактируемая) сумма — без капсулы и без карандаша */
.appt-popover__svc-price--static,
.appt-popover__svc-price--static:hover {
  border-color: transparent;
  background: transparent;
  cursor: default;
  padding: 2px 6px;
}
.appt-popover__svc-price--static .appt-popover__svc-pencil { display: none; }
/* Поле правки цены услуги: акцентная капсула с символом валюты ₸ справа.
   Большой жирный текст справа — как в банковских приложениях/калькуляторах.
   Симол ₸ рисуется через background — отдельная label-нода была бы тяжелее. */
.appt-popover__svc-price-input {
  width: 130px;
  padding: 6px 26px 6px 12px;
  border: 1.5px solid var(--accent, #4f46e5);
  border-radius: 10px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x='8' y='13' text-anchor='middle' font-family='Inter,sans-serif' font-weight='700' font-size='12' fill='%234f46e5'>₸</text></svg>")
    right 8px center / 14px no-repeat
    #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1a2038);
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.appt-popover__svc-price-input:focus {
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.25);
  border-color: #4338ca;
}
.appt-popover__svc-price-input::placeholder { color: #94a3b8; font-weight: 500; }
/* убираем стандартные стрелки number в Chrome (мешают на узком input) */
.appt-popover__svc-price-input::-webkit-outer-spin-button,
.appt-popover__svc-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.appt-popover__svc-price-input { -moz-appearance: textfield; }
.appt-popover__svc-remove {
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(192, 71, 59, 0.10);
  color: var(--danger, #c0473b);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.appt-popover__svc-remove:hover { background: rgba(192, 71, 59, 0.22); }

/* ── История оплат: список с возможностью удалить каждую ── */
.appt-popover__payments {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0;
  border-top: 1px dashed rgba(33, 40, 66, 0.10);
}
.appt-popover__payment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(47, 143, 111, 0.05);  /* лёгкий зелёный — это «подтверждённый» приход */
}
.appt-popover__payment-amount {
  font-weight: 700;
  color: var(--success, #2f8f6f);
  font-variant-numeric: tabular-nums;
}
.appt-popover__payment-meta {
  color: var(--ink-3);
  font-size: 11px;
}
/* Способ оплаты — кликабелен (сменить нал ↔ безнал у принятого платежа) */
.appt-popover__payment-method {
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--accent, #4f46e5);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px dashed currentColor;
}
.appt-popover__payment-method:hover { color: #4338ca; }
.appt-popover__payment-remove {
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(192, 71, 59, 0.10);
  color: var(--danger, #c0473b);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.appt-popover__payment-remove:hover { background: rgba(192, 71, 59, 0.22); }

/* ── Инлайн-форма возврата на странице Касса ── */
.kassa-refund {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kassa-refund__amount {
  width: 100px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 40, 66, 0.10);
}
.kassa-refund__amount::-webkit-outer-spin-button,
.kassa-refund__amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kassa-refund__amount { -moz-appearance: textfield; }

/* ── iPhone-style сегментированный переключатель Список / График работы ── */
.staff-tabs {
  --pill-pad: 3px;
  --pill-x: 0px;
  --pill-w: 0px;
  --pill-h: 0px;
  position: relative;
  display: inline-flex;
  gap: 0;
  padding: var(--pill-pad);
  background: rgba(33, 40, 66, 0.08);
  border: 1px solid rgba(33, 40, 66, 0.06);
  border-radius: 12px;
  isolation: isolate;
}
.staff-tabs__pill {
  position: absolute;
  top: var(--pill-pad);
  left: var(--pill-pad);
  width: var(--pill-w);
  height: var(--pill-h);
  background: #fff;
  border-radius: 9px;
  box-shadow:
    0 2px 6px rgba(33, 40, 66, 0.16),
    0 0 0 0.5px rgba(33, 40, 66, 0.04);
  transform: translateX(var(--pill-x));
  z-index: 0;
  pointer-events: none;
  transition: none;
}
.staff-tabs.is-ready .staff-tabs__pill {
  /* iOS-spring-like ease — включается после первого измерения */
  transition: transform .28s cubic-bezier(.32, .72, 0, 1),
              width  .28s cubic-bezier(.32, .72, 0, 1);
}
.staff-tabs__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: color .2s ease, font-weight .2s ease;
  white-space: nowrap;
}
.staff-tabs__btn:hover { color: var(--ink-2); }
.staff-tabs__btn.is-active {
  color: var(--ink);
  font-weight: 600;
}
.staff-tabs__btn:active { transform: scale(0.97); }

/* ── Тулбар графика работы ── */
.schedule-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px !important;
  /* Сливаем низ тулбара с верхом сетки в один блок */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px solid rgba(33, 40, 66, 0.06);
  margin-bottom: 0 !important;
  position: relative;
  z-index: 1;
}
.schedule-month {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 160px;
  text-align: center;
}
.schedule-card {
  padding: 0 !important;
  overflow: hidden;
  position: relative; /* для абсолютно позиционированных стрелок */
  /* Сливаем верх сетки с низом тулбара */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Плавающие стрелки прокрутки сетки ── */
.sch-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(33, 40, 66, 0.10);
  box-shadow:
    0 4px 14px rgba(33, 40, 66, 0.18),
    0 1px 3px rgba(33, 40, 66, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .2s ease, transform .15s ease, background-color .15s ease;
}
.sch-scroll-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow:
    0 6px 18px rgba(33, 40, 66, 0.22),
    0 1px 3px rgba(33, 40, 66, 0.10);
}
.sch-scroll-arrow:active { transform: translateY(-50%) scale(0.96); }
.sch-scroll-arrow svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sch-scroll-arrow--left  { left: 14px; }
.sch-scroll-arrow--right { right: 14px; }
.sch-scroll-arrow.is-disabled {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.85);
}
/* Контейнер таба графика — обнуляем gap между тулбаром и сеткой */
#tabSchedule { display: flex; flex-direction: column; gap: 0; }
#tabSchedule > * + * { margin-top: 0 !important; }
.schedule-grid-wrap {
  overflow: auto;
  max-height: calc(100vh - 240px);
}

/* Сетка: 1 колонка сотрудник + 1 колонка итого + N колонок дней */
.sch-grid {
  display: grid;
  grid-template-columns: 220px 90px repeat(var(--days, 31), 64px);
  font-size: 12px;
  color: var(--ink);
}
.sch-cell {
  border-right: 1px solid rgba(33, 40, 66, 0.06);
  border-bottom: 1px solid rgba(33, 40, 66, 0.06);
  min-height: 76px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: rgba(255, 255, 255, 0.55);
}
/* Шапка */
.sch-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 600;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
}
.sch-head__title, .sch-head__total {
  z-index: 4;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 700;
}
.sch-head__num {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.sch-head__dow {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.sch-head.is-weekend .sch-head__num,
.sch-head.is-weekend .sch-head__dow { color: var(--danger); }
.sch-head.is-today {
  background: rgba(255, 217, 102, 0.55);
}
.sch-head.is-today .sch-head__num { color: #1a2038; }
.sch-head__cnt {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
}

/* Левая колонка: сотрудник */
.sch-staff {
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 8px;
  cursor: grab;
  user-select: none;
}
.sch-staff:active { cursor: grabbing; }
.sch-drag-handle {
  flex-shrink: 0;
  width: 12px;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-4);
  letter-spacing: -2px;
  opacity: 0;
  transition: opacity .15s ease;
  cursor: grab;
}
.sch-staff:hover .sch-drag-handle { opacity: 0.7; }
.sch-staff.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.sch-staff.is-drop-target {
  background: rgba(33, 40, 66, 0.08);
  box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent);
}
.sch-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.sch-staff__info { min-width: 0; flex: 1; }
.sch-staff__name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  /* ФИО уже сокращено до «Иванов И. П.» — гарантированно влезает */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sch-staff__spec {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Колонка «Итого» */
.sch-total {
  position: sticky;
  left: 220px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sch-total__days, .sch-total__hours {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Ячейка-смена */
.sch-shift {
  background: rgba(170, 220, 170, 0.30);   /* мятный полупрозрачный */
  border: 1px solid rgba(70, 150, 90, 0.25);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  margin: 4px 3px;
  border-radius: 8px;
  min-height: 60px;
  padding: 6px 4px;
  transition: background-color .15s ease, transform .12s ease;
  color: #1a4d27;
}
.sch-shift:hover {
  background: rgba(170, 220, 170, 0.55);
  transform: translateY(-1px);
}
.sch-shift__time { line-height: 1.2; }
.sch-shift__cnt {
  position: absolute;
  bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #1a4d27;
  background: rgba(255, 255, 255, 0.7);
  padding: 1px 6px;
  border-radius: 8px;
}
.sch-shift__break {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  opacity: 0.75;
  cursor: help;
}
.sch-shift.has-break {
  background: linear-gradient(180deg,
    rgba(170, 220, 170, 0.30) 0%,
    rgba(170, 220, 170, 0.30) 38%,
    rgba(255, 230, 175, 0.45) 38%,
    rgba(255, 230, 175, 0.45) 62%,
    rgba(170, 220, 170, 0.30) 62%);
  /* визуально показываем, что внутри есть «полоса» перерыва */
}

/* Ячейка-пусто (с кнопкой +) */
.sch-empty {
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 4px 3px;
  border-radius: 8px;
  min-height: 60px;
  background: transparent;
  border: 1px dashed transparent;
  color: var(--ink-4);
  font-size: 16px;
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sch-empty:hover {
  background: rgba(33, 40, 66, 0.04);
  border-color: rgba(33, 40, 66, 0.18);
  color: var(--accent);
}
.sch-empty__plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(33, 40, 66, 0.08);
  font-size: 14px;
  line-height: 1;
}

.sch-cell.is-weekend-bg { background: rgba(255, 235, 235, 0.45); }
.sch-cell.is-today-bg   { background: rgba(255, 217, 102, 0.18); }

/* ── iOS 26-style tooltip ── */
.ios-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 360px;
  padding: 9px 13px;
  border-radius: 11px;
  background: rgba(28, 33, 54, 0.92);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  white-space: pre-line;
  pointer-events: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  /* Анимация появления — лёгкий «pop» как в iOS */
  opacity: 0;
  transform: translateY(2px) scale(0.98);
  transition:
    opacity .15s cubic-bezier(.32, .72, 0, 1),
    transform .18s cubic-bezier(.32, .72, 0, 1);
}
.ios-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ios-tooltip[data-placement="bottom"] {
  transform: translateY(-2px) scale(0.98);
}
.ios-tooltip[data-placement="bottom"].is-visible {
  transform: translateY(0) scale(1);
}
.ios-tooltip__text {
  display: block;
  font-variant-numeric: tabular-nums;
}
.ios-tooltip__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(28, 33, 54, 0.92);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.ios-tooltip[data-placement="top"] .ios-tooltip__arrow {
  bottom: -4px;
  border-radius: 0 0 2px 0;
}
.ios-tooltip[data-placement="bottom"] .ios-tooltip__arrow {
  top: -4px;
  border-radius: 2px 0 0 0;
}

/* ── Модалка «Добавить/изменить смену» — premium редизайн ── */
.modal--shift {
  max-width: 520px;
  width: 100%;
}
.shift-modal__header {
  margin-bottom: 16px;
}
.shift-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Секции-карточки */
.shift-section {
  background: rgba(33, 40, 66, 0.025);
  border: 1px solid rgba(33, 40, 66, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s ease;
}
.shift-section:hover {
  border-color: rgba(33, 40, 66, 0.10);
}
.shift-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  user-select: none;
}
.shift-section__head--clickable {
  cursor: pointer;
}
.shift-section__head--clickable:hover { background: rgba(33, 40, 66, 0.025); }
.shift-section__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.shift-section__icon svg {
  width: 18px;
  height: 18px;
}
.shift-section__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.shift-section__hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.shift-section__hint.is-active {
  color: var(--accent);
  font-weight: 600;
}
.shift-section__body {
  padding: 0 14px 14px;
}
.shift-section__body--collapsible {
  display: none;
}
.shift-section--break[data-active="true"] .shift-section__body--collapsible {
  display: block;
  animation: shift-section-expand .25s cubic-bezier(.32, .72, 0, 1);
}
@keyframes shift-section-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Время: «начало» → «конец» с авто-длительностью */
.shift-time-row {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 8px;
  align-items: end;
}
.shift-time-col { min-width: 0; }
.shift-time-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  padding-bottom: 12px;
}
.shift-time-arrow svg {
  width: 18px;
  height: 18px;
}
.shift-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 6px;
}

/* iOS-style toggle для «Перерыв» */
.shift-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.shift-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.shift-toggle__slider {
  position: absolute;
  inset: 0;
  background: rgba(33, 40, 66, 0.18);
  border-radius: 999px;
  transition: background-color .25s cubic-bezier(.32, .72, 0, 1);
}
.shift-toggle__slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 0 1px rgba(0, 0, 0, 0.20);
  transition: transform .25s cubic-bezier(.32, .72, 0, 1);
}
.shift-toggle input:checked + .shift-toggle__slider {
  background: #34c759; /* iOS green */
}
.shift-toggle input:checked + .shift-toggle__slider::before {
  transform: translateX(18px);
}

/* Визуальная шкала рабочего дня с врезкой перерыва */
.shift-timeline {
  margin-top: 14px;
  padding: 10px 0 4px;
}
.shift-timeline__bar {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
.shift-timeline__break {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 230, 175, 0.95) 0px,
    rgba(255, 230, 175, 0.95) 4px,
    rgba(255, 200, 130, 0.95) 4px,
    rgba(255, 200, 130, 0.95) 8px
  );
  border-left: 1px solid rgba(0, 0, 0, 0.18);
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  transition: left .25s cubic-bezier(.32, .72, 0, 1),
              width .25s cubic-bezier(.32, .72, 0, 1);
}
.shift-timeline__legend {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.shift-timeline__legend > :first-child { text-align: left; }
.shift-timeline__legend > :last-child  { text-align: right; }
.shift-timeline__center {
  font-weight: 600;
  color: #b87a1f;
  text-align: center;
}

/* Sub-блок «Применять к» внутри перерыва */
.shift-scope-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.shift-scope-label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}

/* Сводка под пилюлями дней недели */
.shift-apply-summary {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(33, 40, 66, 0.04);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Footer: разделили опасные действия и основные */
.shift-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(33, 40, 66, 0.06);
  flex-wrap: wrap;
}
.shift-footer__danger {
  display: flex;
  gap: 4px;
  margin-right: auto;
  flex-wrap: wrap;
}
.shift-footer__action-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.shift-footer__action-btn svg { stroke-width: 2; flex-shrink: 0; }
.shift-footer__action-btn--accent {
  color: var(--accent);
}
.shift-footer__action-btn--accent:hover {
  background: rgba(33, 40, 66, 0.08);
}
.shift-footer__action-btn--danger {
  color: var(--danger);
}
.shift-footer__action-btn--danger:hover {
  background: rgba(192, 71, 59, 0.10);
}
.shift-footer__main {
  display: flex;
  gap: 8px;
}

/* Адаптив: на узких экранах footer сворачивается в стек */
@media (max-width: 540px) {
  .shift-footer { flex-direction: column-reverse; align-items: stretch; }
  .shift-footer__main { width: 100%; justify-content: flex-end; }
  .shift-footer__danger { margin-right: 0; width: 100%; justify-content: center; }
  .shift-time-row { grid-template-columns: 1fr; gap: 12px; }
  .shift-time-arrow { display: none; }
}

/* ── Переключатель «Куда применить перерыв» ── */
.brk-scope {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: rgba(33, 40, 66, 0.06);
  border: 1px solid rgba(33, 40, 66, 0.06);
  border-radius: 10px;
}
.brk-scope__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.brk-scope__btn:hover { color: var(--ink); }
.brk-scope__btn.is-active {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(33, 40, 66, 0.12);
}
.brk-scope__btn:active { transform: scale(0.97); }

/* ── Чекбокс-пилюли дней недели для «Применить к» ── */
.dow-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.dow-pill {
  appearance: none;
  border: 1px solid rgba(33, 40, 66, 0.10);
  background: rgba(33, 40, 66, 0.04);
  color: var(--ink-2);
  border-radius: 10px;
  padding: 9px 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.dow-pill:hover {
  background: rgba(33, 40, 66, 0.09);
  color: var(--ink);
  border-color: rgba(33, 40, 66, 0.18);
}
.dow-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(33, 40, 66, 0.22);
}
.dow-pill.is-active:hover { background: var(--accent-2); }
.dow-pill:active { transform: scale(0.94); }
.dow-pill.is-weekend { color: var(--danger); }
.dow-pill.is-weekend.is-active { color: #fff; }

/* ── Time-picker: две стилизованные колонки часы:минуты ── */
.time-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}
.time-picker .cselect {
  flex: 1;
  min-width: 0;
}
.time-picker .cselect__trigger {
  justify-content: center;
  padding: 10px 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
}
.time-picker .cselect__label {
  text-align: center;
  letter-spacing: 0.04em;
}
.time-picker__sep {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-bottom: 2px;
}

/* ── Группы сотрудников по специальности — равные отступы между блоками ── */
/* Между группами — визуальный «воздух» (а не тонкая линия), чтобы блоки
   не слипались. Используем тонкую серую полосу-разделитель + padding. */
.staff-group + .staff-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, .07);
}
.staff-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 22px 14px;            /* верх меньше — внешний отступ задаёт margin-top группы */
}
.staff-group:first-child .staff-group__head { padding-top: 18px; }
.staff-group__items { padding-bottom: 10px; }
.staff-group:last-child .staff-group__items { padding-bottom: 14px; }
.staff-group__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.staff-group__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(33, 40, 66, 0.07);
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.staff-row {
  padding: 16px 22px;
  border-top: 1px solid rgba(15, 23, 42, .05);
  transition: background .15s;
}
.staff-row:hover { background: rgba(99, 102, 241, .03); }
.staff-row.dragging { opacity: .5; background: rgba(99, 102, 241, .10); }
.staff-row__drag {
  cursor: grab; color: #cbd5e1; font-size: 14px; line-height: 1;
  user-select: none; flex-shrink: 0; padding: 6px 2px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.staff-row:hover .staff-row__drag { color: #6366f1; }
.staff-row__drag:active { cursor: grabbing; }
/* ── Компактные ряды специальностей (перетаскиваемые) ── */
.spec-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .06);
  background: #fff; margin-bottom: 6px;
  transition: background .15s, border-color .15s;
}
.spec-row:last-child { margin-bottom: 0; }
.spec-row:hover { border-color: rgba(99, 102, 241, .25); background: rgba(99, 102, 241, .03); }
.spec-row.dragging { opacity: .5; }
.spec-row__drag {
  cursor: grab; color: #cbd5e1; font-size: 13px; line-height: 1;
  user-select: none; flex-shrink: 0;
}
.spec-row:hover .spec-row__drag { color: #6366f1; }
.spec-row__drag:active { cursor: grabbing; }
.spec-row__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1a2038;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-row__count {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: #6366f1;
  background: rgba(99, 102, 241, .10); border-radius: 999px;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.spec-row__act {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #94a3b8; cursor: pointer;
  border-radius: 8px; transition: background .15s, color .15s;
}
.spec-row__act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spec-row__act:hover { background: rgba(99, 102, 241, .10); color: #4f46e5; }
.spec-row__act--del:hover { background: rgba(239, 68, 68, .10); color: #dc2626; }
.spec-row__act:disabled { opacity: .35; cursor: not-allowed; }
.staff-group__items > .staff-row:first-child { border-top: 0; }
.staff-row .row:first-child { min-width: 0; flex: 1; }
.staff-row > .row:last-child { gap: 8px; flex-shrink: 0; }
.staff-row__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-size: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.staff-row__info { min-width: 0; }
.staff-row__name {
  font-weight: 600;
  font-size: 15px;
  color: #1a2038;
  display: flex; align-items: center; gap: 6px;
}
.staff-row__spec {
  font-size: 13px;
  color: #6b7280;
  margin-top: 3px;
}
.staff-row__cabinet-badge {
  display: inline-block;
  font-size: 11px;
  color: #15803d;
  margin-left: 6px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .staff-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }
  .staff-row > .row:last-child {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* ── Быстрые периоды на странице Касса ── */
.kassa-period {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;       /* при малой ширине переносим целиком блоками */
}
.kassa-dates {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;     /* пара дат + тире остаются единой строкой */
}
.kassa-dates .input {
  width: 150px;
  flex-shrink: 0;
}
.kassa-quick {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: rgba(33, 40, 66, 0.05);
  border: 1px solid rgba(33, 40, 66, 0.08);
  border-radius: 12px;
  flex-wrap: nowrap;     /* три кнопки тоже не разбиваем */
}
.kassa-quick__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.kassa-quick__btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.55); }
.kassa-quick__btn.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(33, 40, 66, 0.18);
}

/* ── Список карточек врачей на странице Касса ── */
/* ── Раздел «Услуги»: красивые строки услуг + drag для сортировки ── */
.svc-row {
  transition: background-color .12s ease, transform .12s ease;
  display: flex !important;
  align-items: center !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .05) !important;
  gap: 12px;
}
.svc-row:last-child { border-bottom: none !important; }
.svc-row:hover { background: rgba(99, 102, 241, .04); }
.svc-row.dragging { opacity: .5; background: rgba(99, 102, 241, .10); transform: scale(.99); }
/* Левый блок (название + drag) расширяется, правый (кнопки) остаётся
   компактным и прижимается к правому краю через justify-content: space-between */
.svc-row > .row:first-child { flex: 1 1 auto; min-width: 0; }
.svc-row > .row:last-child  { flex: 0 0 auto; }
.svc-drag {
  cursor: grab;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  padding: 6px 4px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.svc-row:hover .svc-drag { color: #6366f1; background: rgba(99, 102, 241, .08); }
.svc-drag:active { cursor: grabbing; }
/* Перетаскивание КАТЕГОРИЙ целиком (drag за ⠿ в шапке карточки). */
.svc-cat.dragging { opacity: .5; transform: scale(.995); }
.svc-cat__drag { color: #cbd5e1; }
.svc-cat:hover .svc-cat__drag { color: #6366f1; background: rgba(99, 102, 241, .08); }
.svc-list[data-cat] {
  background: rgba(248, 250, 252, .35);
}
@media (max-width: 720px) {
  .svc-row {
    flex-wrap: wrap;
    padding: 12px 16px !important;
  }
  .svc-row > .row:last-child { width: 100%; justify-content: flex-end; margin-top: 4px; }
}

.kassa-doc-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kassa-doc-sep {
  margin: 12px 4px 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-2, #2e3756);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kassa-doc-sep::before {
  content: "";
  flex: 0 0 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(99,102,241,.4);
  align-self: center;
}
.kassa-doc-sep__hint {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted, #94a3b8);
}
.kassa-doc {
  padding: 0;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.kassa-doc.is-open {
  box-shadow: 0 8px 28px rgba(33, 40, 66, 0.10);
}
.kassa-doc__head {
  display: grid;
  grid-template-columns: 16px 34px 1fr 150px 190px 130px 30px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease;
}
.kassa-doc__head:hover { background: rgba(33, 40, 66, 0.03); }
.kassa-doc__chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), stroke .15s ease;
  flex-shrink: 0;
}
.kassa-doc__head:hover .kassa-doc__chevron { stroke: var(--ink); }
.kassa-doc.is-open .kassa-doc__chevron {
  transform: rotate(90deg);
  stroke: var(--accent);
}
.kassa-doc__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.kassa-doc__info { min-width: 0; }
.kassa-doc__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kassa-doc__specialty {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kassa-doc__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.kassa-doc__metric-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kassa-doc__metric-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.kassa-doc__metric-value.is-positive { color: #2d7a4a; }
.kassa-doc__metric-value.is-negative { color: var(--danger); }
.kassa-doc__metric-sub {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.kassa-doc__edit {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(33, 40, 66, 0.08);
  background: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.kassa-doc__edit:hover {
  background: rgba(33, 40, 66, 0.06);
  border-color: rgba(33, 40, 66, 0.18);
}
.kassa-doc__body {
  border-top: 1px solid rgba(33, 40, 66, 0.06);
  background: rgba(33, 40, 66, 0.02);
}
.kassa-doc__table {
  margin: 0;
  border: none;
  background: transparent;
}
.kassa-doc__table thead th {
  background: transparent;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 14px;
}
.kassa-doc__table tbody td {
  padding: 10px 14px;
  border-top: 1px solid rgba(33, 40, 66, 0.04);
}

@media (max-width: 980px) {
  .kassa-doc__head {
    grid-template-columns: 16px 34px 1fr 28px;
    grid-template-areas:
      "chev av info edit"
      ".    .  m1   m1"
      ".    .  m2   m2"
      ".    .  m3   m3";
    row-gap: 6px;
  }
  .kassa-doc__chevron { grid-area: chev; }
  .kassa-doc__avatar { grid-area: av; }
  .kassa-doc__info { grid-area: info; }
  .kassa-doc__edit { grid-area: edit; }
  .kassa-doc__metric:nth-child(4) { grid-area: m1; }
  .kassa-doc__metric:nth-child(5) { grid-area: m2; }
  .kassa-doc__metric:nth-child(6) { grid-area: m3; }
}

/* Касса внутри модалки записи — переиспользует .appt-popover__* классы */
.appt-kassa {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(33, 40, 66, 0.06);
}
.appt-kassa[hidden] { display: none; }
.appt-kassa .appt-popover__kassa {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* В двухколоночной раскладке делаем кассу более «карточкой» — без верхней границы */
.modal--side.has-kassa .appt-kassa {
  margin-top: 0;
}

.appt-popover__add-svc { margin-bottom: 0; }
.appt-popover__add-svc-select {
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(33, 40, 66, 0.20);
  background: rgba(255, 255, 255, 0.50);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.appt-popover__add-svc-select:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
}

.appt-popover__balance {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(33, 40, 66, 0.06);
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 0;
}
.appt-popover__balance-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
  margin-bottom: 2px;
}
.appt-popover__balance-row:last-child { margin-bottom: 0; }
.appt-popover__balance-row b { font-variant-numeric: tabular-nums; font-size: 13px; }
.appt-popover__balance-row--due {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(33, 40, 66, 0.06);
}
.appt-popover__due {
  display: flex; justify-content: space-between; align-items: baseline; width: 100%;
  color: var(--warn, #c89a4a);
  font-weight: 600;
  font-size: 12.5px;
}
.appt-popover__due b {
  font-size: 14px;
  font-weight: 800;
  color: var(--danger, #c0473b);
}
.appt-popover__paid-full {
  color: var(--success, #2f8f6f);
  font-weight: 700;
  font-size: 12.5px;
}

.appt-popover__pay-btn {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 10px rgba(33, 40, 66, 0.18);
  transition: transform .14s ease, box-shadow .18s ease;
}
.appt-popover__pay-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 5px 14px rgba(33, 40, 66, 0.26);
}
.appt-popover__pay-btn:active { transform: translateY(0); }

.appt-popover__pay-form {
  margin-top: 4px;
  padding: 8px;
  background: rgba(33, 40, 66, 0.04);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.appt-popover__pay-form[hidden] { display: none; }
.appt-popover__pay-methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.appt-popover__pay-method {
  padding: 6px 4px;
  border: 1px solid rgba(33, 40, 66, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s ease;
}
.appt-popover__pay-method:hover { background: rgba(255, 255, 255, 0.85); }
.appt-popover__pay-method.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Смешанная оплата: две строки нал/безнал */
.appt-popover__pay-mixed[hidden] { display: none; }
.appt-popover__pay-mixed-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.appt-popover__pay-mixed-row span { font-size: 13px; color: var(--ink-2, #444b60); }
.appt-popover__pay-cash,
.appt-popover__pay-card {
  width: 130px; text-align: right;
  padding: 6px 10px;
  border: 1px solid rgba(33, 40, 66, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  font: inherit; font-weight: 600;
}
.appt-popover__pay-amount[hidden] { display: none; }
.appt-popover__pay-amount,
.appt-popover__pay-notes {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(33, 40, 66, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  color: var(--ink);
  font-family: inherit;
}
.appt-popover__pay-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.appt-popover__pay-amount:focus,
.appt-popover__pay-notes:focus {
  outline: none;
  border-color: var(--accent);
}
.appt-popover__pay-submit {
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--success, #2f8f6f);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .14s ease;
}
.appt-popover__pay-submit:hover { background: #258060; }

/* Зелёная пилюля «new» — первый визит пациента */
.rcal-event__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 5px rgba(22, 163, 74, 0.38);
  flex-shrink: 0;
}
.rcal-event__new svg {
  width: 11px;
  height: 11px;
  fill: #fff;
  stroke: none;
}
.rcal-event__new + .rcal-event__status { margin-left: 4px; }

/* ── Маркер первичного визита ─────────────────────────────────────────
   Iridescent-полоска вдоль левого края карточки. Пастельная гамма —
   роза → лаванда → индиго — с мягким холодным glow. */
.rcal-event--first-visit {
  /* отодвигаем содержимое от левого края, чтобы полоска не наезжала на текст */
  padding-left: 4px;
}
.rcal-event--first-visit::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    #c4b5fd 0%,        /* violet-300 — светлая лаванда (без розового) */
    #a78bfa 50%,       /* violet-400 — лаванда */
    #6366f1 100%);     /* indigo-500 — насыщенный индиго, в брендовой гамме */
  box-shadow:
    0 0 5px rgba(129, 140, 248, 0.50),
    0 0 11px rgba(167, 139, 250, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  z-index: 3;
  pointer-events: none;
}
/* В шапке поповера — плашка-индикатор «Первичный» в той же гамме */
.appt-popover__first-visit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(196, 181, 253, 0.15) 0%,
    rgba(167, 139, 250, 0.18) 50%,
    rgba(99, 102, 241, 0.16) 100%);
  border: 1px solid rgba(129, 140, 248, 0.42);
  color: #4f46e5;       /* indigo-600 — насыщенный синий-фиолетовый */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  vertical-align: middle;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 8px rgba(129, 140, 248, 0.22);
}
.appt-popover__first-visit svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

/* ── Time bar: range + duration + spacer + бейджи + info ── */
.rcal-event__time-range { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.rcal-event__time-start,
.rcal-event__time-end { white-space: nowrap; }
.rcal-event__time-duration {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* при нехватке места — усечь «…», а НЕ заезжать под ⓘ-кнопку */
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcal-event__time-spacer { flex: 1; min-width: 0; }

/* ── Body: услуга (главное) + пациент с телефоном + заметки ── */
.rcal-event__body {
  padding: 4px 10px 5px;
  flex: 1;
  overflow: hidden;
  line-height: 1.28;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* контент центрируется в свободной высоте — не «висит» вверху */
  gap: 2px;
}
.rcal-event__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rcal-event__service {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcal-event__price {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 11px;
  color: var(--accent, #212842);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
/* Пациент: ИМЯ на одной строке, телефон на следующей. Ellipsis на каждой
   строке отдельно — на узких карточках обрезается имя ИЛИ телефон, но
   не теряется одно ради другого. */
.rcal-event__patient {
  font-size: 11px;
  color: var(--ink-3, #5b6478);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.rcal-event__name {
  color: var(--ink-2, #444b60);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.rcal-event__phone {
  font-size: 10.5px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* Строка «Хирург: …» — рендерится только в карточке операции (op_doctor_id).
   Карточка операции лежит на цветном фоне (статус/первый визит/оплачено),
   поэтому делаем белый непрозрачный фон + тёмный жирный текст — читаемо
   на любом цвете подложки. Тонкая теневая обводка отделяет от фона карты. */
/* Хирург — inline-span внутри названия услуги: «Операция · Акшолакова Ш.С.»
   Не добавляет высоты карточке (живёт в той же строке head'а), на узких
   карточках обрезается ellipsis'ом родителя. Подчёркнут цветом-акцентом. */
.rcal-event__surgeon {
  color: #0d7c52;
  font-weight: 700;
  white-space: nowrap;
}
.rcal-event__notes {
  font-size: 10.5px;
  color: var(--ink-3, #5b6478);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* По требованию владельца: в карточках всегда видны 4 поля — услуга,
   имя, телефон, комментарий. Цену скрываем (она в поповере и модалке).
   Шрифт мельче чем раньше, чтобы 4 строки помещались в стандартной
   карточке 30-минутной записи. */
.rcal-event__price { display: none !important; }

/* ★★★ УНИВЕРСАЛЬНО ДЛЯ ВСЕХ КАРТОЧЕК (не short/medium) ★★★
   4 строки: услуга → имя → телефон → комментарий. Каждая в одну
   строку с ellipsis. Шрифт компактный (10–11px), line-height 1.15. */
.rcal-event .rcal-event__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 2px 8px 3px !important;  /* компактно (-3px от старого) */
  overflow: hidden !important;      /* лишнее не вылазит за низ карточки */
  justify-content: flex-start !important;
  min-width: 0;
}
.rcal-event .rcal-event__head {
  flex: 0 1 auto !important;
  min-height: 0 !important;
}
.rcal-event .rcal-event__head,
.rcal-event .rcal-event__patient {
  display: block !important;
  width: 100% !important;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.rcal-event .rcal-event__patient { flex: 0 0 auto !important; }
.rcal-event .rcal-event__service,
.rcal-event .rcal-event__name,
.rcal-event .rcal-event__phone,
.rcal-event .rcal-event__notes {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  width: 100%;
  min-width: 0;
}
.rcal-event .rcal-event__service {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.rcal-event .rcal-event__name {
  font-size: 10.5px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  color: var(--ink-2, #444b60) !important;
}
.rcal-event .rcal-event__phone {
  font-size: 10px !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
  color: var(--ink-3, #5b6478) !important;
  font-variant-numeric: tabular-nums !important;
}
.rcal-event .rcal-event__notes {
  font-size: 10px !important;
  line-height: 1.18 !important;
  font-style: italic !important;
  opacity: 0.78 !important;
  color: var(--ink-3, #5b6478) !important;
}
/* Тонкий разделитель между услугами и именем пациента — едва заметная
   линия в цвет тени, отделяет визуально, но не «режет» карточку.
   Только в полных карточках (где есть место под обе строки). */
.rcal-event:not(.rcal-event--short):not(.rcal-event--medium) .rcal-event__patient {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

/* ── Короткие карточки (< 30px): СЛИВАЕМ услугу и имя в одну строку
   через «·», обрезаем общим ellipsis — оба гарантированно видны.
   Структура html: __body > __head > __service + __patient > __name.
   Делаем body display:block с overflow ellipsis, дочерние inline. */
.rcal-event--short .rcal-event__body {
  padding: 1px 8px 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* Перебиваем !important универсального правила выше — на коротких
   карточках всё равно нет места под телефон и заметки. */
.rcal-event--short .rcal-event__notes,
.rcal-event--short .rcal-event__price,
.rcal-event--short .rcal-event__phone,
.rcal-event--short .rcal-event__status,
.rcal-event--short .rcal-event__time-duration { display: none !important; }
/* Время начала–конца показываем ВСЕГДА (даже на самых коротких карточках) —
   прячем только «· N мин», чтобы диапазон влез. */
/* shorty одинаковый по высоте с остальными — 3px вертикальный padding */
.rcal-event--short .rcal-event__time { font-size: 10px; padding: 2px 26px 2px 8px; }
.rcal-event--short .rcal-event__head { gap: 0; }

/* ── Средние карточки (38–78px) ─────────────────────────────────────
   Минималистичная компоновка:
     • Шапка (цветная) — время + длительность + одна ⓘ-кнопка справа.
     • Тело — название услуги по центру (цена/имя/телефон/NEW в поповере).
     • Статус кодируется цветом полоски — иконку-статус скрываем.
*/
/* Medium-карточки (30–60px): СЛИВАЕМ услугу и имя в одну строку
   через «·», как на коротких карточках — гарантирует что оба видны
   при любой ширине/длине текста (общий ellipsis на body). */
/* Средние (~30–60px): помещаются 3 строки — услуга/имя/телефон.
   Комментарий показываем только в полных карточках (≥60px), там есть
   четвёртая строка. !important — перебить универсальное правило. */
.rcal-event--medium .rcal-event__notes,
.rcal-event--medium .rcal-event__status,
.rcal-event--medium .rcal-event__price,
.rcal-event--medium .rcal-event__new,
.rcal-event--medium .rcal-event__time-duration { display: none !important; }
.rcal-event--medium .rcal-event__time { padding: 3px 26px 3px 10px; gap: 6px; }
/* Layout body/service/name определён универсально ниже — два ряда block. */

/* ── Полные карточки (≥78px): есть место — раскладываем нормально.
   Название услуги сверху (полностью, перенос на 2 строки, длинные
   слова ломаем), цена — отдельной строкой ниже. Пациент — ниже,
   тоже без обрезки «…». Короткие/средние не трогаем (минимализм). */
.rcal-event:not(.rcal-event--short):not(.rcal-event--medium) .rcal-event__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.rcal-event:not(.rcal-event--short):not(.rcal-event--medium) .rcal-event__price {
  align-self: flex-start;
  font-size: 12px;
}
/* (Раньше тут услуга/имя разворачивались на 2 строки на «полных» карточках —
   убрано: длинная услуга выталкивала имя за низ карточки. Теперь и услуга,
   и имя всегда одна строка с «…» — см. универсальное правило выше.) */

/* ───── Цвета по статусу записи ─────
   Ожидает   → охра (внимание, ждёт подтверждения)
   Подтверждено → зелёный (всё ок)
   Завершено → серый (закрыто)
   Не пришёл → красный (плохой исход) */
/* Палитра статусов: ПАСТЕЛЬНАЯ (мягкие тона), тёмный текст для читаемости.
   Ожидает → зелёный · Подтвердил → фиолетовый · Пришёл → оранжевый · Не пришёл → красный */
.rcal-event--scheduled  .rcal-event__time {
  background: #bbf7d0;        /* пастельно-зелёный */
  color: #065f46;
}
.rcal-event--confirmed  .rcal-event__time {
  background: #ddd6fe;        /* пастельно-фиолетовый */
  color: #5b21b6;
}
.rcal-event--done       .rcal-event__time {
  background: #fed7aa;        /* пастельно-оранжевый */
  color: #9a3412;
}
.rcal-event--no_show    .rcal-event__time {
  background: #fecaca;        /* пастельно-красный */
  color: #991b1b;
}

/* legacy: in_progress трактуем как confirmed, cancelled — как no_show */
.rcal-event--in_progress .rcal-event__time { background: #ddd6fe; color: #5b21b6; }
.rcal-event--cancelled   .rcal-event__time { background: #fecaca; color: #991b1b; }

/* визуальное приглушение для «закрытых» статусов */
.rcal-event--done                          { opacity: 0.92; }
.rcal-event--no_show, .rcal-event--cancelled { opacity: 0.85; }

/* «Оплата закрыта» — приоритетный класс: запись завершена И полностью оплачена.
   Пастельный серый, перебивает любой другой статусный цвет. */
.rcal-event--paid-closed .rcal-event__time {
  background: #c5cdd9 !important;
  color: #2e3756 !important;
}
.rcal-event--paid-closed { opacity: 0.75; }

/* ── Зелёный бейдж «Полностью оплачено» (₸) в углу карточки записи ── */
.rcal-event__paid-badge {
  position: absolute;
  top: 2px;
  right: 24px;          /* слева от ⓘ-кнопки (которая на right:5px шириной 14px) */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2f8f6f;  /* var(--success) */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 2px rgba(33, 40, 66, 0.20);
  pointer-events: none; /* не перехватывает клики */
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* Резервируем место в time-bar чтобы текст времени не наезжал на бейдж */
.rcal-event--is-paid .rcal-event__time { padding-right: 45px; }
.rcal-event--short.rcal-event--is-paid .rcal-event__time   { padding-right: 45px; }
.rcal-event--medium.rcal-event--is-paid .rcal-event__time  { padding-right: 45px; }

/* drag */
.rcal-event[draggable="true"]:active { cursor: grabbing; }
/* Во время drag исходную карточку просто прячем (browser сам рисует
   полупрозрачную drag image, тянущуюся за курсором). На дешёвых ноутах
   любые dashed-borders + cloned cards выжирают FPS — оставляем минимум. */
.rcal-event.is-dragging { visibility: hidden; }
/* Все карточки записей во время drag прозрачны для курсора, чтобы
   dragover/drop попадали в слот ПОД ними. Иначе при наведении на чужую
   запись ghost-предпросмотр не появлялся, и dropнуть на занятое время
   было неудобно. setTimeout(0) в dragstart гарантирует, что класс
   применится ПОСЛЕ инициализации drag (иначе Chrome его отменяет). */
body.is-dragging-evt .rcal-event { pointer-events: none; }

/* ── Упрощённый блок «Услуги и оплата» в окне записи ── */
.kassa-block__title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #94a3b8;
  margin-bottom: 10px;
}
.kassa-block__sub {
  font-size: 13px; color: #6b7280;
  margin: 8px 4px 0;
  font-variant-numeric: tabular-nums;
}
.kassa-block__sub b { color: #1a2038; font-weight: 700; }
.kassa-block__due {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.kassa-block__due span { font-weight: 600; color: inherit; opacity: .85; }
.kassa-block__due b { font-size: 20px; font-weight: 800; }
.kassa-block__due--unpaid {
  background: rgba(234, 88, 12, .10);
  color: #c2410c;
  border: 1px solid rgba(234, 88, 12, .22);
}
.kassa-block__due--paid {
  background: rgba(34, 197, 94, .10);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, .25);
  font-weight: 600;
}
.kassa-block__due--empty {
  background: rgba(15, 23, 42, .04);
  color: #94a3b8;
  border: 1px dashed rgba(15, 23, 42, .12);
}
.kassa-block__pay-btn {
  display: block; width: 100%;
  padding: 12px;
  border: 0; border-radius: 12px;
  background: #1a2038; color: #fff;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.kassa-block__pay-btn:hover { background: #0f172a; }
.kassa-block__history-details {
  margin-top: 12px;
  font-size: 13px;
}
.kassa-block__history-details summary {
  cursor: pointer;
  color: #6366f1;
  font-weight: 600;
  padding: 6px 0;
  user-select: none;
}
.kassa-block__history-details summary:hover { color: #4338ca; }
.kassa-block__history-details[open] summary { margin-bottom: 4px; }

/* Все денежные/числовые инпуты — текст справа, табулярные цифры.
   Цена/сумма привычнее воспринимаются с выравниванием по правому краю
   (как в банковских приложениях и Excel). */
input.js-money,
input[type="number"],
.appt-popover__svc-price-input,
.kassa-adm__inp,
.price-card__inp,
.appt-popover__pay-amount {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

/* «текущее время» — горизонтальная линия */
.rcal__now-line {
  position: absolute;
  left: var(--rcal-time-col-w);
  right: var(--rcal-time-col-w);
  height: 2px;
  background: var(--danger);
  z-index: 4;
  pointer-events: none;
}
.rcal__now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
}

/* Бейдж с реальным текущим временем — слева на шкале времени, поверх линии «сейчас» */
.rcal__now-time {
  position: absolute;
  left: 2px;
  width: calc(var(--rcal-time-col-w) - 4px);
  transform: translateY(-50%);
  text-align: center;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 4px;
  border-radius: 6px;
  z-index: 6;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(192,71,59,0.30);
}
body.is-large-text .rcal__now-time { font-size: 12px; padding: 4px 4px; }

/* ── Меню по клику на врача в шапке календаря ── */
.staff-menu {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.06);
  padding: 6px;
  min-width: 240px;
  user-select: none;
}
.staff-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  border: 0; background: transparent;
  padding: 9px 12px; border-radius: 10px;
  font-size: 14px; color: #1a2038; font-weight: 500;
  cursor: pointer; text-align: left;
}
.staff-menu__item:hover { background: rgba(99,102,241,.08); color: #4338ca; }
.staff-menu__item svg {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.staff-menu__sep { height: 1px; background: rgba(15,23,42,.07); margin: 4px 8px; }

/* ── Модалка «Изменить рабочее время» ── */
.modal--center {
  margin: auto; align-self: center;
  border-radius: 18px; background: #fff;
  padding: 22px 22px 18px;
  width: calc(100% - 32px);
  max-height: 90vh; overflow-y: auto;
}
.se-doctor {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(15,23,42,.04);
  border-radius: 12px;
  margin: 4px 0 12px;
}
.se-doctor__ava {
  width: 42px; height: 42px; border-radius: 50%;
  background-size: cover; background-position: center;
  color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.se-doctor__name { font-size: 14px; font-weight: 600; color: #1a2038; }
.se-doctor__sub  { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.se-date { font-size: 12px; margin: 0 4px 14px; text-transform: capitalize; }
.se-times {
  display: flex; align-items: center; gap: 10px;
}
.se-times .input { width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.se-dash { color: #94a3b8; font-size: 14px; }
.se-add-break {
  border: 0; background: transparent;
  color: #6366f1; font-size: 13px; font-weight: 600;
  padding: 8px 0 0; cursor: pointer; text-align: left;
}
.se-add-break:hover { color: #4338ca; }
#seBreakRemove {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; flex: 0 0 auto;
  color: var(--danger);
}

/* Сделать шапку врача кликабельной (cursor) */
.rcal__staff-head { cursor: pointer; }

/* Специальности — top-блок на staff.html (chip-список) */
.spec-card .card__body { padding-top: 12px; }
#specListTop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: rgba(99,102,241,.08);
  color: #4338ca;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.spec-chip__count { color: #94a3b8; font-size: 12px; }
.spec-chip__del {
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(99,102,241,.18);
  color: #4338ca;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.spec-chip__del:hover:not(:disabled) { background: var(--danger); color: #fff; }
.spec-chip__del:disabled { opacity: .35; cursor: not-allowed; }
.spec-chip__edit {
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(99,102,241,.12);
  color: #4338ca;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.spec-chip__edit:hover { background: rgba(99,102,241,.28); }
.spec-chip__input { width: 130px; }

/* Hover-индикатор времени: бейдж со временем слева под курсором */
.rcal__hover-time {
  position: absolute;
  left: 2px;
  width: calc(var(--rcal-time-col-w) - 4px);
  transform: translateY(-50%);
  text-align: center;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 4px;
  border-radius: 6px;
  z-index: 5;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(99,102,241,0.30);
  opacity: 0;
  transition: opacity .08s linear;
}
.rcal__hover-time.is-on { opacity: 1; }
/* Режим «у курсора»: бейдж свободно позиционируется рядом с мышью,
   ширина по содержимому (а не по левой шкале). */
.rcal__hover-time--cursor {
  left: auto;
  width: auto;
  transform: none;
  white-space: nowrap;
  padding: 3px 8px;
}
body.is-large-text .rcal__hover-time { font-size: 12px; padding: 4px 4px; }

/* Серая горизонтальная линия 5-мин снапа — подсветка позиции курсора
   независимо от шага сетки. Не перехватывает события мыши, лежит
   ниже карточек записей, но выше штриховки нерабочих слотов. */
.rcal__hover-line {
  position: absolute;
  left: 0;
  right: 0;
  /* Высота задаётся из JS = ровно 5 минут × (ROW_PX/ROW_MIN). Это
     блок «куда встанет новая запись», независимо от шага сетки. */
  height: 0;
  background: rgba(100, 116, 139, 0.18);
  border-top: 1px solid rgba(100, 116, 139, 0.55);
  border-bottom: 1px solid rgba(100, 116, 139, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity .08s linear, top .04s linear, height .04s linear;
  z-index: 4;
  border-radius: 2px;
}
.rcal__hover-line.is-on { opacity: 1; }

/* ───── Code ───── */
code {
  background: rgba(33,40,66,0.05);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
}

/* ───── Кнопка «Войти как…» (impersonation, в footer sidebar) ───── */
.sidebar__switch-user {
  display: flex;
  align-items: center;
  justify-content: center;   /* иконка + текст по центру кнопки */
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--sb-divider);
  border-radius: 10px;
  background: transparent;
  color: var(--sb-text-2);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.sidebar__switch-user:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  border-color: rgba(240,231,213,0.30);
}
.sidebar__switch-user svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-shell.is-collapsed .sidebar__switch-user span { display: none; }
.app-shell.is-collapsed .sidebar__switch-user { justify-content: center; padding: 8px; }

/* ───── Bar «Просмотр от имени X» (когда владелец вошёл от имени другого) ───── */
/* ── Список «Войти от имени пользователя» (модалка switch-user) ── */
#switchUserList { display: flex; flex-direction: column; gap: 6px; }
.switch-user__group {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #94a3b8;
  padding: 12px 4px 4px;
}
.switch-user__group:first-child { padding-top: 2px; }
.switch-user__tile {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px;
  background: #fff; border: 1px solid var(--glass-border, #e5e7eb);
  border-radius: 14px; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.switch-user__tile:hover {
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.switch-user__tile:active { transform: scale(0.995); }
.switch-user__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.switch-user__info { flex: 1; min-width: 0; }
.switch-user__email {
  font-size: 13.5px; color: #334155; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.switch-user__arrow { color: #cbd5e1; font-size: 18px; flex: none; }

.impersonate-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(135deg, #c89a4a 0%, #b8893a 100%);
  color: #1a2038;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 60;
  box-shadow:
    0 -6px 18px rgba(33,40,66,0.20),
    inset 0 1px 0 rgba(255,255,255,0.20);
  letter-spacing: -0.01em;
}
.impersonate-bar b { font-weight: 700; }
.impersonate-bar__icon {
  display: inline-flex;
  align-items: center;
}
.impersonate-bar__back {
  background: rgba(33,40,66,0.18);
  border: 0;
  color: #1a2038;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 13px;
  transition: background .15s, transform .12s;
}
.impersonate-bar__back:hover {
  background: rgba(33,40,66,0.30);
  transform: translateY(-1px);
}
/* Когда bar показан — ужимаем app-shell + sidebar + rcal, чтобы не перекрывало контент */
body.is-impersonating .app-shell { height: calc(100vh - 48px); }
body.is-impersonating .sidebar   { height: calc(100vh - 80px); }
body.is-impersonating .rcal      { height: calc(100vh - 80px); max-height: calc(100vh - 80px); }
@media (max-width: 900px) {
  .impersonate-bar { font-size: 12.5px; padding: 0 12px; gap: 10px; }
  .impersonate-bar__back { padding: 6px 12px; font-size: 12px; }
  body.is-impersonating .app-shell { height: auto; }
}

/* ───── Иконки чуть крупнее (общая «читаемость») ───── */
.sidebar__icon { width: 20px; height: 20px; }
.rcal__zoom-btn svg { width: 18px; height: 18px; }
.sidebar-collapse-fab svg { width: 20px; height: 20px; }
.sidebar-collapse-btn--inline svg { width: 18px; height: 18px; }
.rcal-event__status { width: 16px; height: 16px; }
.rcal-event__status svg { width: 12px; height: 12px; }
.public-header__contacts svg { width: 18px; height: 18px; }

/* ───── Drag-n-drop колонок врачей ───── */
.rcal__staff-head { cursor: grab; user-select: none; }
.rcal__staff-head:active { cursor: grabbing; }
.rcal__staff-head.is-dragging { opacity: 0.4; }
.rcal__staff-head--drag-target {
  background: rgba(33,40,66,0.08);
  box-shadow: inset 4px 0 0 var(--accent);
}

/* ───── Ряд «АА + шестерёнка» в footer'е sidebar ───── */
.sidebar__icon-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;       /* кнопки по центру строки */
}
/* Обе кнопки одинаковые — компактные 40×40 */
.sidebar__icon-row .sidebar__a11y {
  margin-top: 0;
  flex: 0 0 40px;                /* фиксированная ширина 40px */
  width: 40px;
}
.sidebar__settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--sb-divider);
  color: var(--sb-text-2);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.sidebar__settings-btn:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  border-color: rgba(240, 231, 213, 0.25);
  transform: translateY(-1px);
  text-decoration: none;
}
.sidebar__settings-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* В свёрнутом сайдбаре — иконки в столбик */
.app-shell.is-collapsed .sidebar__icon-row { flex-direction: column; align-items: center; }

/* ───── Кнопка «Режим для слабовидящих» в sidebar — только иконка по центру ───── */
.sidebar__a11y {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--sb-divider);
  color: var(--sb-text-2);
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.sidebar__a11y:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
  border-color: rgba(240,231,213,0.25);
  transform: translateY(-1px);
}
.sidebar__a11y.is-on {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.sidebar__a11y svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───── Крупный текст (a11y mode) ───── */
body.is-large-text { font-size: 16px; }
body.is-large-text .input,
body.is-large-text select.input,
body.is-large-text textarea.input { font-size: 16px; padding: 14px 16px; }
body.is-large-text .btn-primary,
body.is-large-text .btn-secondary,
body.is-large-text .btn-danger,
body.is-large-text .btn-ghost { font-size: 15px; padding: 13px 22px; }
body.is-large-text .btn-sm { font-size: 13.5px; padding: 9px 16px; }
body.is-large-text .page-title { font-size: 30px; }
body.is-large-text .page-subtitle { font-size: 15px; }
body.is-large-text .table th { font-size: 12.5px; }
body.is-large-text .table td { font-size: 15px; padding: 15px 18px; }
body.is-large-text .sidebar__link { font-size: 16px; }
body.is-large-text .sidebar__user-role { font-size: 14px; }
body.is-large-text .sidebar__user-email { font-size: 13px; }
body.is-large-text .label { font-size: 13px; }
body.is-large-text .pill { font-size: 12px; padding: 5px 14px; }
body.is-large-text .chip { font-size: 13px; }
body.is-large-text .modal__title { font-size: 22px; }
body.is-large-text .empty { font-size: 15px; }
body.is-large-text .muted { font-size: 13px; }
/* Минидатапикер намеренно НЕ растёт — он и так компактный, иначе сетка чисел не влезает в sidebar */
body.is-large-text .sidebar__icon { width: 22px; height: 22px; }
body.is-large-text .public-header__contacts svg { width: 20px; height: 20px; }
/* Календарь — увеличиваем шрифты и шапку колонок (с line-clamp длинные ФИО не режутся).
   font-size для .rcal__staff-name/.rcal__staff-spec задаётся динамически в JS (fitColWidth)
   через CSS-переменные --rcal-staff-name-font / --rcal-staff-spec-font, поэтому здесь не задаём. */
body.is-large-text .rcal__date-label { font-size: 20px; }
body.is-large-text .rcal {
  --rcal-staff-h: 96px;
  --rcal-min-col-w: 230px;
  --rcal-time-col-w: 56px;
}
body.is-large-text .rcal__staff-avatar { width: 44px; height: 44px; font-size: 15px; }
body.is-large-text .rcal-event__time { font-size: 12.5px; }
body.is-large-text .rcal-event__service { font-size: 13.5px; }
body.is-large-text .rcal-event__patient { font-size: 12.5px; }
body.is-large-text .rcal__time-cell { font-size: 12px; }
body.is-large-text .rcal__time-cell--hour { font-size: 13.5px; }

/* ───── Mobile ───── */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;        /* на мобильном можно крутить slide-out панель */
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 40;
  }
  .sidebar.is-open { transform: translateX(0); }
  /* Гамбургер ☰ убран по решению владельца. Меню открывается:
       1) свайпом от левого края экрана
       2) кнопкой-квадратиками ⊞ слева в шапке (на страницах где она есть)
     На чате (где нет ⊞) — только свайпом. */
  .sidebar-toggle { display: none !important; }
  /* В кабинете ВРАЧА нет кнопки-квадратиков, поэтому возвращаем гамбургер —
     он открывает drawer с профилем и кнопкой «Выйти». Быстрая навигация по
     разделам у врача — через нижний таббар. */
  body:has(.sidebar--doctor) .sidebar-toggle { display: inline-flex !important; }
  /* Под нижним таббаром оставляем место, чтобы контент не прятался за ним
     (tabbar ≈64px + небольшой gap). */
  body:has(.bottom-tabbar) main.container {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  /* Кнопка-квадратики ⊞ на мобиле НЕ нужна — навигация через нижний
     таббар (а доступ к Настройкам/Сотрудникам и т.д. — через таб «Ещё»).
     Прячем её и в шапке (inline), и плавающую (fab). */
  .sidebar-collapse-btn,
  .sidebar-collapse-btn--inline,
  .sidebar-collapse-fab { display: none !important; }
  /* Дефолтный верхний паддинг под гамбургер. Если в шапке страницы уже есть
     inline-кнопка-квадратики (меню), гамбургера нет — отступ убираем. */
  .container { padding: 64px 14px 24px; }
  body:has(.sidebar-collapse-btn--inline) .container { padding-top: 8px !important; }
  .page-title { font-size: 22px; }
  .auth-card { padding: 28px; }
  .auth-card .auth-logo { height: 48px; }

  /* Затемнение фона при открытом сайдбаре — клик вне закрывает */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 35;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
  }
  .sidebar.is-open ~ .sidebar-backdrop,
  body.sidebar-open .sidebar-backdrop { display: block; }
}
@media (max-width: 720px) {
  .toolbar .input { min-width: 0; }
  .grid--kpis { grid-template-columns: 1fr 1fr; }
  .table th, .table td { padding: 10px 12px; font-size: 13px; }
}

/* ═════════════════════════════════════════════════════════════════════
   КРАСИВЫЕ СКРОЛЛБАРЫ (iOS / Liquid Glass)
   ─────────────────────────────────────────────────────────────────────
   Тонкий полупрозрачный thumb на прозрачном треке. Появляется по hover
   родителя (как на macOS overlay scrollbars), плавно затухает. Работает
   для Chrome / Edge / Safari (-webkit-) и для Firefox (scrollbar-color).

   Применяется по умолчанию ко ВСЕМ прокручиваемым контейнерам, плюс
   усиленные стили для основных областей: календарь, модалки, сайдбар.
   ═════════════════════════════════════════════════════════════════════ */

/* Firefox: тонкий, цвета thumb-track */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 40, 66, 0.18) transparent;
}

/* Webkit (Chrome, Edge, Safari): глобальные дефолты */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(33, 40, 66, 0.16);
  border-radius: 999px;
  /* «отступ» внутри трека — за счёт прозрачной границы */
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .18s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(33, 40, 66, 0.34);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
  background-color: rgba(33, 40, 66, 0.48);
  background-clip: padding-box;
}
/* Угол между двумя скроллбарами (если оба активны) — тоже прозрачный */
*::-webkit-scrollbar-corner { background: transparent; }
/* Отключаем стрелки-кнопки в Chrome/Edge */
*::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* Календарь — основной скролл сетки. Чуть толще, чтобы удобно тащить
   по 13-часовой колонке. */
.rcal__scroll::-webkit-scrollbar { width: 12px; }
.rcal__scroll::-webkit-scrollbar-thumb {
  background: rgba(33, 40, 66, 0.14);
  border: 3px solid transparent;
}
.rcal__scroll::-webkit-scrollbar-thumb:hover  { background-color: rgba(33, 40, 66, 0.30); }
.rcal__scroll::-webkit-scrollbar-thumb:active { background-color: rgba(33, 40, 66, 0.44); }

/* Модалки (запись, выбор пользователя и т.д.) — полупрозрачно-светлый
   thumb на полу-glass фоне модалки. Переопределяем `scrollbar-width: none`
   из старого правила .modal — теперь скролл виден и стилизован. */
.modal,
.modal--side { scrollbar-width: thin; scrollbar-color: rgba(33, 40, 66, 0.20) transparent; }
.modal::-webkit-scrollbar,
.modal--side::-webkit-scrollbar { width: 8px; height: 8px; }
.modal::-webkit-scrollbar-thumb,
.modal--side::-webkit-scrollbar-thumb {
  background: rgba(33, 40, 66, 0.18);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.modal::-webkit-scrollbar-thumb:hover,
.modal--side::-webkit-scrollbar-thumb:hover {
  background-color: rgba(33, 40, 66, 0.36);
  background-clip: padding-box;
}

/* Сайдбар — на тёмном фоне нужен светлый thumb */
.sidebar::-webkit-scrollbar,
.sidebar__menu::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb,
.sidebar__menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid transparent;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar__menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.28);
}
.sidebar { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.sidebar__menu { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }

/* Поповер записи (детальная инфо) — тоже компактный */
.appt-popover::-webkit-scrollbar { width: 6px; }
.appt-popover::-webkit-scrollbar-thumb {
  background: rgba(33, 40, 66, 0.20);
  border: 0;
}

/* Подсказки пациентов и список услуг — узкие скроллбары для маленьких блоков */
.patient-suggest::-webkit-scrollbar,
.appt-services::-webkit-scrollbar { width: 6px; }
.patient-suggest::-webkit-scrollbar-thumb,
.appt-services::-webkit-scrollbar-thumb {
  background: rgba(33, 40, 66, 0.18);
  border: 0;
  border-radius: 999px;
}
.patient-suggest::-webkit-scrollbar-thumb:hover,
.appt-services::-webkit-scrollbar-thumb:hover {
  background-color: rgba(33, 40, 66, 0.34);
}

/* Полностью скрытые скроллбары для контейнеров, где они портят вид
   (ховерные поповеры, слайды, мобильные горизонтальные ленты) */
.scroll-hide { scrollbar-width: none; }
.scroll-hide::-webkit-scrollbar { display: none; }

/* ═════════════════════════════════════════════════════════════════════
   КАСТОМНЫЙ SELECT (Liquid Glass)
   ─────────────────────────────────────────────────────────────────────
   Заменяет нативные <select> по всему сайту. JS — js/custom-select.js.
   Панель рендерится отдельно в <body> с position:fixed, чтобы выходить
   за overflow:hidden поповеров и модалок.
   ═════════════════════════════════════════════════════════════════════ */

.cselect {
  position: relative;
  display: inline-block;
  width: 100%;
}
.cselect__native {
  /* нативный select прячем, но оставляем в DOM — для форм и accessibility */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cselect__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--border, rgba(33, 40, 66, 0.12));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .18s ease;
  text-align: left;
}
.cselect__trigger:hover {
  border-color: rgba(33, 40, 66, 0.22);
  background: rgba(255, 255, 255, 0.88);
}
.cselect__trigger:focus,
.cselect.is-open .cselect__trigger {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(33, 40, 66, 0.08);
}

.cselect__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.cselect__label.is-placeholder {
  color: var(--ink-3);
  font-weight: 500;
}

.cselect__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), color .15s ease;
}
.cselect__arrow svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.cselect.is-open .cselect__arrow {
  transform: rotate(-180deg);
  color: var(--accent);
}

.cselect.is-disabled { opacity: 0.5; }
.cselect.is-disabled .cselect__trigger { cursor: not-allowed; }

/* ── Панель (рендерится в body, position:fixed) ───────────────────── */
.cselect__panel {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(33, 40, 66, 0.10);
  box-shadow:
    0 1px 2px rgba(33, 40, 66, 0.05),
    0 6px 16px rgba(33, 40, 66, 0.10),
    0 18px 44px rgba(33, 40, 66, 0.18);
  animation: cselectIn 0.18s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: top center;
}
.cselect__panel[hidden] { display: none; }
@keyframes cselectIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.cselect__group {
  margin-top: 6px;
  padding: 10px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6b7493);
  user-select: none;
  background: rgba(33, 40, 66, 0.04);
  border-top: 1px solid rgba(33, 40, 66, 0.10);
}
.cselect__group:first-child {
  margin-top: 0;
  padding-top: 6px;
  border-top: 0;
  background: transparent;
}
/* Группа «Операции» — акцент-оранжевый, как бейдж «ОП» в карточках,
   чтобы админ сразу увидел операции внизу селекта. data-label выставляется
   в custom-select.js из child.label у <optgroup>. */
.cselect__group[data-label="Операции"] {
  color: #b45309;
  background: rgba(245, 158, 11, 0.10);
  border-top-color: rgba(217, 119, 6, 0.30);
}
/* Скальпель — иконка операции. SVG как background-image (через data-URL),
   потому что в CSS ::before нельзя инлайнить SVG-тег. */
.cselect__group[data-label="Операции"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b45309" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4l4 4l-12 12l-4 -4l12 -12z"/><path d="M11 9l4 4"/></svg>') center/contain no-repeat;
}

/* Инлайн SVG-иконка скальпеля (в зеркале операции, рядом с хирургом). */
.scalpel-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 4px;
}
.cselect__group + .cselect__option { margin-top: 0; }

.cselect__option {
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cselect__option + .cselect__option { margin-top: 1px; }
/* Яркий красный бейдж «ОП» в опции-операции custom-select */
.cselect__op-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: 0.6px;
  vertical-align: middle;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.4);
}
/* Бейдж «врем» — временный сотрудник в выборе врача */
.cselect__temp-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #92400e;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  vertical-align: middle;
  line-height: 1.4;
  text-transform: uppercase;
}
.cselect__option.is-highlighted,
.cselect__option:hover {
  background: rgba(33, 40, 66, 0.07);
}
.cselect__option.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.cselect__option.is-active.is-highlighted {
  background: var(--accent-2, #2e3756);
}
.cselect__option.is-active::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 8px;
  margin-top: -6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  border-radius: 1px;
}
.cselect__option.is-placeholder {
  color: var(--ink-3);
  font-weight: 500;
}
.cselect__option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cselect__option.is-disabled:hover { background: transparent; }

/* На тёмном сайдбаре (если когда-то будет select в боковом меню) — инверсия */
.sidebar .cselect__trigger {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--sb-text, #f0e7d5);
}
.sidebar .cselect__trigger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}

/* =====================================================================
   iOS 26-style Date Picker (.cdate)
   ===================================================================== */
.cdate {
  position: relative;
  display: inline-block;
  width: 100%;
}
.cdate__native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  left: 0; top: 0;
}
.cdate__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink, #1a2038);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.cdate--sm .cdate__trigger {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}
.cdate__trigger:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(99, 102, 241, 0.35);
}
.cdate__trigger:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(33, 40, 66, 0.18);
}
.cdate__trigger[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.cdate__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cdate__label--placeholder {
  color: var(--ink-3, #94a3b8);
  font-weight: 400;
}
.cdate__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ink-2, #475569);
  opacity: .7;
  transition: opacity .15s, color .15s;
}
.cdate__trigger:hover .cdate__icon { opacity: 1; color: var(--accent, #6366f1); }

/* На тёмном сайдбаре (если попадёт) */
.sidebar .cdate__trigger {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--sb-text, #f0e7d5);
}
.sidebar .cdate__trigger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── панель ──────────────────────────────────────────────────────── */
/* В datetime-режиме рядом с календарём появляется колонка с часами/минутами */
.cdate__layout { display: flex; gap: 12px; }
.cdate__panel.cdate__panel--dt { width: auto; min-width: 480px; padding: 14px; }
.cdate__col--date { flex: 0 0 auto; }
.cdate__col--time {
  flex: 0 0 156px;
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(15, 23, 42, .06);
  padding-left: 12px;
  min-height: 320px;
}
.cdate__time-head {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px;
  text-align: center;
}
.cdate__wheels {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  flex: 1;
  position: relative;
}
.cdate__wheels::before {
  /* Центральная подсветка iOS-style — затемнённая полоса */
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  top: 50%; transform: translateY(-50%);
  height: 34px;
  background: rgba(99, 102, 241, .10);
  border-radius: 8px;
  pointer-events: none;
}
.cdate__wheel {
  flex: 0 0 56px;
  height: 200px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  padding: 83px 0;       /* (200 - 34) / 2 = 83 — центр в середине высоты */
  position: relative;
  z-index: 1;
}
.cdate__wheel::-webkit-scrollbar { display: none; }
.cdate__wheel-item {
  appearance: none; border: 0; background: transparent;
  width: 100%; height: 34px;
  font: inherit; font-size: 17px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums; font-weight: 600;
  cursor: pointer;
  scroll-snap-align: center;
  transition: color .15s, font-size .15s;
  padding: 0;
}
.cdate__wheel-item:hover { color: #1a2038; }
.cdate__wheel-item.is-current {
  color: #1a2038;
  font-size: 20px;
  font-weight: 700;
}
.cdate__wheel-sep {
  font-size: 22px; font-weight: 700; color: #1a2038;
  align-self: center; padding: 0 2px;
}
.cdate__time-actions {
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, .06);
  display: flex; justify-content: flex-end;
}
.cdate__time-actions .cdate__foot-btn { padding: 8px 16px; }
@media (max-width: 560px) {
  .cdate__panel.cdate__panel--dt { min-width: 0; width: calc(100vw - 24px); }
  .cdate__layout { flex-direction: column; }
  .cdate__col--time {
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid rgba(15, 23, 42, .06);
    padding-left: 0; padding-top: 10px;
    min-height: auto;
  }
  .cdate__wheel { height: 130px; padding: 48px 0; }
}

.cdate__panel {
  position: fixed;
  z-index: 9999;
  width: 296px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .60) inset,
    0 18px 50px rgba(15, 23, 42, .18),
    0 6px 20px rgba(15, 23, 42, .10);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
          backdrop-filter: blur(28px) saturate(170%);
  font-family: inherit;
  color: var(--ink, #1a2038);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition:
    opacity .18s cubic-bezier(.32, .72, 0, 1),
    transform .22s cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
}
.cdate__panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cdate__panel[hidden] { display: none; }

.cdate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.cdate__nav {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2, #475569);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.cdate__nav:hover {
  background: rgba(33, 40, 66, 0.08);
  color: var(--accent, #6366f1);
}
.cdate__title {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1a2038);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  transition: background .15s ease;
}
.cdate__title:hover { background: rgba(33, 40, 66, 0.08); }

.cdate__dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cdate__dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 0;
}
.cdate__dow.is-weekend { color: #ef4444; opacity: .85; }

.cdate__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cdate__day {
  width: 100%;
  aspect-ratio: 1;
  min-height: 34px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1a2038);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease, transform .12s ease;
  position: relative;
}
.cdate__day:hover {
  background: rgba(33, 40, 66, 0.08);
  color: var(--accent, #6366f1);
}
.cdate__day.is-out {
  color: var(--ink-3, #cbd5e1);
  opacity: .55;
}
.cdate__day.is-weekend:not(.is-out):not(.is-selected) { color: #ef4444; }
.cdate__day.is-today:not(.is-selected) {
  font-weight: 700;
  color: var(--accent, #6366f1);
  box-shadow: inset 0 0 0 1.5px var(--accent, #6366f1);
}
.cdate__day.is-selected {
  background: linear-gradient(135deg, var(--accent, #212842), var(--accent-2, #2e3756));
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(33, 40, 66, 0.30);
}
.cdate__day.is-selected:hover { color: #fff; }

/* ── режим выбора месяца (по клику на title) ──────────────────────── */
.cdate__years[hidden] { display: none; }
.cdate__years-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 0 2px;
}
.cdate__month {
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 12px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1a2038);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.cdate__month:hover {
  background: rgba(33, 40, 66, 0.08);
  color: var(--accent, #6366f1);
}
.cdate__month.is-current {
  background: linear-gradient(135deg, var(--accent, #212842), var(--accent-2, #2e3756));
  color: #fff;
  box-shadow: 0 4px 12px rgba(33, 40, 66, 0.30);
}
.cdate__month.is-current:hover { color: #fff; }
.cdate__month.is-today:not(.is-current) {
  box-shadow: inset 0 0 0 1.5px var(--accent, #6366f1);
  color: var(--accent, #6366f1);
}

/* ── футер ───────────────────────────────────────────────────────── */
.cdate__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.cdate__foot-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #475569);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cdate__foot-btn:hover {
  background: rgba(33, 40, 66, 0.08);
  color: var(--accent, #6366f1);
}
.cdate__foot-btn--primary {
  background: rgba(33, 40, 66, 0.12);
  color: var(--accent, #6366f1);
}
.cdate__foot-btn--primary:hover {
  background: var(--accent, #6366f1);
  color: #fff;
}

@media (max-width: 480px) {
  .cdate__panel {
    width: calc(100vw - 24px);
    max-width: 340px;
    padding: 16px;
  }
  .cdate__day { min-height: 40px; font-size: 14px; }
  .cdate__dow { font-size: 11px; padding: 6px 0; }
  .cdate__title { font-size: 15px; padding: 8px 12px; }
  .cdate__nav { width: 36px; height: 36px; }
  .cdate__foot-btn { padding: 10px 14px; font-size: 14px; }
  .cdate__month { padding: 14px 0; font-size: 14px; }
}
/* iOS-полиш для мобильных кастом-селектов и датапикеров (≤720px) */
@media (max-width: 720px) {
  .cdate__trigger,
  .cselect__trigger {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 15px;          /* комфортный размер для тапа */
    border-radius: 12px;
  }
  .cdate--sm .cdate__trigger { min-height: 38px; font-size: 14px; }
  /* Кастом-селект панель — крупнее опции и шире на мобиле */
  .cselect__panel {
    min-width: 240px;
    max-height: 60vh;
    padding: 8px;
    border-radius: 16px;
  }
  .cselect__option {
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .cselect__option + .cselect__option { margin-top: 2px; }
}

/* =====================================================================
   MOBILE OVERRIDES — комплексный набор правил для устройств ≤ 900 / 640 / 480
   ===================================================================== */
@media (max-width: 900px) {
  /* приподнимаем заголовок страницы выше fab-burger, делаем компактным */
  .page-header { margin: 8px 0 12px; gap: 8px; }
  .page-header .page-title { font-size: 20px; line-height: 1.2; }
  .page-header .page-subtitle { font-size: 12px; }
  .page-header .toolbar,
  .page-header .row { width: 100%; }

  /* карточки — меньше padding */
  .card__header { padding: 14px 16px; }
  .card__body   { padding: 16px; }

  /* тулбары — flex-wrap чтобы фильтры переносились */
  .toolbar {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .toolbar > * { flex: 1 1 auto; min-width: 0; }
  .toolbar .btn-primary,
  .toolbar .btn-secondary,
  .toolbar .btn-ghost { flex: 0 0 auto; }

  /* Touch targets — все кнопки и инпуты минимум 40px высоты */
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn,
  button.input,
  select.input {
    min-height: 40px;
  }
  .btn-sm { min-height: 36px; padding: 8px 14px; }
  .input  { min-height: 40px; }

  /* Таблицы — добавляем горизонтальный скролл если не помещаются */
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .table th, .table td { white-space: nowrap; font-size: 13px; padding: 10px 12px; }

  /* Модалки — почти полноэкранные на мобиле */
  .modal-backdrop { padding: 8px; }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    margin: 0;
  }
  .modal--side { max-width: 100%; }
  .modal__header { padding: 14px 16px; }
  .modal__body   { padding: 14px 16px; max-height: none; }
  .modal__footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .modal__footer .btn-primary,
  .modal__footer .btn-ghost { flex: 1 1 auto; }

  /* Формы — full-width поля, переносим ряды */
  .form-row { margin-bottom: 12px; }
  .form-grid { grid-template-columns: 1fr; padding: 14px 16px; }
  .row[style*="gap"] { flex-wrap: wrap; }

  /* Page-header toolbar — кнопки на всю ширину если их одна */
  .page-header .toolbar > a,
  .page-header .toolbar > button { flex: 1 1 auto; }
}

/* — узкие экраны (телефоны в портрете) — */
@media (max-width: 640px) {
  /* KPI: одна колонка */
  .grid--kpis { grid-template-columns: 1fr; gap: 10px; }
  .kpi__value { font-size: 22px; }
  .kpi__label { font-size: 11px; }

  /* свернуть карточный header в столбик когда там <title> + <action> */
  .card__header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .card__header > .btn-primary,
  .card__header > .btn-secondary { flex: 0 0 auto; }

  /* Sidebar burger: тёмная плашка под него — иначе сливается с фоном */
  .sidebar-toggle {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(15,23,42,0.14);
  }

  /* Контейнер — уменьшаем padding */
  .container { padding: 56px 12px 20px; }

  /* Уменьшаем размер кнопок-аватаров в шапке если есть */
  .header-cta .btn { padding: 8px 12px; font-size: 13px; }
}

/* — самые узкие (старые айфоны / маленькие android) — */
@media (max-width: 380px) {
  .page-title { font-size: 18px; }
  .card__body { padding: 12px; }
  .toolbar { gap: 6px; }
  .btn-primary, .btn-secondary, .btn-ghost { padding: 9px 14px; font-size: 13px; }
}

/* =====================================================================
   CALENDAR — мобильная версия (стиль Altegio)
   • Горизонтальный свайп между врачами (фикс. ширина колонки + snap)
   • Компактная шапка врача (аватар сверху + имя в 2 строки)
   • Скрыт правый time-col (на мобиле он лишний)
   • Кнопка «+ Запись» / «Сегодня» — floating FAB справа внизу
   ===================================================================== */
@media (max-width: 900px) {
  /* выключаем zoom-popover (он не нужен на мобиле) — !important чтобы
     перебить любые inline-стили / JS-открытие popover'а */
  .rcal__zoom-wrap,
  .rcal__zoom-btn,
  .rcal__zoom-popover { display: none !important; }
  /* выключаем пагинацию врачей (на мобиле — свайп всех в ленте) */
  .rcal__staff-nav { display: none !important; }

  /* Тулбар календаря — строго ОДНА строка (без переноса), чтобы дата не
     уезжала вниз и не налезала на шапку с врачами. Плотный фон + над сеткой. */
  .rcal__topbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    min-height: 0;
    background: #fff;
    position: relative;
    z-index: 8;
  }
  .rcal__nav { gap: 3px; flex-wrap: nowrap; flex: 1; min-width: 0; align-items: center; }
  /* Дата — занимает остаток строки, длинный текст обрезается «…», не переносится */
  .rcal__date-label {
    font-size: 13px; font-weight: 700; line-height: 1.2;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* «Сегодня»/«‹»/«›» — компактнее на мобиле */
  .rcal__nav .btn-secondary,
  .rcal__nav .btn-ghost {
    padding: 4px 8px !important;
    font-size: 12px !important;
    min-height: 30px;
  }
  /* zoom-кнопка узкая */
  .rcal__zoom-btn { width: 30px !important; height: 30px !important; }
  .rcal__zoom-btn svg { width: 14px !important; height: 14px !important; }
  .rcal__topbar > .btn-primary,
  .rcal__topbar > #btnNew {
    /* "+ Запись" уходит в floating FAB (см. ниже), скрываем из топбара */
    display: none;
  }

  /* Календарь — на всю ширину экрана (убираем horizontal padding контейнера).
     На мобиле вертикальные паддинги тоже убираем: rcal сам занимает всё
     доступное место и заканчивается ровно над weekstrip+tabbar. */
  body:has(.rcal) main.container {
    padding: 0 !important;
  }
  .rcal {
    margin: 0;
    border-radius: 0;
    /* tabbar 48 + weekstrip ~38 = ~86 + safe-area */
    height: calc(100vh - 86px - env(safe-area-inset-bottom)) !important;
    max-height: calc(100vh - 86px - env(safe-area-inset-bottom)) !important;
  }

  /* Горизонтальный скролл по врачам.
     ▸ touch-action: pan-x pan-y — явно разрешаем обе оси, чтобы iOS
       не перехватывал горизонтальный свайп у краёв.
     ▸ overscroll-behavior: contain — блокируем «утечку» скролла в
       историю браузера (iOS back-swipe).
     ▸ scroll-snap-type ВЫКЛЮЧЕН на мобиле: иначе snap прилипал к
       началу ПЕРВОЙ колонки ВРАЧА (после sticky-колонки времени) и
       не давал докрутить так, чтобы первая операционная вышла из-под
       липкой левой шкалы — при отпускании пальца сетка «снапалась»
       обратно. Без snap — свободный скролл до любой позиции. */
  .rcal__scroll {
    overflow-x: auto !important;
    overflow-y: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    overscroll-behavior-x: contain;
  }
  .rcal__scroll::-webkit-scrollbar { display: none; }
  /* Отключаем snap-align у колонок врачей и шапок — снапа теперь нет вовсе */
  .rcal__col,
  .rcal__staff-head { scroll-snap-align: none !important; }

  /* Колонка врача = ровно 1/3 viewport (минус time-col) — гарантия 3 врача на экране.
     Время-колонка: 30px (хватает под «09» в часах и «15/30/45» в четвертях). */
  :root {
    --rcal-mobile-time-col-w: 30px;
    --rcal-mobile-col-w: calc((100vw - var(--rcal-mobile-time-col-w)) / 3);
  }
  .rcal__grid {
    grid-template-columns:
      var(--rcal-mobile-time-col-w)
      repeat(var(--rcal-cols, 1), var(--rcal-mobile-col-w));
    min-width: min-content;
    width: max-content;
  }
  /* На мобиле правый край (правая шкала времени + правый угол шапки) НЕ
     нужен — оставляем только левую шкалу. Скрываем ЯВНО по классам
     (раньше было :last-of-type — оно не срабатывало для угла, т.к.
     последний div = правая шкала, и в шапке оставалась лишняя ячейка →
     вся сетка съезжала на колонку). */
  .rcal__corner--right,
  .rcal__timescale--right,
  .rcal__grid > .rcal__time-col:last-of-type {
    display: none !important;
  }
  /* Время-колонка слева (шкала) + углы — sticky к левому краю */
  .rcal__time-col,
  .rcal__corner,
  .rcal__timescale--left {
    position: sticky;
    left: 0;
    z-index: 6;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }

  /* Шапка врача: ультра-компактная — аватар + 1 строка имени.
     Было 76px (аватар 36 + 2 строки имени), стало ~50px — экономим 26px
     вертикали на каждой загрузке экрана. */
  .rcal__staff-head {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    min-height: 50px;
    text-align: center;
    scroll-snap-align: start;
  }
  .rcal__staff-avatar {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
  .rcal__staff-name {
    font-size: 10px !important;
    line-height: 1.1;
    text-align: center;
    align-items: center;
    font-weight: 600;
  }
  .rcal__staff-name-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  /* Прячем вторую строку ФИО (часто это отчество) — экономим ещё высоты */
  .rcal__staff-name-line + .rcal__staff-name-line { display: none; }
  .rcal__staff-spec {
    display: none;     /* экономим место — специальность не показываем */
  }

  /* Колонки тела — snap-align тоже */
  .rcal__col { scroll-snap-align: start; }

  /* ── Шкала времени на мобиле: 15-мин шаг, наглядно и узко ──
     Показываем ВСЕ 15-мин метки: «09» (час, крупно), «15/30/45» (четверти,
     мельче и приглушённо). Колонка шире (30px), чтобы влезли 2 цифры
     четвертей и не наезжали на сетку. */
  .rcal__time-cell { font-size: 9px; padding: 1px 1px 0; }
  /* Час — компактно одним числом без «:00» */
  .rcal__time-lbl--hour .rcal__time-m { display: none !important; }
  .rcal__time-lbl--hour .rcal__time-h {
    font-size: 11px !important; font-weight: 700;
    color: rgba(33,40,66,0.82) !important;
  }
  /* Четверти (15/30/45) — мельче, серее, читаемо */
  .rcal__time-lbl .rcal__time-q {
    font-size: 9px !important; font-weight: 500;
    color: rgba(33,40,66,0.45) !important;
  }
  .rcal__time-lbl { padding-top: 1px; }
  /* Правую шкалу времени в мобильной grid-сетке нет (только левая) — прячем,
     иначе уезжает в неявную колонку и ломает ширину. */
  .rcal__timescale--right { display: none !important; }

  /* Карточка записи (стиль Altegio): время-диапазон + имя пациента, без услуги.
     На мобиле компактим всё: меньше паддингов, шрифты 9–10px, узкие строки. */
  .rcal-event {
    padding: 2px 5px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
  }
  .rcal-event__time {
    font-size: 9px !important;
    font-weight: 700;
    padding: 1px 6px 1px 6px !important;
    gap: 3px !important;
    border-radius: 4px !important;
  }
  .rcal-event__time-duration { display: none !important; }   /* "· 20 мин" */
  .rcal-event__info { display: none !important; }             /* кнопка-i */
  .rcal-event__status { display: none !important; }           /* статус-иконка справа */
  .rcal-event__online-badge { display: none !important; }     /* бирюзовый глобус */
  .rcal-event__new { display: none !important; }              /* «new» бэйдж */
  /* Тело: услуга + имя + телефон + (комментарий если влез). Услугу
     показываем ВСЕГДА (по требованию владельца) — компактно. */
  .rcal-event .rcal-event__body {
    padding: 2px 5px 2px !important;
    gap: 0 !important;
  }
  .rcal-event__head { gap: 1px !important; }
  /* Услуга — видна всегда, компактным шрифтом */
  .rcal-event .rcal-event__service {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  }
  /* Имя пациента — чуть крупнее остального */
  .rcal-event .rcal-event__name {
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  }
  .rcal-event .rcal-event__phone {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
  .rcal-event .rcal-event__notes {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
  /* Тонкий разделитель между услугой и именем убираем (на мобиле его не видно) */
  .rcal-event:not(.rcal-event--short):not(.rcal-event--medium) .rcal-event__patient {
    margin-top: 1px !important;
    padding-top: 1px !important;
    border-top: 0 !important;
  }
  .rcal-event__paid-badge {
    width: 12px !important; height: 12px !important;
    font-size: 8px !important; right: 3px !important;
  }
  .rcal-event--is-paid .rcal-event__time,
  .rcal-event--short.rcal-event--is-paid .rcal-event__time,
  .rcal-event--medium.rcal-event--is-paid .rcal-event__time {
    padding-right: 22px !important;
  }
  /* Короткие/средние — ещё мельче, чтобы помещалось в 30/15-мин слот */
  .rcal-event--short .rcal-event__time { font-size: 8.5px !important; padding: 1px 18px 1px 5px !important; }
  .rcal-event--medium .rcal-event__time { font-size: 9px !important; padding: 1px 18px 1px 5px !important; gap: 3px !important; }
  /* Уголок ресайза не нужен на тач-устройствах */
  .rcal-event__resize { display: none !important; }
}

/* По умолчанию (desktop) — полоска дней скрыта */
.rcal__weekstrip { display: none; }

/* Плавающие FAB-кнопки + нижняя полоска дней (только на странице календаря, mobile) */
@media (max-width: 900px) {
  /* === Нижняя полоска недели (стиль Altegio) ===
     Лента над bottom-tabbar'ом. Tabbar высотой ~60px + safe-area,
     поэтому weekstrip отступает от низа на эту величину. */
  .rcal__weekstrip {
    /* Карусель: горизонтальный скролл пальцем + snap по дню. */
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    /* Боковые отступы учитывают safe-area (notch / закругление экрана),
       плюс минимум 6px чтобы крайние дни не «прятались» в скруглении.
       Снизу — впритык к tabbar (зазора нет). */
    padding:
      6px
      max(env(safe-area-inset-right), 6px)
      7px
      max(env(safe-area-inset-left), 6px);
    position: fixed;
    /* Точно над tabbar (tabbar = 60px + safe-area-inset-bottom). Без зазора. */
    bottom: calc(60px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    z-index: 45;
    background: #1a2038;     /* тёмный фон как в Altegio */
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.14);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* touch-action: разрешаем только горизонтальный pan, чтобы вертикальный
       свайп проходил «насквозь» (страница могла бы скроллиться). */
    touch-action: pan-x;
  }
  .rcal__weekstrip::-webkit-scrollbar { display: none; }
  .rcal__weekstrip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 0 7px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
    transition: background .12s ease, color .12s ease;
    min-height: 48px;        /* комфортная цель для тапа */
    /* Фиксированная ширина дня — для нативного горизонтального скролла. */
    flex: 0 0 auto;
    width: calc((100vw - 16px) / 7);   /* 7 дней на экран, как было визуально */
    min-width: 46px;
    scroll-snap-align: center;
  }
  .rcal__weekstrip-day:active { background: rgba(255,255,255,0.06); }
  .rcal__weekstrip-day-name {
    font-size: 10.5px;
    text-transform: lowercase;
    letter-spacing: .02em;
    line-height: 1;
  }
  .rcal__weekstrip-day-num {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  .rcal__weekstrip-day--weekend .rcal__weekstrip-day-name,
  .rcal__weekstrip-day--weekend .rcal__weekstrip-day-num {
    color: #ff8e7a;          /* приглушённый красный для выходных */
  }
  .rcal__weekstrip-day--today .rcal__weekstrip-day-num {
    color: #f4d35e;          /* жёлтая подсветка «сегодня» */
  }
  .rcal__weekstrip-day--selected {
    background: #f4d35e;     /* жёлтая таблетка для выбранного дня */
    color: #1a2038;
  }
  .rcal__weekstrip-day--selected .rcal__weekstrip-day-name,
  .rcal__weekstrip-day--selected .rcal__weekstrip-day-num { color: #1a2038; }

  /* (Анимации weekstripSwipe* удалены — полоса теперь нативно прокручивается
     пальцем, а не «листает неделю» дискретными жестами.) */

  /* === FAB-кнопки над полосой дней === */
  body:has(.rcal) #btnNew,
  body:has(.rcal) #btnToday {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    right: 12px;
    z-index: 46;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    font-weight: 700;
    font-size: 13px;
  }
  body:has(.rcal) #btnNew {
    /* tabbar 48 + weekstrip ~40 + 8 зазор */
    bottom: calc(96px + env(safe-area-inset-bottom));
    background: var(--accent);
    color: #fff;
    border: 0;
    height: 46px;
    padding: 0 18px;
  }
  body:has(.rcal) #btnToday {
    bottom: calc(150px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    border: 1px solid var(--glass-border);
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }
  /* padding-bottom не нужен — .rcal сам заканчивается над weekstrip+tabbar
     (см. height: calc(100vh - 86px - env(...))) выше */
}

/* =====================================================================
   ТАБЛИЦА-КАРТОЧКИ для очень узких экранов — пациенты, юзеры, расходы
   Активируется через специальный класс .table--cards-mobile
   ===================================================================== */
@media (max-width: 640px) {
  .table--cards-mobile { display: block; white-space: normal; }
  .table--cards-mobile thead { display: none; }
  .table--cards-mobile tbody { display: block; }
  .table--cards-mobile tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--glass-border-soft);
    border-radius: 12px;
  }
  .table--cards-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: 0;
    font-size: 13px;
    white-space: normal;
  }
  .table--cards-mobile td::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Выбор услуг врача (staff modal) — поиск, группы, цена/время (#1+#6)
   ═══════════════════════════════════════════════════════════════════ */
.svc-pick__count { font-weight: 500; color: var(--accent); font-size: 13px; }
.svc-pick__search {
  width: 100%;
  margin-bottom: 8px;
}
.svc-pick__list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(33, 40, 66, 0.10);
  border-radius: 14px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.5);
}
.svc-pick__hint { font-size: 11.5px; color: #8a92a3; margin-top: 6px; line-height: 1.4; }
.svc-pick__empty { padding: 20px; text-align: center; color: #9aa1ad; font-size: 13px; }
.svc-grp + .svc-grp { margin-top: 4px; }
.svc-grp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 5px;
  position: sticky;
  top: -6px;
  background: linear-gradient(180deg, #fff 60%, rgba(255,255,255,0.85));
  backdrop-filter: blur(4px);
  z-index: 1;
}
.svc-grp__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a92a3;
}
.svc-grp__badge {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  background: rgba(33, 40, 66, 0.07);
  border-radius: 999px;
  padding: 1px 8px;
}
.svc-item {
  border-radius: 12px;
  transition: background-color .15s ease;
  margin-bottom: 4px;                       /* воздух между строками — не слипаются */
}
.svc-item:last-child { margin-bottom: 0; }
.svc-item.is-on { background: var(--accent-soft, rgba(59,130,246,.10)); }
.svc-item__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 11px 12px;
  border-radius: 12px;
}
.svc-item.is-on .svc-item__toggle { padding-bottom: 7px; }
.svc-item__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.5px solid rgba(33, 40, 66, 0.26);
  background: #fff;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.svc-item.is-on .svc-item__check {
  background: var(--accent);
  border-color: var(--accent);
}
.svc-item.is-on .svc-item__check::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 47%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.svc-item__name { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink-1, #1f2433); min-width: 0; }
.svc-item__def { font-size: 12px; color: #8a92a3; white-space: nowrap; flex-shrink: 0; }
.svc-item__def.is-custom { color: var(--accent); font-weight: 700; }
/* блок «своя цена/время» — скрыт, пока врач его не раскрыл */
.svc-item__extra { padding: 2px 12px 11px 44px; }
.svc-item__ovbtn {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 0 0 7px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.svc-item__ovbtn:hover { color: var(--accent); }
.svc-item__ovbtn.is-set { color: var(--accent); }
.svc-item__ov {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.svc-item.is-editing .svc-item__ov { display: flex; }
.svc-ov {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(33, 40, 66, 0.14);
  border-radius: 9px;
  padding: 4px 10px;
}
.svc-ov:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.svc-ov__cap { font-size: 11px; color: #8a92a3; }
.svc-ov__inp {
  width: 58px;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1, #1f2433);
  padding: 4px 0;
  -moz-appearance: textfield;
}
.svc-ov__inp::placeholder { color: #b6bcc8; font-weight: 400; }
.svc-ov__inp::-webkit-outer-spin-button,
.svc-ov__inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.svc-ov__unit { font-size: 12px; color: #8a92a3; }
.svc-ov__reset {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--danger, #e5484d);
  padding: 4px 6px;
}
.svc-ov__reset:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .svc-item__extra { padding-left: 12px; }
  .svc-ov { flex: 1 1 130px; }
  .svc-ov__inp { width: 100%; }
}

/* Маркер «индивидуальные цена/время врача» на карточке услуги в записи */
.appt-service-card__ind {
  color: var(--accent);
  font-weight: 600;
}

/* ── Поиск внутри кастом-селекта (opt-in: data-cs-search="1") ── */
.cselect__search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(33, 40, 66, 0.08);
}
.cselect__search-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(33, 40, 66, 0.14);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  outline: none;
  background: #fff;
}
.cselect__search-inp:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ───── Блок «Операция» в окне записи (расходы + выплата врачу) ───── */
.appt-op { margin-top: 12px; }
.appt-op__payout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.appt-op__costs { margin-top: 4px; }
.appt-op__add {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.appt-op__add-title,
.appt-op__add-amount {
  border: 1px solid rgba(33, 40, 66, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  min-width: 0;
}
.appt-op__add-title  { flex: 1 1 auto; }
.appt-op__add-amount { flex: 0 0 96px; width: 96px; -moz-appearance: textfield; }
.appt-op__add-amount::-webkit-outer-spin-button,
.appt-op__add-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.appt-op__add-title:focus,
.appt-op__add-amount:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.appt-op__add-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.appt-op__add-btn:hover  { filter: brightness(1.06); }
.appt-op__add-btn:active { transform: scale(0.95); }

/* ── Хирурги совместной операции ── */
.appt-surg__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.appt-surg__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(99, 102, 241, 0.05);
  font-size: 13px;
}
.appt-surg__name { flex: 1 1 auto; font-weight: 600; color: #1a2038; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-surg__time { flex: 0 0 auto; color: #475569; font-variant-numeric: tabular-nums; }
.appt-surg__pay  { flex: 0 0 auto; font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; }
.appt-surg__add {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.appt-surg__doctor {
  flex: 1 1 130px; min-width: 110px;
  padding: 7px 10px; border: 1px solid rgba(33, 40, 66, 0.14);
  border-radius: 10px; font: inherit; font-size: 13px; background: #fff;
}
.appt-surg__times { display: inline-flex; align-items: center; gap: 4px; }
.appt-surg__times input {
  width: 78px; padding: 7px 6px; border: 1px solid rgba(33, 40, 66, 0.14);
  border-radius: 10px; font: inherit; font-size: 13px;
}
.appt-surg__pay-inp {
  flex: 0 0 96px; width: 96px;
  padding: 7px 10px; border: 1px solid rgba(33, 40, 66, 0.14);
  border-radius: 10px; font: inherit; font-size: 13px; text-align: right;
  -moz-appearance: textfield;
}
.appt-surg__pay-inp::-webkit-outer-spin-button,
.appt-surg__pay-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.appt-op__summary {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--accent-2, #2e3756);
  border-top: 1px dashed rgba(33, 40, 66, 0.14);
  padding-top: 8px;
}
.appt-op__summary b { color: var(--accent); }
/* редактируемая сумма выплаты врачу — явный аффорданс «изменить» */
.appt-op__editbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  cursor: pointer;
  background: rgba(33, 40, 66, 0.05);
  border: 1px dashed rgba(33, 40, 66, 0.32);
  border-radius: 9px;
  padding: 5px 10px;
  transition: background-color .15s ease, border-color .15s ease;
}
.appt-op__editbtn:hover {
  background: rgba(33, 40, 66, 0.10);
  border-color: var(--accent);
}
.appt-op__editbtn-val {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.appt-op__editbtn-hint {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  opacity: .65;
  white-space: nowrap;
}
.appt-op__editbtn:hover .appt-op__editbtn-hint { opacity: 1; }
.appt-op__block {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(33, 40, 66, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
}
.appt-op__sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #8a92a3;
  margin-bottom: 6px;
}
/* дискретная строка цены в окне записи (не так заметна как «Длительность») */
/* ── iOS 26 / Liquid-Glass диалоги (window.confirmModal / alertModal) ── */
.ui-dialog__backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  display: flex;
  align-items: center; justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: ui-dialog-bd-in .12s ease-out;
}
@keyframes ui-dialog-bd-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ui-dialog {
  width: 100%; max-width: 380px;
  background: #fff;
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, .28),
    0 4px 12px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  animation: ui-dialog-in .16s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ui-dialog-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.ui-dialog__title {
  font-size: 17px;
  font-weight: 700;
  color: #1a2038;
  margin-bottom: 10px;
  line-height: 1.3;
}
.ui-dialog__msg {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 22px;
  white-space: pre-wrap;     /* поддерживаем \n для переноса строк */
  word-wrap: break-word;
}
.ui-dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ui-dialog__btn {
  appearance: none;
  border: 0;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 92px;
  transition: background .15s, transform .12s;
}
.ui-dialog__btn:active { transform: scale(.97); }
.ui-dialog__btn--primary {
  background: #1a2038;
  color: #fff;
}
.ui-dialog__btn--primary:hover { background: #0f172a; }
.ui-dialog__btn--ghost {
  background: rgba(15, 23, 42, .05);
  color: #475569;
}
.ui-dialog__btn--ghost:hover { background: rgba(15, 23, 42, .10); }
.ui-dialog__btn--danger.ui-dialog__btn--primary {
  background: #dc2626;
}
.ui-dialog__btn--danger.ui-dialog__btn--primary:hover { background: #b91c1c; }

body.ui-dialog-open { overflow: hidden; }

@media (max-width: 480px) {
  .ui-dialog { max-width: 100%; padding: 20px 18px 16px; }
  .ui-dialog__title { font-size: 16px; }
  .ui-dialog__btn { padding: 11px 18px; min-width: 80px; }
}

/* ── Единый стиль кнопки «✎ изменить» (карандашик) ──
   Кнопка в стиле iOS 26 / Liquid Glass: круглая, светло-фиолетовый фон,
   SVG-карандаш. Используется везде, где правится сумма (цена услуги,
   выплата врачу за операцию, ручная зарплата админа, и т.п.) — чтобы
   единый язык интерфейса. */
.edit-pencil {
  appearance: none;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(99,102,241,.08);
  color: #6366f1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .12s;
  flex: 0 0 auto;
  padding: 0;
  vertical-align: middle;
}
.edit-pencil:hover { background: rgba(99,102,241,.16); }
.edit-pencil:active { transform: scale(0.94); }
.edit-pencil svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.edit-pencil--sm { width: 26px; height: 26px; }
.edit-pencil--sm svg { width: 12px; height: 12px; }

/* Сумма (выплата врачу) рядом с .edit-pencil */
.appt-op__payout-val {
  font-weight: 700;
  color: #1a2038;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  margin-left: auto;
}

/* Карточка «Цена» в модалке записи (Liquid-Glass / iOS 26 стиль) */
.price-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px 12px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.7));
  border: 1px solid rgba(99, 102, 241, .14);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(15, 23, 42, .04);
  position: relative;
}
.price-card__lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.price-card__val {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  color: #1a2038;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.price-card__val.is-manual { color: var(--accent, #6366f1); }
.price-card__edit {
  appearance: none;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: rgba(99,102,241,.08);
  color: #6366f1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .12s;
  flex: 0 0 auto;
}
.price-card__edit:hover { background: rgba(99,102,241,.16); }
.price-card__edit:active { transform: scale(0.94); }
.price-card__edit svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.price-card__box {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--accent, #6366f1);
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.price-card__inp {
  width: 130px;
  border: 0; outline: none; background: transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #1a2038;
  text-align: right;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.price-card__inp::-webkit-outer-spin-button,
.price-card__inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-card__cur {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 600;
}
@media (max-width: 720px) {
  .price-card { padding: 11px 12px 11px 14px; }
  .price-card__val { font-size: 18px; }
  .price-card__inp { width: 100px; font-size: 16px; }
}

/* ───── Сверка кассы за период (kassa.html) ───── */
.kassa-reconcile { padding: 16px 18px; }
.kassa-reconcile__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2, #2e3756);
  margin-bottom: 12px;
}
.kassa-reconcile__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.kassa-reconcile__item {
  background: rgba(33, 40, 66, 0.04);
  border: 1px solid rgba(33, 40, 66, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
}
/* «Наличными в кассе (на руках)» — выделено как прибыль (зелёным),
   красным при минусе */
.kassa-reconcile__item--hl {
  background: linear-gradient(180deg, rgba(16,185,129,0.13), rgba(16,185,129,0.05));
  border-color: rgba(16,185,129,0.34);
}
.kassa-reconcile__lbl { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.kassa-reconcile__val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-1, #1f2433);
  font-variant-numeric: tabular-nums;
}
.kassa-reconcile__item--hl .kassa-reconcile__lbl { color: #047857; }
.kassa-reconcile__item--hl .kassa-reconcile__val { color: #059669; font-size: 20px; }
.kassa-reconcile__item--hl.is-loss {
  background: linear-gradient(180deg, rgba(239,68,68,0.13), rgba(239,68,68,0.05));
  border-color: rgba(239,68,68,0.34);
}
.kassa-reconcile__item--hl.is-loss .kassa-reconcile__lbl { color: #b91c1c; }
.kassa-reconcile__item--hl.is-loss .kassa-reconcile__val { color: #dc2626; }
.kassa-reconcile__val.is-negative { color: var(--danger, #e5484d); }
.kassa-reconcile__sub { margin-top: 10px; font-size: 12.5px; }
.kassa-reconcile__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.kassa-reconcile__head .kassa-reconcile__title { margin-bottom: 0; }
.kassa-reconcile__shiftctl {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #6b7280;
}
.kassa-reconcile__shiftctl .input-sm { width: auto; padding: 4px 8px; }
/* кастом-селект «граница смен» — компактный по содержимому, не на всю ширину */
.kassa-reconcile__shiftctl .cselect { width: auto; flex: 0 0 auto; }
.kassa-reconcile__shiftctl .cselect__trigger {
  width: auto;
  min-width: 84px;
  padding: 6px 10px;
}
.kassa-reconcile__shifts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.kassa-shift {
  border: 1px solid rgba(33, 40, 66, 0.10);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(33, 40, 66, 0.03);
}
.kassa-shift--day { background: rgba(245, 158, 11, 0.06); border-color: rgba(245,158,11,.18); }
.kassa-shift--eve { background: rgba(79, 70, 229, 0.06);  border-color: rgba(79,70,229,.18); }
.kassa-shift__name {
  font-size: 12.5px; font-weight: 700;
  color: var(--accent-2, #2e3756); margin-bottom: 8px;
}
.kassa-shift__name .muted { font-weight: 400; }
.kassa-shift__row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; padding: 3px 0;
}
.kassa-shift__row span { color: #6b7280; }
.kassa-shift__row b { font-variant-numeric: tabular-nums; color: var(--ink-1, #1f2433); }
.kassa-shift__row--total {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(33,40,66,.14);
}
.kassa-shift__row--total span { color: var(--accent-2, #2e3756); font-weight: 600; }
.kassa-shift__row--total b {
  font-size: 16px; font-weight: 800; color: var(--accent);
}
@media (max-width: 760px) {
  .kassa-reconcile__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kassa-reconcile__shifts { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .kassa-reconcile__grid { grid-template-columns: 1fr; }
}

/* ── Мобильная адаптация «Граница смен» ───────────────────────────
   На мобиле длинная подсказка («оплаты раньше — дневная смена…»)
   занимает много места и оттесняет селект, поэтому её прячем.
   Сам блок шифт-контроля становится во всю ширину под заголовком и
   получает крупную тач-цель (≥44px высоты у селекта). */
@media (max-width: 720px) {
  .kassa-reconcile__head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .kassa-reconcile__shiftctl {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: #374151;
  }
  /* Подсказку прячем — длинный текст путал и съедал место */
  .kassa-reconcile__shiftctl .muted { display: none; }
  /* Селект «Граница смен» — крупная тач-цель, видно сразу что кликабельно */
  .kassa-reconcile__shiftctl .cselect { flex: 0 0 auto; }
  .kassa-reconcile__shiftctl .cselect__trigger,
  .kassa-reconcile__shiftctl .input-sm {
    min-height: 44px;
    min-width: 120px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(33,40,66,0.05);
    border: 1px solid rgba(33,40,66,0.18);
  }
}
@media (max-width: 560px) {
  .appt-op__add { flex-wrap: wrap; }
  .appt-op__add-amount { flex: 1 1 100px; width: auto; }
}

/* ───── Услуга = searchable select + чипы выбранных ───── */
.appt-svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
/* Ссылка-переключатель «услуги нет в списке» / «выбрать из списка» */
.appt-svc-manual-link {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent, #4f46e5);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  line-height: 1.4;
}
.appt-svc-manual-link:hover { color: #4338ca; }
.appt-svc-chips:empty { display: none; }
.appt-svc-chips.is-limit { animation: limitShake .38s ease; }
.appt-svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  border-radius: 12px;
  background: var(--accent-soft, rgba(59,130,246,.10));
  border: 1px solid rgba(33, 40, 66, 0.10);
  max-width: 100%;
}
.appt-svc-chip__n {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1, #1f2433);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.appt-svc-chip__m {
  font-size: 12px;
  color: var(--accent-2, #2e3756);
  opacity: .75;
  white-space: nowrap;
}
.appt-svc-chip__x {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(33, 40, 66, 0.10);
  color: var(--accent-2, #2e3756);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.appt-svc-chip__x:hover { background: var(--danger, #e5484d); color: #fff; }
@media (max-width: 560px) {
  .appt-svc-chip__n { max-width: 150px; }
}

/* Операционная в окне записи — нередактируемая строка (берётся из колонки) */
.appt-room-label {
  border-radius: 14px;
  background: rgba(33, 40, 66, 0.05);
  border: 1px dashed rgba(33, 40, 66, 0.20);
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-2, #2e3756);
}

/* ─── Граница смен в календаре (☀ дневная / 🌙 вечерняя) ─────────────────
   Полоса рендерится в каждой колонке врача (.rcal__shift-divider) —
   визуально сливаются в одну линию через всю сетку. Подписи (.rcal__shift-tag)
   стоят только в левой временной шкале, чтобы не дублировались. */
.rcal__shift-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
  border-top: 2px dashed rgba(168, 85, 247, 0.55);
  box-shadow:
    0 -1px 0 rgba(251, 191, 36, 0.35),
    0  1px 0 rgba(168, 85, 247, 0.35);
}
/* Иконки сидят на самой ГРАНИЦЕ шкалы (right:-9px), пополам нависая
   над колонкой врача справа. Так они не перекрывают цифры времени
   (45/18/15 в центре шкалы) и видны как «маркеры на линии». */
.rcal__shift-tag {
  position: absolute;
  right: -9px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  border-radius: 50%;
  z-index: 3;
  pointer-events: auto;     /* для data-tip нужен hover */
  cursor: help;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}
.rcal__shift-tag--day {
  transform: translateY(-110%);
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  border: 1px solid rgba(217, 119, 6, 0.40);
}
.rcal__shift-tag--eve {
  transform: translateY(10%);
  background: linear-gradient(180deg, #ede9fe, #ddd6fe);
  border: 1px solid rgba(124, 58, 237, 0.40);
}

/* ─── Вкладки смен в Кассе (Дневная / Вечерняя / Объединённая) ──────── */
.kassa-shift-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  margin-bottom: 4px;
}
.kassa-shift-tabs__btn {
  border: 0;
  background: transparent;
  color: #475569;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.kassa-shift-tabs__btn:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
}
.kassa-shift-tabs__btn.is-active {
  background: #fff;
  color: #1a2038;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.kassa-shift-tabs__btn[data-shift="day"].is-active {
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  color: #92400e;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.20), 0 0 0 1px rgba(217, 119, 6, 0.25);
}
.kassa-shift-tabs__btn[data-shift="evening"].is-active {
  background: linear-gradient(180deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.20), 0 0 0 1px rgba(124, 58, 237, 0.25);
}
.kassa-shift-tabs__hint {
  margin-left: auto;
  padding-right: 10px;
  font-size: 12px;
  letter-spacing: 0.01em;
}
/* Подсветка .page-header по выбранной смене раньше делалась через body-класс,
   но при переходе на другую страницу класс оставался — полоса появлялась
   везде. Убрано: активная вкладка сама подсвечивается жёлтым/фиолетовым,
   этого достаточно. */
@media (max-width: 720px) {
  .kassa-shift-tabs__btn { flex: 1; padding: 9px 8px; font-size: 13px; }
  .kassa-shift-tabs__hint { width: 100%; text-align: center; margin: 4px 0 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   📱 UNIVERSAL MOBILE OVERRIDES (одним блоком, в самом конце)
   ────────────────────────────────────────────────────────────────────────
   Точечные media-queries выше делают многое, но остаются типичные щели:
   контейнеры с фиксированной шириной, таблицы прыгают за экран, тулбары
   page-header не переносятся, KPI-сетка по 4 колонки даже на 360px, modal
   фиксированной ширины не помещается на 5'' экране, инпуты zoom-ятся на
   iOS если font-size < 16px. Этот блок чинит общие случаи.
   ──────────────────────────────────────────────────────────────────────── */

/* ───── 720px — стандартный планшетный/малый ноут ───── */
@media (max-width: 720px) {
  /* Container — компактнее по бокам */
  main.container,
  .container { padding-left: 12px; padding-right: 12px; }

  /* Header страницы: title + правые контролы переносятся */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-header > * { width: 100%; }
  .page-title { font-size: 20px; }
  .page-subtitle { font-size: 13px; }

  /* Тулбары/ряды кнопок — flex-wrap + растягиваем кнопки на всю ширину */
  .toolbar, .row, .form-actions, .row-tools, .form-row .row {
    flex-wrap: wrap;
  }
  .form-actions { justify-content: stretch; }
  .form-actions > button, .form-actions > .btn-primary, .form-actions > .btn-ghost {
    flex: 1; min-width: 0;
  }

  /* Сетки на 1-2 колонки на мобиле */
  .grid--kpis,
  .grid-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid--auto, .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Таблицы — горизонтальный скролл вместо обрезки */
  .table-wrap, .data-table-wrap, .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;          /* отступы container компенсируем */
    padding: 0 12px;
  }
  table { font-size: 13px; }
  table th, table td { padding: 8px 6px; }

  /* Модалки — почти fullscreen */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;     /* bottom-sheet feel */
  }
  .modal-backdrop:not(.modal-backdrop--side) .modal {
    width: 100%;
    max-width: none !important;
    max-height: 92dvh;
    margin: 0;
    border-radius: 18px 18px 0 0;
    overflow-y: auto;
  }
  .modal__header { position: sticky; top: 0; background: inherit; z-index: 2; }

  /* Кастомный select / datepicker — поля 100% */
  .input, select.input, textarea.input { font-size: 16px; }    /* iOS не зумит при >=16px */
  .cselect { width: 100%; }
  .cselect__trigger { min-width: 0; }

  /* Поповеры (вне модалок) — ограничить шириной экрана */
  .appt-popover, .popover, .cselect__panel {
    max-width: calc(100vw - 16px);
  }

  /* Кнопка-«фаб» внизу справа (новая запись) — крупнее, отступ от safe-area */
  .fab, .btn-fab {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 16px;
    width: 56px; height: 56px;
  }
}

/* ───── 480px — узкий смартфон (iPhone SE, Android 5'') ───── */
@media (max-width: 480px) {
  /* KPI — всё в 1 колонку при супер-узких */
  .grid--kpis, .grid-kpis { grid-template-columns: 1fr !important; }

  /* Page header — отступ меньше */
  .page-title { font-size: 18px; line-height: 1.2; }

  /* btn-sm везде по-умолчанию (компактнее на узком) */
  .btn-primary, .btn-ghost, .btn-secondary {
    padding: 8px 12px; font-size: 13.5px;
  }

  /* Карточки — внутренний паддинг чуть меньше */
  .card { padding: 14px 14px; }
  .card__header { padding: 12px 14px; }
  .card__body { padding: 0 14px 14px; }

  /* Tap-targets ≥ 44px (рекомендация Apple/Material) */
  .btn-icon, .icon-btn, .chip__close,
  button[aria-label] {
    min-height: 40px; min-width: 40px;
  }

  /* Длинные горизонтальные ряды табов — позволяем скролл */
  .kassa-shift-tabs, .seg, .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* ───── 380px — мини-смартфон (iPhone Mini, Galaxy S8) ───── */
@media (max-width: 380px) {
  main.container, .container { padding-left: 10px; padding-right: 10px; }
  .page-title { font-size: 17px; }
  .card { padding: 12px 12px; }
  .btn-primary, .btn-ghost { font-size: 13px; padding: 7px 10px; }
}

/* ───── Универсально: предотвращаем горизонтальный scroll на body ───── */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  /* Главные контейнеры — жёстко не вылазить за viewport. Без этого
     flex/grid-родители раздвигаются под детей с min-content > viewport
     (например календарь с 9 колонками врачей: каждая 112px = 1008px). */
  .app-shell, main.container, .container {
    max-width: 100vw;
    min-width: 0;
  }
  /* Календарь — фиксим аналогично, плюс overflow-x:auto на __scroll
     чтобы горизонтальный скролл колонок работал внутри (а не наружу). */
  .rcal { max-width: 100%; min-width: 0; }
  .rcal__scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
  }
}

/* ───── Защита: iOS Safari автозум на инпутах с font-size < 16px ─────
   Если где-то inline-style выставляет 13/14px на input — браузер
   увеличит viewport при фокусе и пользователь увидит «зум».
   Этот блок принудительно делает инпуты 16px при наличии on-screen-клавы. */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="search"],
  input[type="date"], input[type="time"], select, textarea {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   📱 BOTTOM TABBAR — мобильная навигация в стиле Altegio/YClients
   ────────────────────────────────────────────────────────────────────────
   Скрыт на десктопе (≥ 721px), виден на смартфоне. Фиксированная панель
   снизу: 4 раздела (Календарь / Чат / Клиенты / Касса). На owner/admin —
   через bottom-tabbar.js. Для других ролей не показывается.
   ──────────────────────────────────────────────────────────────────────── */
.bottom-tabbar { display: none; }

@media (max-width: 720px) {
  .bottom-tabbar {
    display: grid;
    /* столбцов столько, сколько вкладок (4 у врача и админа). */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid rgba(33, 40, 66, 0.10);
    box-shadow: 0 -4px 20px rgba(15, 18, 30, 0.06);
    /* safe-area со всех сторон: снизу — под home-indicator iPhone,
       по бокам — чтобы кнопки и подсветка активной вкладки не уходили
       за скруглённые углы экрана. min 6px чтобы и на Android выглядело
       чисто (без прилипания иконок к самому краю). */
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:  max(env(safe-area-inset-left),  6px);
    padding-right: max(env(safe-area-inset-right), 6px);
  }
  .bottom-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 6px;
    text-decoration: none;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    transition: color .15s ease;
    position: relative;
    min-height: 60px;        /* комфортная цель для тапа (>= рек. 44pt) */
    /* «Ещё» — это <button>; сбрасываем дефолтный вид кнопки */
    background: none; border: 0; font-family: inherit; cursor: pointer;
  }
  .bottom-tabbar:has(.bottom-tabbar__item:nth-child(5)) .bottom-tabbar__item {
    font-size: 10.5px;
    gap: 3px;
    padding-left: 2px;
    padding-right: 2px;
  }
  .bottom-tabbar:has(.bottom-tabbar__item:nth-child(5)) .bottom-tabbar__icon-wrap svg {
    width: 22px;
    height: 22px;
  }
  .bottom-tabbar__item:active { background: rgba(15, 23, 42, 0.04); }
  .bottom-tabbar__item:hover { color: #0f172a; }
  .bottom-tabbar__item.is-active { color: var(--accent, #212842); font-weight: 600; }
  .bottom-tabbar__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--accent, #212842);
    border-radius: 0 0 4px 4px;
  }
  .bottom-tabbar__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .bottom-tabbar__icon-wrap svg {
    width: 23px; height: 23px;
    stroke-width: 2;
  }
  .bottom-tabbar__badge {
    position: absolute;
    top: -4px; right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  .bottom-tabbar__badge[hidden] { display: none; }
  .bottom-tabbar__label {
    line-height: 1;
  }
  /* Чтобы tabbar и weekstrip не закрывали контент — паддинг к body.
     tabbar (~64px) + weekstrip (~66px) = ~130px. На странице календаря
     weekstrip есть, на других — только tabbar (64px). */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.rcal__weekstrip) { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
  /* FAB-кнопки (+ Запись / Сегодня) — поднять над weekstrip+tabbar */
  body:has(.rcal__weekstrip) #btnNew,
  body:has(.rcal__weekstrip) #btnToday,
  body:has(.rcal__weekstrip) .btn-fab,
  body:has(.rcal__weekstrip) .fab {
    bottom: calc(148px + env(safe-area-inset-bottom)) !important;
  }
  /* На страницах БЕЗ weekstrip — FAB чуть выше tabbar */
  body:not(:has(.rcal__weekstrip)) #btnNew,
  body:not(:has(.rcal__weekstrip)) .btn-fab,
  body:not(:has(.rcal__weekstrip)) .fab {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  /* Календарь rcal — высота: вычитаем tabbar (60px) + weekstrip (≈61px)
     + safe-area-inset-bottom. Тогда нижний край сетки стыкуется ровно
     с верхним краем полосы дат, без серой полосы фона между ними. */
  .rcal {
    height: calc(100vh - 32px - 121px - env(safe-area-inset-bottom)) !important;
    max-height: calc(100vh - 32px - 121px - env(safe-area-inset-bottom)) !important;
  }
  /* Внутри chat-page tabbar не нужен (там свой UI на весь экран),
     но он всё равно показывается — добавим запас снизу для chat-input */
  .chat-page { padding-bottom: 0 !important; }
  .chat-input {
    /* Поле ввода чата над tabbar'ом — поднимем (tabbar ≈64px) */
    margin-bottom: 64px;
  }
}

/* Тёмная тема bottom-tabbar (если будет toggle) */
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  .bottom-tabbar {
    background: rgba(15, 18, 30, 0.85);
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .bottom-tabbar__item { color: #94a3b8; }
  .bottom-tabbar__item.is-active { color: #06b6d4; }
}

/* =====================================================================
   SEBE demo mobile hardening
   These rules sit last on purpose: they smooth the demo on real phones
   without changing desktop behavior or page-specific business logic.
   ===================================================================== */
@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    touch-action: manipulation;
  }

  body {
    min-height: 100dvh;
    background-attachment: scroll;
  }

  .app-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .container,
  main.container {
    width: 100%;
    max-width: 100%;
    padding: 14px 12px calc(92px + env(safe-area-inset-bottom));
  }

  body:has(.bottom-tabbar) .container,
  body:has(.bottom-tabbar) main.container {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .page-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 4px 0 12px;
  }

  .page-header > div:first-child {
    min-width: 0;
  }

  .page-header .page-title {
    font-size: 21px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .page-header .page-subtitle {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .page-header .row,
  .page-header .toolbar,
  .toolbar,
  .row {
    max-width: 100%;
    min-width: 0;
  }

  .page-header > .row,
  .page-header > .toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .page-header > .row > *,
  .page-header > .toolbar > * {
    width: 100%;
    min-width: 0 !important;
  }

  .toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
  }

  .toolbar > *,
  .toolbar input,
  .toolbar select,
  .toolbar button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .card {
    max-width: 100%;
    border-radius: 18px;
  }

  .card__header,
  .card__body {
    min-width: 0;
  }

  .grid--kpis,
  .grid-kpis,
  .kpi-grid,
  .an-kpis,
  .sl-kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .kpi,
  .sl-kpi,
  .an-kpi {
    min-width: 0 !important;
  }

  .kpi__value,
  .sl-kpi__val,
  .an-kpi__val {
    font-size: 20px !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .table,
  .table-wrap,
  .data-table-wrap,
  .scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    width: 100%;
    min-width: 620px;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  .modal-backdrop,
  .sl-modal {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .modal,
  .modal--center,
  .modal--wide,
  .sl-modal__box {
    width: 100% !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }

  .modal__header,
  .modal__title {
    flex: none;
  }

  .modal__body,
  .modal form,
  .sl-modal__box {
    min-height: 0;
  }

  .modal__body,
  .modal > form,
  .sl-modal__box {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal__footer,
  .form-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    justify-content: stretch !important;
  }

  .modal__footer > *,
  .form-actions > * {
    width: 100%;
    min-width: 0;
  }

  .form-row,
  .field {
    min-width: 0;
  }

  .form-row .row,
  form .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }

  .input,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .cselect__panel,
  .cdate__panel,
  .datepicker,
  .appt-popover,
  .popover {
    max-width: calc(100vw - 16px) !important;
  }

  .sidebar {
    width: min(86vw, 320px);
    max-width: 320px;
  }

  .sidebar__menu {
    padding-bottom: 18px;
  }

  .bottom-tabbar {
    min-height: calc(64px + env(safe-area-inset-bottom));
  }

  .bottom-tabbar__item {
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }

  .bottom-tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sl-board {
    margin: 0 -12px;
    padding: 0 12px 14px;
    gap: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .sl-col {
    flex: 0 0 86vw !important;
    width: 86vw !important;
    max-height: calc(100dvh - 210px) !important;
    scroll-snap-align: center;
  }

  .sl-card {
    cursor: pointer;
  }

  .an-period {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .an-period > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .an-row,
  .an-srcname,
  .an-funnel {
    min-width: 0;
  }

  .chat-page {
    height: calc(100dvh - 64px - env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
  }

  .chat-input {
    margin-bottom: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 480px) {
  .container,
  main.container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-header > .row,
  .page-header > .toolbar,
  .grid--kpis,
  .grid-kpis,
  .kpi-grid,
  .an-kpis,
  .sl-kpis {
    grid-template-columns: 1fr !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn {
    min-height: 44px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .modal__footer,
  .form-actions {
    grid-template-columns: 1fr !important;
  }

  .table {
    min-width: 560px;
  }

  .rcal {
    --rcal-mobile-time-col-w: 28px;
    --rcal-mobile-col-w: calc((100vw - var(--rcal-mobile-time-col-w)) / 2.35);
  }
}

/* Final demo sidebar contrast override. Keep this at EOF. */
.sidebar {
  --sb-text: #172033;
  --sb-text-2: #2f3b55;
  --sb-text-muted: rgba(23, 32, 51, 0.74);
  --sb-text-dim: rgba(23, 32, 51, 0.50);
  --sb-hover: rgba(23, 32, 51, 0.075);
  --sb-divider: rgba(23, 32, 51, 0.12);
  --sb-active-bg: rgba(255, 255, 255, 0.82);
  --sb-active-text: #172033;
  background:
    linear-gradient(180deg, rgba(221, 249, 250, 0.92) 0%, rgba(232, 239, 250, 0.90) 100%);
  border-color: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 12px 34px rgba(23, 32, 51, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.sidebar__brand,
.minical,
.sidebar__footer {
  border-color: var(--sb-divider);
}

.sidebar__link {
  color: var(--sb-text-muted);
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(23, 32, 51, 0.08);
  font-weight: 650;
  text-shadow: none;
}

.sidebar__link:hover,
.sidebar__link.is-active {
  color: var(--sb-text);
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(23, 32, 51, 0.12);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.10);
}

.sidebar__icon,
.sidebar__icon-action,
.sidebar__settings-btn,
.sidebar__a11y {
  color: var(--sb-text-2);
  opacity: 1;
}

.minical__title,
.minical__day,
.sidebar__user-role {
  color: var(--sb-text);
  text-shadow: none;
}

.minical__dow,
.minical__day--out,
.sidebar__user-email {
  color: var(--sb-text-dim);
}

.minical__nav {
  color: var(--sb-text-muted);
}

.minical__day::before {
  background: conic-gradient(
    var(--load-color, transparent) 0deg,
    var(--load-color, transparent) calc(var(--load, 0) * 360deg),
    rgba(23, 32, 51, 0.12) calc(var(--load, 0) * 360deg),
    rgba(23, 32, 51, 0.12) 360deg
  );
}

.minical__day--load-empty { --load-color: rgba(23, 32, 51, .14); }
.minical__day--load-low   { --load-color: #34b87d; color: #11623f; }
.minical__day--load-mid   { --load-color: #f0a51a; color: #9a6400; }
.minical__day--load-high  { --load-color: #ef5b4f; color: #9d271f; }

.minical__day--today {
  outline-color: rgba(23, 32, 51, 0.72);
}

.minical__day--selected::after {
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.18);
}