/* ============================================================
   КЛИЕНТ ЦЕНТР — Admin Dashboard Styles
   ============================================================ */

/* ── Integration Store ────────────────────────────────────── */
.store-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.store-toolbar .input {
  padding-top: 9px;
  padding-bottom: 9px;
}
.store-price-btns {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.store-categories {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}
.store-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .15s, box-shadow .15s;
}
.store-card:hover { border-color: var(--accent-dim); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.store-card--installed { border-color: var(--green, #22c55e); }
.store-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-dim, rgba(99,102,241,.12));
  color: var(--accent);
  flex-shrink: 0;
}
.store-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.store-card__name { font-size: var(--text-sm); font-weight: 600; }
.store-card__desc { line-height: 1.4; }
.store-card__tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.store-card__actions { margin-top: auto; }
.store-card__installed-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.store-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
}
/* Payment modal */
.store-payment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.store-payment-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-dim, rgba(99,102,241,.12));
  color: var(--accent);
  flex-shrink: 0;
}
.store-payment-price { margin-bottom: var(--sp-4); }
.store-payment-card-mock {
  padding: var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface, var(--bg));
}

/* ── Incoming call popup ──────────────────────────────────── */
.incoming-call-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--panel);
  border: 1.5px solid #7c5cfc;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  max-width: 360px;
  animation: incoming-call-slide-in 0.25s ease;
}

@keyframes incoming-call-slide-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.incoming-call-toast__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  animation: incoming-call-ring 0.6s ease infinite alternate;
}
.incoming-call-toast--recording {
  border-color: var(--blue);
}
.incoming-call-toast--recording .incoming-call-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  border: 1px solid var(--blue);
  border-radius: var(--r-sm);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  animation: none;
}

@keyframes incoming-call-ring {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}

.incoming-call-toast__content {
  flex: 1;
  min-width: 0;
}

.incoming-call-toast__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.incoming-call-toast__body {
  font-size: var(--text-xs);
  color: var(--muted);
}

.incoming-call-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.6;
}
.incoming-call-toast__close:hover { opacity: 1; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.dash-body {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel-strong);
  /* backdrop-filter снят: панель почти непрозрачная, blur невидимо влияет
     на дизайн, но создаёт постоянный compositor layer и forced re-blur
     при любом hover/анимации позади него. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  z-index: 200;
}
.sidebar.is-collapsed { width: 64px; }
.sidebar.is-collapsed .sidebar__label,
.sidebar.is-collapsed .sidebar__section-label,
.sidebar.is-collapsed .sidebar__badge,
.sidebar.is-collapsed .sidebar__user-info,
.sidebar.is-collapsed .sidebar__logo-text { display: none; }
/* Task 7 & 8: collapsed sidebar — show only avatar, hide logo / logout / text */
.sidebar.is-collapsed .sidebar__logo { display: none; }
/* Task 7: keep the footer row so the avatar stays visible */
.sidebar.is-collapsed .sidebar__user { justify-content: center; min-width: 0; }
.sidebar.is-collapsed .sidebar__user-info { display: none; }
/* Task 7: hide logout button in collapsed state; avatar icon replaces it */
.sidebar.is-collapsed #dash-logout-btn { display: none; }
.sidebar.is-collapsed .sidebar__link { justify-content: center; padding-inline: 0; }

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  height: 65px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
  font-weight: 700;
}
.sidebar__logo-mark { color: var(--lime); }
.sidebar__logo-text strong { color: var(--lime); }

.sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
}

.sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__section-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  min-height: 40px;             /* Task 3: uniform height across all tabs */
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-strong);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  position: relative;
  text-decoration: none;
}
.sidebar__link:hover {
  background: rgba(149, 184, 227, 0.08);
  color: var(--text);
}
.sidebar__link.is-active {
  background: var(--lime-dim);
  color: var(--lime);
  border: 1px solid rgba(151,232,91,0.2);
}
.sidebar__icon { flex-shrink: 0; }
.sidebar__badge { margin-left: auto; }
/* Task 3: keep badge compact so it never stretches the link height */
.sidebar__link .badge {
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.4;
}

.sidebar__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  margin-top: auto;
  flex-shrink: 0;
  min-height: 72px;
}
.sidebar__footer .btn { flex-shrink: 0; }
.sidebar__user { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.sidebar__avatar-btn {
  appearance: none;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sidebar__avatar-btn:hover,
.sidebar__avatar-btn:focus-visible {
  border-color: var(--lime);
  transform: translateY(-1px);
}
.sidebar__avatar-btn:focus-visible {
  outline: 2px solid rgba(151, 232, 91, 0.35);
  outline-offset: 2px;
}
.sidebar__avatar-btn.is-uploading {
  pointer-events: none;
  opacity: 0.55;
}
.sidebar__user-info { flex: 1; min-width: 0; overflow: hidden; }
.sidebar__user-name,
.sidebar__user-info .caption {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__user-name { font-weight: 600; line-height: 1.2; }

/* collapsed: header becomes a centred column, button stays anchored */
.sidebar.is-collapsed .sidebar__header {
  justify-content: center;
}
.sidebar.is-collapsed .sidebar__collapse {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  aspect-ratio: 1;
}
.sidebar.is-collapsed .sidebar__collapse svg {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
/* collapsed: footer centres the logout button */
.sidebar.is-collapsed .sidebar__footer {
  justify-content: center;
}

/* ── MAIN CONTENT ────────────────────────────────────────── */
.dash-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  height: 65px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  /* backdrop-filter снят — см. комментарий у .sidebar. */
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  justify-self: start;
}
.topbar__breadcrumb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__center {
  width: min(520px, 100%);
  min-width: 0;
  justify-self: center;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  justify-self: end;
}
.topbar__right .btn--icon { position: relative; }

.global-search {
  position: relative;
  width: 100%;
  z-index: 20;
}

.global-search__input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 42px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 40px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.global-search__input::placeholder { color: var(--muted); }

.global-search__input:focus {
  border-color: var(--blue);
  background: var(--panel-hover);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

.global-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.global-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--muted);
  transform: translateY(-50%);
}

.global-search__clear:hover {
  color: var(--text);
  background: rgba(149, 184, 227, 0.1);
}

.global-search__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: min(520px, calc(100vh - 96px));
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  /* backdrop-filter снят (см. .sidebar). */
}

.global-search__state {
  padding: var(--sp-4);
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

.global-search__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.global-search__section + .global-search__section {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.global-search__section-title {
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}

.global-search__result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 54px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  text-align: left;
  color: var(--text);
}

.global-search__result:hover,
.global-search__result.is-active {
  background: rgba(149, 184, 227, 0.1);
}

.global-search__result-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--blue-dim);
  color: var(--blue);
}

.global-search__result-main {
  min-width: 0;
}

.global-search__result-title,
.global-search__result-subtitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search__result-title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
}

.global-search__result-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.global-search__result-meta {
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Task 6: notification icon button must match .btn--sm height */
#notif-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#new-appointment-btn,
#cal-new-appt-btn {
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

/* Task 8: collapse toggle — remove ghost-button border/hover, style like a sidebar icon */
.sidebar__collapse {
  border: none !important;
  background: transparent !important;
  color: var(--muted-strong);
  border-radius: var(--r-md);
  padding: 8px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar__collapse:hover {
  background: rgba(149, 184, 227, 0.1) !important;
  color: var(--text);
}

/* Task 4: appt-status-select matches .btn--sm height; arrow has proper right room */
.appt-status-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.appt-status-select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 130px;
  height: 36px;
  padding: 0 2.4rem 0 var(--sp-3);
  font-size: var(--text-xs);
  line-height: 1;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
}
.appt-status-select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.appt-status-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}

/* ── VIEW PANELS ─────────────────────────────────────────── */
.dash-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.dash-view__inner {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: var(--sp-6) var(--sp-6) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* ── CARD HEADER PATTERN ─────────────────────────────────── */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
}

.requests-list-header {
  align-items: flex-start;
  flex-wrap: wrap;
}
.requests-list-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 36px;
}
.requests-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.requests-list-control {
  width: auto;
  min-width: 190px;
}
.requests-list-control .select-input,
.requests-list-control .custom-select__button {
  height: 36px;
  min-height: 36px;
  font-size: var(--text-sm);
  padding-top: 0;
  padding-bottom: 0;
}

/* ── VIEW HEADER ─────────────────────────────────────────── */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.view-header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.view-toggle {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-sizing: border-box;
}
.view-toggle__btn {
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: calc(var(--r-md) - 4px);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}
.view-toggle__btn.is-active {
  color: var(--lime);
  background: var(--lime-dim);
}

.time-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  padding: 3px;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-sizing: border-box;
}
.time-mode-toggle__btn {
  min-width: 0;
  height: 100%;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: calc(var(--r-md) - 4px);
  background: transparent;
  color: var(--muted-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.time-mode-toggle__btn.is-active {
  color: var(--lime);
  background: var(--lime-dim);
}

/* ── ORGANIZATION ONBOARDING ─────────────────────────────── */
.org-onboarding,
.org-context {
  padding: var(--sp-5);
}
.org-onboarding__content,
.org-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.org-context__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* ── METRICS GRID ────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* ── OVERVIEW GRID ───────────────────────────────────────── */
/* 12-колоночная сетка с фиксированной высотой строки. Виджет занимает
   целое число ячеек и позиционируется через CSS-переменные --gx/--gy/--gw/--gh,
   которые проставляются из JS (см. dashboard.js → _applyGridStyles). */
.overview-grid {
  --grid-cell-h: 80px;
  --grid-gap: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--grid-cell-h);
  grid-auto-flow: dense;
  gap: var(--grid-gap);
  align-items: stretch;
  min-height: calc(var(--grid-rows, 8) * var(--grid-cell-h) + (var(--grid-rows, 8) - 1) * var(--grid-gap));
  position: relative;
}
/* В режиме перетаскивания/изменения размера показываем подложку с ячейками,
   чтобы было видно куда «прилипнет» виджет. */
.overview-grid.is-editing {
  background-image:
    linear-gradient(to right,  rgba(149,184,227,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(149,184,227,0.12) 1px, transparent 1px);
  background-size:
    calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap)) 100%,
    100% calc(var(--grid-cell-h) + var(--grid-gap));
  background-position: -1px -1px;
}
.overview-grid[data-empty] { grid-template-columns: 1fr; min-height: 0; }
.overview-empty {
  grid-column: 1 / -1;
  padding: var(--sp-6);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.overview-empty .btn-link {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
}
.widget-card {
  --widget-pad-x: var(--sp-4);
  --widget-pad-y: var(--sp-4);
  --widget-gap: var(--sp-3);
  --widget-value-size: var(--text-3xl);
  grid-column: var(--gx, 1) / span var(--gw, 6);
  grid-row: var(--gy, auto) / span var(--gh, 3);
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: visible;
  /* Переопределяем .card padding, чтобы внутренние отступы задавал
     widget-card__inner (с правильной величиной под наш контент). */
  padding: 0;
  cursor: grab;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* Hover .card дёргает transform — мешает drag-у. Отключаем. */
.widget-card:hover { transform: none; box-shadow: none; background: var(--panel); border-color: var(--line); z-index: 3; }
.widget-card:active { cursor: grabbing; }
.widget-card.is-dragging {
  cursor: grabbing;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 10;
  opacity: 0.92;
  will-change: transform;
}
.widget-card.is-resizing {
  box-shadow: 0 0 0 2px var(--blue);
  z-index: 10;
}
.widget-card.is-shifting {
  border-color: var(--blue-dim);
  z-index: 4;
  will-change: transform;
}
.widget-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--widget-gap);
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: var(--widget-pad-y) var(--widget-pad-x);
  overflow: hidden;
  border-radius: inherit;
}
.widget-card .card-header {
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--sp-3);
  margin-bottom: 0;
}
.widget-card .card-header .heading-2 {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.widget-card .card-header .btn,
.widget-card .card-header .badge {
  flex-shrink: 0;
}
.widget-card[data-density="compact"] .card-header {
  align-items: center;
}
.widget-card[data-density="compact"] .card-header .heading-2 {
  font-size: var(--text-lg);
}

/* Resize grip: hidden by default; the visible part is a thick copy of the card border. */
.widget-resize {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 48px;
  height: 48px;
  cursor: se-resize;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translate(4px, 4px) scale(0.96);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.widget-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 4px solid transparent;
  border-right-color: var(--blue);
  border-bottom-color: var(--blue);
  border-radius: calc(var(--r-xl) + 2px);
  clip-path: inset(calc(100% - 25px) 0 0 calc(100% - 25px) round 0 4px 0 4px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--dur-fast) var(--ease);
}
.widget-card:hover .widget-resize,
.widget-card.is-resizing .widget-resize {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0) scale(1);
}
.widget-card:hover::after,
.widget-card.is-resizing::after {
  opacity: 1;
}

/* Внутри виджета stat-card делает бессмысленный двойной background/border —
   снимаем и размещаем содержимое сверху. Padding даёт .widget-card__inner. */
.widget-card .stat-card,
.widget-card .widget-stat {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--widget-gap);
  min-width: 0;
  min-height: 0;
}
.widget-card .stat-card:hover { transform: none; border-color: transparent; }
.widget-card .stat-card__label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  min-width: 0;
}
.widget-card .stat-card__label svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.widget-card .stat-card__value {
  /* Чтобы число не вылезало за пределы малого виджета. */
  font-size: var(--widget-value-size);
  line-height: 1.1;
  word-break: break-word;
  margin-block: auto;
}
.widget-card .widget-stat--org {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--widget-gap);
  justify-content: center;
}
.widget-card .widget-stat--org-with-emoji {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: max(var(--widget-gap), var(--sp-4));
}
.widget-stat__org-content {
  min-width: 0;
}
.widget-stat__org-emoji {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  justify-self: end;
  align-self: center;
}
.widget-stat__org-emoji-img {
  width: 64px;
  height: 64px;
}
.widget-stat__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 0;
}
.widget-stat__body .heading-3 {
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.widget-stat__org-meta {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--sp-2);
}
.widget-stat__org-limits {
  display: block;
  line-height: 1.4;
}
.widget-card[data-density="compact"] .stat-card__value {
  margin-block: var(--sp-2) 0;
}
.widget-card[data-density="compact"] .widget-stat__body {
  justify-content: flex-start;
}
.widget-card[data-density="compact"] .widget-stat--org-with-emoji {
  gap: var(--sp-3);
}
.widget-card[data-density="compact"] .widget-stat__org-emoji {
  width: 46px;
  height: 46px;
}
.widget-card[data-density="compact"] .widget-stat__org-emoji-img {
  width: 42px;
  height: 42px;
}
.widget-card[data-density="spacious"] .widget-stat__org-emoji {
  width: 88px;
  height: 88px;
}
.widget-card[data-density="spacious"] .widget-stat__org-emoji-img {
  width: 80px;
  height: 80px;
}

/* Общая разметка строки списка для новых виджетов */
.widget-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.widget-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.widget-row:last-child { border-bottom: none; }
.widget-row__main { flex: 1; min-width: 0; }
.widget-row__preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}
.widget-row--clickable {
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}
.widget-row--clickable:hover { background: rgba(149,184,227,0.04); }
.widget-card .widget-list--scrollable .widget-row--clickable {
  margin-left: calc(-1 * var(--sp-3));
  padding-left: var(--sp-3);
}
.widget-card :is(.appt-list, .master-load-list, .pending-list, .widget-list) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.widget-card .widget-list--scrollable {
  --widget-scrollbar-gutter: min(18px, var(--widget-pad-x));
  margin-left: calc(-1 * var(--sp-3));
  margin-right: calc(-1 * var(--widget-scrollbar-gutter));
  padding-left: var(--sp-3);
  padding-right: var(--widget-scrollbar-gutter);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--line-strong) 78%, transparent) transparent;
}
.widget-card .widget-list--scrollable::-webkit-scrollbar {
  width: 6px;
}
.widget-card .widget-list--scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.widget-card .widget-list--scrollable::-webkit-scrollbar-thumb {
  min-height: 28px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--line-strong) 78%, transparent);
}
.widget-card .widget-list--scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}
.widget-card .master-load-list,
.widget-card .pending-list {
  gap: var(--widget-gap);
}
.widget-card :is(.appt-row, .master-load-row, .pending-row, .widget-row) {
  flex-shrink: 0;
}
.widget-card :is(.appt-row__info, .master-load-info, .pending-info, .widget-row__main) {
  min-width: 0;
}
.widget-card :is(.appt-row__client, .master-load-name, .widget-row__preview) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-card .list-empty {
  margin-block: 0;
  padding: 0;
  align-self: flex-start;
}

/* Модалка настройки обзора */
.overview-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.overview-settings-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: grab;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.overview-settings-item:hover { border-color: var(--blue); }
.overview-settings-item.is-dragging { opacity: 0.5; cursor: grabbing; }
.overview-settings-item.drop-target { border-color: var(--lime); background: rgba(149,232,91,0.06); }
.overview-settings-grip {
  font-size: 18px;
  color: var(--text-muted);
  user-select: none;
  cursor: grab;
}
.overview-settings-info { flex: 1; min-width: 0; }
.overview-settings-size {
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--input-bg, rgba(0,0,0,0.2));
  color: var(--text);
  padding: 0 var(--sp-2);
  font-size: var(--text-xs);
  cursor: pointer;
}
.overview-settings-size:disabled { opacity: 0.4; cursor: not-allowed; }
.overview-settings-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.overview-settings-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--lime);
  cursor: pointer;
}

.overview-emoji-modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}
.overview-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  justify-items: center;
  gap: var(--sp-2);
  max-height: min(360px, 58vh);
  overflow: auto;
}
.overview-emoji-option {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--muted-strong);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.overview-emoji-option:hover,
.overview-emoji-option:focus-visible {
  border-color: var(--blue);
  color: var(--text);
  outline: none;
}
.overview-emoji-option.is-active {
  border-color: var(--blue);
  background: var(--blue-dim);
  color: var(--blue);
}
.overview-emoji-option__img {
  width: 26px;
  height: 26px;
}

/* ── APPOINTMENT LIST ────────────────────────────────────── */
.appt-list { display: flex; flex-direction: column; }
.appt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease);
  border-radius: var(--r-sm);
}
.appt-row:last-child { border-bottom: none; }
.appt-row:hover { background: rgba(149,184,227,0.04); }
.appt-row[data-action="open-appt"],
.pending-row[data-action="open-appt"],
.visit-row[data-action="open-appt"] {
  cursor: pointer;
}
.appt-row[data-action="open-appt"]:focus-visible,
.pending-row[data-action="open-appt"]:focus-visible,
.visit-row[data-action="open-appt"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.appt-row__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 82px;
  flex-shrink: 0;
}
.appt-row__hour { font-size: var(--text-md); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.appt-row__bar {
  width: 3px;
  height: 36px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.appt-bar--confirmed { background: var(--lime); }
.appt-bar--pending   { background: var(--gold); }
.appt-bar--cancelled { background: var(--red); }
.appt-bar--completed { background: var(--blue); }

.appt-row__info { flex: 1; min-width: 0; }
.appt-row__client { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-row__price { flex-shrink: 0; min-width: 60px; text-align: right; }

/* ── MASTER LOAD ─────────────────────────────────────────── */
.master-load-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.master-load-row { display: flex; align-items: center; gap: var(--sp-3); }
.master-load-info { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.master-load-name { line-height: 1.2; }
.progress-bar.grow { width: 100%; }

/* ── PENDING APPROVALS ───────────────────────────────────── */
.pending-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}
.pending-row:last-child { border-bottom: none; }
.pending-row[data-action="open-appt"]:hover { background: rgba(149,184,227,0.04); }
.pending-actions { display: flex; gap: var(--sp-2); }

/* ── CLIENT TABLE ────────────────────────────────────────── */
.table-wrap { padding: 0; overflow: hidden; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th {
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table__row:last-child td { border-bottom: none; }
.data-table__row:hover td { background: rgba(149,184,227,0.04); }
.data-table__row[data-action] {
  cursor: pointer;
}
.data-table__row[data-action]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.client-cell { display: flex; align-items: center; gap: var(--sp-3); }
.font-medium { font-weight: 600; }

.client-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.client-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.client-pagination__size {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.client-pagination__size .select-wrap {
  width: 88px;
}
.client-pagination__size .input {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}
.client-pagination__page {
  min-width: 56px;
  text-align: center;
}

.person-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.person-link:hover,
.person-link:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

/* ── SEARCH ──────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: var(--sp-3);
  color: var(--muted);
  pointer-events: none;
}
.search-input { padding-left: calc(var(--sp-3) + 20px); }

/* Point 9: align search input height with adjacent buttons */
.view-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.view-header__actions .search-wrap .input {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
}
.view-header__actions .btn--sm {
  height: 36px;
}

/* Clients view: 3-column header so the search field sits visually centered
   between the title (left) and action buttons (right). */
.view-header--clients {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 420px) 1fr;
  align-items: center;
  gap: var(--sp-4);
}
.view-header--clients > .heading-1 { justify-self: start; }
.view-header--clients > .view-header__search { justify-self: stretch; width: 100%; }
.view-header--clients > .view-header__search .input {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
}
.view-header--clients > .view-header__actions { justify-self: end; }

@media (max-width: 860px) {
  .view-header--clients {
    grid-template-columns: 1fr;
  }
  .view-header--clients > .heading-1,
  .view-header--clients > .view-header__search,
  .view-header--clients > .view-header__actions {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .client-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .client-pagination__controls {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* ── CLIENT DRAWER ───────────────────────────────────────── */
.client-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(480px, 100vw);
  height: 100vh;
  background: var(--bg-soft);
  border-left: 1px solid var(--line-strong);
  z-index: 300;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  box-shadow: -8px 0 48px rgba(0,0,0,0.4);
  animation: slideIn var(--dur-slow) var(--ease);
}
.client-drawer[hidden] { display: none !important; }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.client-drawer__header {
  display: flex;
  align-items: center;             /* крестик и плюсик по вертикали — посередине блока */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.client-drawer__identity {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1 1 220px;
  min-width: 0;
}
.client-drawer__identity > div { min-width: 0; }
#drawer-name,
#drawer-phone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#drawer-name {
  /* heading-1 (--text-2xl) визуально доминирует над всем блоком —
     уменьшаем до lg, оставляя жирность/трекинг heading-1. */
  font-size: var(--text-lg);
  line-height: 1.25;
}
.client-drawer__actions {
  display: flex;
  flex-direction: row;             /* крестик слева, плюсик справа */
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  margin-left: auto;
}
.client-drawer__actions #drawer-close,
.client-drawer__actions #drawer-new-appt,
.client-drawer__actions #drawer-delete-client {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
}

.client-drawer__profit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.client-drawer__profit-value {
  color: var(--lime);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

/* ── DRAWER: PROFILE EDITOR ──────────────────────────────── */
.drawer-profile { display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer-profile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.drawer-profile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-3);
}
.drawer-profile__channels-wrap,
.drawer-profile__notes-wrap,
.drawer-profile__custom-fields { grid-column: 1 / -1; }
.drawer-profile__custom-fields:not(:empty) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}
@media (max-width: 540px) {
  .drawer-profile__custom-fields:not(:empty) { grid-template-columns: 1fr; }
}
.drawer-profile__channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px 12px;
}
.drawer-profile__channels .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.drawer-profile__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}
@media (max-width: 540px) {
  .drawer-profile__grid { grid-template-columns: 1fr; }
}

/* ── VISIT HISTORY ───────────────────────────────────────── */
.visit-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.visit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.visit-row[data-action="open-appt"]:hover { border-color: rgba(149,184,227,0.28); background: rgba(149,184,227,0.04); }
.visit-row__date { flex-shrink: 0; white-space: nowrap; }
.visit-row__service { flex: 1 1 0; min-width: 0; }
.visit-row__master { flex-shrink: 0; white-space: nowrap; }
.visit-row__price { flex-shrink: 0; text-align: right; white-space: nowrap; }

/* ── ANALYTICS ─────────────────────────────────��─────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
#view-analytics .stat-card {
  overflow: hidden;
}
#view-analytics .stat-card--rolling {
  border-color: rgba(151, 232, 91, 0.34);
  box-shadow: 0 0 0 1px rgba(151, 232, 91, 0.08), 0 10px 28px rgba(0, 0, 0, 0.18);
}
#view-analytics .stat-card__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
#view-analytics .stat-card__value--rolling {
  display: inline-block;
  min-width: max-content;
  animation: analytics-slot-value var(--analytics-roll-duration, 0.82s) cubic-bezier(0.2, 0.8, 0.24, 1);
  will-change: transform, filter;
}
@keyframes analytics-slot-value {
  0% {
    transform: translateY(-5px);
    filter: blur(0.8px);
  }
  55% {
    transform: translateY(2px);
    filter: blur(0.35px);
  }
  100% {
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-analytics .stat-card--rolling {
    box-shadow: none;
  }
  #view-analytics .stat-card__value--rolling {
    animation: none;
  }
}
.top-services-widget {
  width: 50%;
  max-width: 50%;
  min-width: 0;
  align-self: flex-start;
}
.top-services-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.top-service-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Kanban requests */
/* ── Pipeline switcher (above bids list/kanban) ──────────────────── */
.pipeline-switcher {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 36px;
  padding: 3px;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-sizing: border-box;
  flex-wrap: wrap;
}
.pipeline-switcher[hidden] { display: none !important; }
.pipeline-chip {
  font-family: inherit;
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: calc(var(--r-md) - 4px);
  background: transparent;
  color: var(--muted-strong);
  border: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pipeline-chip:hover { color: var(--text); }
.pipeline-chip.is-active {
  background: var(--lime-dim);
  color: var(--lime);
}

/* ── Feedback forms management (in Settings) ─────────────────────── */
.feedback-forms-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.feedback-form-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.feedback-form-row__info { min-width: 0; flex: 1; }
.feedback-form-row__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  margin-bottom: 2px;
}
.feedback-form-row__url {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-soft);
  word-break: break-all;
}
.feedback-form-row__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Fields-editor inside the feedback form modal */
.feedback-fields-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.feedback-field-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto auto;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.feedback-field-row--readonly {
  grid-template-columns: 1fr auto auto;
}
.feedback-field-row__meta { min-width: 0; }
.feedback-field-row[data-locked="true"] { opacity: 0.92; }
.feedback-field-row__required {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .feedback-field-row,
  .feedback-field-row--readonly {
    grid-template-columns: 1fr auto;
  }
  .feedback-field-row--readonly > button { grid-column: 2; }
}

/* ── Pipelines management (in Settings) ──────────────────────────── */
.pipelines-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.pipeline-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.pipeline-row::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-left: calc(var(--sp-4) * -1 + var(--sp-2));
  border-radius: 50%;
  background: var(--text);
  opacity: 0.85;
}
.pipeline-row__info { min-width: 0; flex: 1; }
.pipeline-row__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
}
.pipeline-row__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.kanban-board {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  margin-inline: calc(var(--sp-6) * -1);
}
.kanban-board[hidden] { display: none !important; }
.kanban-board__viewport {
  min-width: 0;
  overflow-x: auto;
  padding: 4px var(--sp-6) var(--sp-2);
  cursor: grab;
  user-select: none;
  overscroll-behavior-x: contain;
}
.kanban-board__viewport.is-panning {
  cursor: grabbing;
}
.kanban-board__viewport.is-panning .kanban-board__columns {
  pointer-events: none;
}

/* ── Kanban rulet (mini scrollbar) ───────────────────────── */
.kanban-rulet {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  user-select: none;
  touch-action: none;
  z-index: 90;
  backdrop-filter: blur(6px);
}
.kanban-rulet[hidden] { display: none !important; }
.kanban-rulet__track {
  position: relative;
  width: clamp(160px, 28vw, 320px);
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.kanban-rulet__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  pointer-events: none;
}
.kanban-rulet__tick {
  flex: 1 1 0;
  height: 14px;
  background: var(--line);
  border-radius: 2px;
  transition: background 0.15s ease, height 0.15s ease;
}
.kanban-rulet__tick.is-active {
  background: var(--lime);
  height: 18px;
}
.kanban-rulet__thumb {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  min-width: 20px;
  background: color-mix(in srgb, var(--lime) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent);
  border-radius: 10px;
  pointer-events: none;
  transition: background 0.12s ease;
}
.kanban-rulet.is-dragging .kanban-rulet__track { cursor: grabbing; }
.kanban-rulet.is-dragging .kanban-rulet__thumb {
  background: color-mix(in srgb, var(--lime) 28%, transparent);
}
.kanban-board__columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--sp-4);
  min-height: 520px;
}
.kanban-column {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kanban-column__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.kanban-column__dot,
.status-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.kanban-column__dot {
  background: var(--status-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-color) 18%, transparent);
}
.kanban-column__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700;
}
.kanban-column__dropzone {
  flex: 1;
  min-height: 420px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.kanban-column__dropzone.is-over {
  background: var(--blue-dim);
}
.kanban-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: grab;
  box-shadow: var(--shadow-sm);
  user-select: text;
  /* Карточки вне видимой области не считаются/не рисуются браузером, пока не
     попадут в окно прокрутки. На длинных колонках это резко снижает стоимость
     раскладки и перерисовки на слабых машинах. contain-intrinsic-size задаёт
     запасную высоту, чтобы скроллбар не «прыгал». */
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
}
.kanban-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.kanban-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
}
.kanban-card__meta {
  color: var(--muted);
  font-size: var(--text-xs);
}
.kanban-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.kanban-card__person {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}
.kanban-card__person:hover .kanban-card__name { text-decoration: underline; }
.kanban-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card__phone {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card__avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-elevated, var(--bg-surface, var(--bg-raised)));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--muted);
}
.kanban-card__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.kanban-card__avatar-initials {
  z-index: 0;
}
.kanban-card__master-row {
  min-width: 0;
  margin-bottom: calc(var(--sp-1) * -1);
}
.kanban-card__master {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}
.kanban-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 0;
}
.kanban-card__footer > span:first-child,
.kanban-card__master {
  min-width: 0;
}
.kanban-card__number {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.kanban-card__status-age {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(151, 232, 91, 0.42);
  border-radius: var(--r-sm);
  background: rgba(151, 232, 91, 0.14);
  color: var(--lime);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(151, 232, 91, 0.08);
}
.kanban-empty {
  padding: var(--sp-4);
  text-align: center;
}

/* ── KANBAN CONTEXT MENU ─────────────────────────────────── */
.kanban-ctx-menu {
  position: fixed;
  z-index: 500;
  min-width: 160px;
  padding: var(--sp-1, 4px);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.3;
}
.kanban-ctx-menu[hidden] { display: none; }
.kanban-ctx-menu__item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--r-sm, 6px);
  color: var(--text, inherit);
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-ctx-menu__icon {
  flex-shrink: 0;
  opacity: 0.75;
}
.kanban-ctx-menu__item:hover .kanban-ctx-menu__icon,
.kanban-ctx-menu__item:focus-visible .kanban-ctx-menu__icon { opacity: 1; }
.kanban-ctx-menu__item:hover,
.kanban-ctx-menu__item:focus-visible {
  background: var(--bg-elevated, rgba(255,255,255,0.06));
  outline: none;
}
.kanban-ctx-menu__item--danger { color: var(--danger, #ef4444); }
.kanban-ctx-menu__item--danger:hover,
.kanban-ctx-menu__item--danger:focus-visible {
  background: rgba(239, 68, 68, 0.12);
}

/* ── CHAT LAYOUT ─────────────────────────────────────────── */
.chat-layout {
  display: flex;
  height: calc(100vh - 65px);
  overflow: hidden;
  flex: 1;
}
.chat-sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-sidebar__header {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted-strong);
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chat-tab svg { flex-shrink: 0; margin: 0 !important; }
.chat-tab:hover { color: var(--text); border-color: var(--line); }
.chat-tab.is-active {
  background: var(--blue-dim);
  border-color: rgba(101,207,255,0.3);
  color: var(--blue);
}

.convo-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
.convo-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  outline: none;
  /* Without min-width:0 the flex children refuse to shrink below their
     intrinsic content width, causing long client names to push the row
     wider than .chat-sidebar and produce a horizontal scrollbar. */
  min-width: 0;
}
.convo-item:hover, .convo-item:focus-visible { background: rgba(149,184,227,0.06); }
.convo-item.is-active { background: var(--blue-dim); border-left: 3px solid var(--blue); }
.convo-item.is-unread { background: rgba(149,184,227,0.14); border-left: 3px solid var(--accent, #95b8e3); }
.convo-item.is-unread .convo-name { font-weight: 700; }
.convo-item.is-unread.is-active { background: var(--blue-dim); border-left-color: var(--blue); }
/* Muted chats render with dimmed text so the row reads as deprioritized
   without losing legibility. The corner channel badge stays full-opacity. */
.convo-item.is-muted .convo-name,
.convo-item.is-muted .convo-preview { color: var(--muted-strong); }

/* Body column: must shrink, must clip. .convo-item__row caps width to the
   parent so the timestamp doesn't get pushed off-screen by a long name. */
.convo-item__avatar-wrap { flex-shrink: 0; }
.convo-item__body { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.convo-item__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.convo-item__row--preview { margin-top: 2px; }
.convo-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.convo-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.convo-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.convo-item__meta .convo-mute { color: var(--muted-strong); flex-shrink: 0; }
.convo-unread-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  padding: 0 4px;
}
/* Muted chats keep their per-chat unread pill but it goes neutral grey so
   it doesn't compete with un-muted alerts for attention. */
.convo-unread-badge--muted { background: var(--muted-strong); color: var(--card); }

/* Channel badge overlay on convo-list avatars — same anchoring as the
   .avatar-with-badge rule in the chat header so the two views match. */
.convo-item .avatar-with-badge .channel-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 2px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.convo-item .avatar-with-badge .channel-badge svg {
  width: 12px;
  height: 12px;
  margin: 0 !important;
  flex-shrink: 0;
}
.convo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  flex-shrink: 0;
}

/* ── CHAT WINDOW ─────────────────────────────────────────── */
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.chat-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-window__client { display: flex; align-items: center; gap: var(--sp-3); }
.chat-window__person {
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
  padding: 2px 4px;
  margin: -2px -4px;               /* визуально компенсируем паддинг */
  transition: background var(--dur-fast) var(--ease);
}
.chat-window__person:hover,
.chat-window__person:focus-visible {
  background: var(--bg-elevated, rgba(255,255,255,0.05));
  outline: none;
}
.chat-window__person:hover #chat-client-name { text-decoration: underline; }
.avatar-with-badge { position: relative; flex-shrink: 0; }
.avatar-with-badge .channel-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 2px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.avatar-with-badge .channel-badge svg {
  width: 14px;
  height: 14px;
  margin: 0 !important;
  flex-shrink: 0;
}
.chat-window__actions { display: flex; gap: var(--sp-2); }

/* Header avatar opens the profile photo in the media preview modal.
   Only the <img> overlay gets the pointer cursor — the initials fallback
   stays non-interactive since there's nothing to enlarge. */
.chat-client-avatar__img { cursor: zoom-in; transition: transform .12s ease-out; }
.chat-client-avatar__img:hover { transform: scale(1.04); }

.telegram-profile-modal { width: min(520px, calc(100vw - 32px)); }
.telegram-profile { gap: var(--sp-4); }
.telegram-profile__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.telegram-profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--blue-dim);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.telegram-profile__avatar > span,
.telegram-profile__avatar img { grid-area: 1 / 1; }
.telegram-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.telegram-profile__identity { min-width: 0; }
.telegram-profile__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.telegram-profile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.telegram-profile__badge {
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--muted-strong);
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
}
.telegram-profile__grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.telegram-profile__key,
.telegram-profile__value {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.telegram-profile__key {
  color: var(--muted);
  background: var(--bg-raised);
}
.telegram-profile__value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.telegram-profile__key:nth-last-child(2),
.telegram-profile__value:last-child {
  border-bottom: 0;
}
.telegram-profile__empty {
  color: var(--muted);
  padding: var(--sp-3) 0;
}
.telegram-profile-modal #tg-profile-footer {
  padding: 0 var(--sp-6) var(--sp-6);
}

.team-member-card-modal { width: min(520px, calc(100vw - 32px)); }
.team-member-card {
  gap: var(--sp-4);
}
.team-member-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.team-member-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--blue-dim);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.team-member-card__identity { min-width: 0; }
.team-member-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-member-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-member-card__grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.team-member-card__key,
.team-member-card__value {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.team-member-card__key {
  color: var(--muted);
  background: var(--bg-raised);
}
.team-member-card__value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.team-member-card__key:nth-last-child(2),
.team-member-card__value:last-child {
  border-bottom: 0;
}
.team-member-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: 0 var(--sp-6) var(--sp-6);
}
.team-member-card__empty {
  color: var(--muted);
  padding: var(--sp-3) 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Warning shown when the open chat belongs to a previously linked TG account. */
.chat-foreign-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(217, 164, 65, 0.12);
  border-bottom: 1px solid rgba(217, 164, 65, 0.35);
  color: var(--color-gold, #b8860b);
  font-size: 0.82rem;
  line-height: 1.35;
}
.chat-foreign-warning svg { flex: 0 0 auto; margin-top: 1px; }
.convo-foreign-badge {
  margin-left: var(--sp-1);
  font-size: 0.62rem;
  padding: 1px 5px;
  vertical-align: middle;
  flex: 0 0 auto;
}

.chat-date-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  color: var(--muted);
  align-self: stretch;
  margin: 2px 0;
}
.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.chat-date-divider > span {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.chat-msg { display: flex; align-items: flex-end; gap: var(--sp-2); max-width: 75%; }
.chat-msg--in  { align-self: flex-start; }
.chat-msg--out { align-self: flex-end; flex-direction: row-reverse; }

.chat-msg__bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  position: relative;
}
.chat-msg__bubble--text {
  display: block;
}
.chat-msg--in .chat-msg__bubble {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-xs);
}
.chat-msg--out .chat-msg__bubble {
  background: var(--blue-dim);
  border: 1px solid rgba(101,207,255,0.25);
  border-bottom-right-radius: var(--r-xs);
}
.chat-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}
.chat-voice svg {
  flex-shrink: 0;
  color: var(--blue);
}
.chat-voice audio {
  max-width: 240px;
}
.chat-msg__time {
  align-self: flex-end;
  opacity: 0.6;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-msg__bubble--text .chat-msg__time {
  float: right;
  margin: 4px 0 -1px 10px;
  line-height: 1;
  transform: translateY(2px);
}
.chat-msg__ticks { display: inline-flex; align-items: center; }
.chat-msg__ticks--double { gap: 2px; }
.chat-msg__ticks--double svg + svg { margin-left: 1px; }
/* Sent (single tick) inherits the muted time color. Read flips to the
   accent so the user immediately spots which messages were seen. */
.chat-msg__ticks--read { color: var(--blue); opacity: 1; }

.chat-msg--system {
  align-self: center;
  max-width: 100%;
  background: var(--lime-dim);
  border: 1px solid rgba(151,232,91,0.2);
  color: var(--lime);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-full);
}

/* ── Linkified content in message text ────────────────────────────
   Links and contact chips inherit the bubble font so they don't disturb
   line height. Distinct colors keep URLs vs. tappable contacts visually
   separable; both stay legible in incoming and outgoing bubbles. */
.chat-msg .msg-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.chat-msg .msg-link:hover { color: var(--blue); filter: brightness(1.15); }
.chat-msg--out .msg-link { color: var(--blue); }

.chat-msg .msg-contact {
  color: var(--lime, #2e7d32);
  background: rgba(151, 232, 91, 0.12);
  border-radius: var(--r-xs, 4px);
  padding: 0 4px;
  cursor: pointer;
  user-select: text;
  transition: background var(--dur-fast) var(--ease);
  outline: none;
}
.chat-msg .msg-contact:hover,
.chat-msg .msg-contact:focus-visible { background: rgba(151, 232, 91, 0.24); }
.chat-msg--out .msg-contact { background: rgba(151, 232, 91, 0.18); }

/* ── Reply quote inside a bubble ──────────────────────────────────
   Sits flush against the left edge with an accent bar so the eye reads
   the reply as a quoted excerpt above the message body. */
.chat-msg__reply {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: rgba(101, 207, 255, 0.08);
  border-left: 3px solid var(--blue);
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: var(--r-xs, 4px);
  cursor: pointer;
  color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.chat-msg__reply:hover { background: rgba(101, 207, 255, 0.16); }
.chat-msg__reply-author {
  display: block;
  color: var(--blue);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
}
.chat-msg__reply-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 1px;
}

/* Briefly pulse the target bubble after scroll-to-quote so it's findable
   in a long thread without forcing the user to re-scan from the top. */
.chat-msg.is-highlight .chat-msg__bubble {
  animation: chat-msg-flash 1.2s ease-out;
}
@keyframes chat-msg-flash {
  0%, 60% { box-shadow: 0 0 0 3px rgba(101, 207, 255, 0.55); }
  100%    { box-shadow: 0 0 0 0   rgba(101, 207, 255, 0); }
}

/* ── Reply-draft banner above the composer ────────────────────── */
.chat-reply-draft {
  border-top: 1px solid var(--line);
  padding: 8px 16px;
  background: var(--bg-raised);
}
.chat-reply-draft[hidden] { display: none; }
.chat-reply-draft__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 3px solid var(--blue);
  padding-left: 8px;
}
.chat-reply-draft__bar > svg { color: var(--blue); flex-shrink: 0; }
.chat-reply-draft__body { flex: 1 1 auto; min-width: 0; }
.chat-reply-draft__preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-draft__close {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--muted-strong);
  padding: 4px;
  border-radius: var(--r-xs, 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-reply-draft__close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* ── Generic floating context-menu chrome ─────────────────────────
   Used by the chat-row menu, per-message menu, and contact menu so they
   all look like the same surface. */
.chat-ctx-menu {
  /* Use --bg-raised — the project's elevated-surface token. --card and
     --surface don't exist in themes.css, so naming either of them resolves
     to the empty string and the menu paints transparent over the chat. */
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
  padding: 4px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm, 14px);
}
.chat-ctx-menu__item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur-fast) var(--ease);
}
.chat-ctx-menu__item[disabled] { cursor: not-allowed; opacity: 0.5; }
/* `--line` is a theme-aware translucent stroke that reads correctly on both
   light and dark surfaces, unlike a hard-coded rgba(0,0,0,...) which
   disappears on dark themes. */
.chat-ctx-menu__item:not([disabled]):hover { background: var(--line); }
.chat-ctx-menu__item--danger { color: var(--red, #c0392b); }
.chat-ctx-menu__item--danger:not([disabled]):hover { background: rgba(192,57,43,0.12); }
.chat-ctx-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}
.chat-ctx-menu__icon svg { width: 14px; height: 14px; }

.chat-templates {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  overflow-x: auto;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-templates[hidden] { display: none !important; }
.chat-template-btn { flex-shrink: 0; font-size: var(--text-xs) !important; }

.chat-composer {
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.chat-attachments {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-5) 0;
}

.chat-attachments[hidden] { display: none; }

.chat-attachment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--sp-2);
  min-width: 220px;
  max-width: 300px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.chat-attachment__thumb {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-strong);
  overflow: hidden;
}

.chat-attachment__thumb img,
.chat-attachment__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-attachment__body { min-width: 0; }
.chat-attachment__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 600;
}
.chat-attachment__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.chat-attachment__type {
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
}
.chat-attachment.is-uploading { opacity: 0.72; }
.chat-attachment.is-error { border-color: rgba(255,91,91,0.45); }
.chat-attachment__remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--r-sm);
}

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.chat-media-preview { cursor: zoom-in; }
.chat-input {
  flex: 1;
  resize: none;
  /* Match the 38px square send/attach buttons in the resting (single-line)
     state. Auto-grow JS bumps height up to max-height as the user types or
     hits shift+enter. */
  min-height: 38px;
  height: 38px;
  max-height: 120px;
  line-height: 1.4;
  border-radius: var(--r-lg) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  overflow-y: hidden;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.chat-attach-btn { color: var(--muted-strong); }
/* WebKit/Blink: a slim themed scrollbar instead of the default chunky one */
.chat-input::-webkit-scrollbar { width: 6px; }
.chat-input::-webkit-scrollbar-track { background: transparent; }
.chat-input::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}
.chat-input::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.media-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(8, 12, 18, 0.72);
  backdrop-filter: blur(18px);
}
.media-preview-modal[hidden] { display: none; }
.media-preview__stage {
  max-width: min(94vw, 1280px);
  max-height: 88vh;
  display: grid;
  place-items: center;
}
.media-preview__stage img,
.media-preview__stage video {
  max-width: min(94vw, 1280px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s ease;
}
.media-preview__actions {
  position: fixed;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: var(--sp-2);
}
.media-preview__close {
  position: fixed;
  top: 24px;
  right: 24px;
}
.media-preview__action,
.media-preview__close {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: rgba(18, 24, 32, 0.82);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.media-preview__action:hover,
.media-preview__close:hover { background: rgba(28, 36, 48, 0.94); }

/* ── MOBILE OVERLAY ──────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 190;
}
.sidebar-overlay.is-active { display: block; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .metrics-grid    { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  /* На узких экранах теряет смысл точное позиционирование в 12-колоночной
     сетке: схлопываем в один поток, каждый виджет — на всю ширину,
     фиксированной высоты в две строки. Drag/resize отключаются. */
  .overview-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(160px, auto);
    min-height: 0;
    background-image: none !important;
  }
  .widget-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    cursor: default;
  }
  .widget-resize { display: none; }
  .biz-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-services-widget { width: 100%; max-width: 100%; }
}

.sidebar-mobile-toggle { display: none; }

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto;
    min-height: 65px;
    padding-block: var(--sp-2);
  }
  .topbar__left { grid-column: 1 / 3; }
  .topbar__right { grid-column: 3; }
  .topbar__center {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
  }
  .sidebar.is-mobile-open { transform: translateX(0); }
  .dash-body { flex-direction: column; }
  .chat-sidebar { width: 260px; }
  .sidebar-mobile-toggle { display: inline-flex; }
}

@media (max-width: 700px) {
  .metrics-grid  { grid-template-columns: 1fr 1fr; }
  .analytics-grid { grid-template-columns: 1fr 1fr; }
  .overview-right { grid-template-columns: 1fr; }
  .chat-layout { flex-direction: column; height: auto; }
  .chat-sidebar { width: 100%; max-height: 200px; }
  .chat-window { height: calc(100vh - 265px); }
  .topbar { padding-inline: var(--sp-4); }
  .dash-view__inner { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
  .org-onboarding__content,
  .org-context { align-items: flex-start; flex-direction: column; }
  .org-context__meta { justify-content: flex-start; }
  .modal__row,
  .requisites-grid,
  .biz-profile-grid,
  .settings-form-grid { grid-template-columns: 1fr; }
  .modal--wide { width: min(560px, calc(100vw - 24px)); }
  .modal--split { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .modal__split-wrap { flex-direction: column; }
  .modal--split .modal__split-right,
  .modal__split-right { width: 100%; flex-basis: auto; border-left: none; border-top: 1px solid var(--line); max-height: 260px; }
  .settings-form-grid__actions { justify-content: stretch; }
  .settings-form-grid__actions .btn { width: 100%; }
  .table-actions { justify-content: flex-start; }
  .requests-list-title,
  .requests-list-controls,
  .requests-list-control { width: 100%; }
  .requests-list-controls { justify-content: stretch; }
  .view-toggle { width: 100%; }
  .view-toggle__btn { flex: 1; }
  .kanban-board { margin-inline: calc(var(--sp-4) * -1); }
  .kanban-board__viewport { padding-inline: var(--sp-4); }
  .kanban-board__columns { grid-auto-columns: minmax(260px, 86vw); }
  .kanban-rulet { right: var(--sp-4); bottom: var(--sp-4); }
}

@media (max-width: 480px) {
  .topbar { gap: var(--sp-3); }
  .topbar__breadcrumb { display: none; }
  #new-appointment-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 0;
  }
  #new-appointment-btn svg {
    width: 16px;
    height: 16px;
  }
  .metrics-grid { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
}

/* ── MODAL ───────────────────────────────────────────────── */
dialog.modal { border: none; outline: none; }
dialog.modal::backdrop { background: transparent; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 450;
  /* backdrop-filter снят: при открытой модалке редактирования заявки
     blur(4px) форсил повторную растеризацию blur-региона на весь viewport
     при каждом hover внутри модалки (карточки, поля, кнопки) — что
     визуально проявлялось как «тугая» анимация наведения. Полупрозрачный
     фон достаточно затемняет страницу позади. */
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  z-index: 500;
  padding: 0;
  overflow: hidden;
}
.modal--wide {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}
.modal[open], .modal:not([hidden]) { display: flex; flex-direction: column; }
.modal:not([open]):not(.modal--force-show) { display: none; }
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  overflow-y: auto;
}
.modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.modal__row > * { min-width: 0; }
.modal__row input[type="datetime-local"] { width: 100%; min-width: 0; box-sizing: border-box; }
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}
/* ── Split modal (edit appointment) ─────────────────────────── */
.modal--split {
  width: min(1400px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}
.modal__split-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.modal__split-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.modal--split .modal__split-form {
  flex: 1 1 45%;
  min-width: 0;
}
.modal__split-form__fields {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.modal__split-form .modal__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  padding-top: var(--sp-4);
  flex-wrap: wrap;                 /* в узких колонках кнопки не вылазят, а переносятся */
}
.modal__split-form .modal__footer .btn { min-width: 0; }

/* ── Appointment modal tabs ─────────────────────────────────────── */
.appt-form-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 var(--sp-6);
  gap: var(--sp-1);
}
.appt-form-tab {
  position: relative;
  padding: var(--sp-3) var(--sp-1);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.appt-form-tab:hover { color: var(--text); }
.appt-form-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.appt-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
}

.modal__split-right {
  width: 360px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-strong);
}
.modal--split .modal__split-right {
  flex: 1 1 30%;
  width: auto;
  min-width: 0;
  overflow: hidden;                /* клипим скругление правого-нижнего угла модалки */
  border-bottom-right-radius: var(--r-lg, 12px);
}

/* ── Client profile card (far-left in appointment modal) ───── */
.modal__split-client {
  flex: 1 1 25%;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--panel-strong);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;                /* модалка скруглена снизу-слева — клиппим */
  border-bottom-left-radius: var(--r-lg, 12px);
}
.modal__split-client[hidden] { display: none; }
.appt-client-card__head { flex-shrink: 0; }
.appt-client-card__footer { flex-shrink: 0; }
.appt-client-card__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.appt-client-card__avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bg-elevated, var(--bg-raised));
  border: 1px solid var(--line-strong, var(--line));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 28px;
  font-weight: 600;
  color: var(--muted);
}
.appt-client-card__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.appt-client-card__name-wrap { width: 100%; }
.appt-client-card__name-wrap .input {
  text-align: center;
  font-weight: 600;
}
/* Иконка-кнопка поиска в соцсетях — в левом верхнем углу шапки. */
.appt-client-card__socials-btn {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}
/* Telegram-блок: живёт в body, поэтому горизонтальный padding наследуется. */
.appt-client-card__tg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--blue-dim);
}
.appt-client-card__tg[hidden] { display: none; }
.client-drawer__tg { margin: var(--sp-2) 0; }
.appt-client-card__tg-icon { color: var(--blue); flex: none; }
.appt-client-card__tg-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-input-action {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.phone-input-action .input {
  flex: 1;
  min-width: 0;
}
.phone-input-action .btn--icon {
  align-self: stretch;
  aspect-ratio: auto;
  flex: 0 0 auto;
  height: auto;
  width: auto;
  padding: 0 var(--sp-4);
}
.appt-client-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;                /* скроллится только тело — head/footer закреплены */
}
.appt-client-card__channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.appt-client-card__channels .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.appt-client-card__stats {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}
.appt-client-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 17px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
/* ── Средние экраны (769–1284 px) ───────────────────────────────
   Активити-панель не помещается рядом — кладём её во вторую строку
   на всю ширину. Сам split-wrap становится скроллируемым, чтобы
   высокие колонки не выезжали за модалку. */
@media (max-width: 1284px) and (min-width: 769px) {
  .modal--split { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .modal--split .modal__split-wrap {
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: flex-start;
  }
  .modal--split .modal__split-client {
    flex: 0 0 38%;
    min-height: 360px;
    border-bottom-left-radius: 0;
  }
  .modal--split .modal__split-form {
    flex: 1 1 62%;
    min-height: 360px;
  }
  .modal--split .modal__split-right {
    flex: 1 0 100%;
    width: 100%;
    min-height: 240px;
    max-height: 320px;
    border-left: none;
    border-top: 1px solid var(--line);
    border-bottom-left-radius: var(--r-lg, 12px);
    border-bottom-right-radius: var(--r-lg, 12px);
  }
}

/* ── Мобильные (≤768 px) ────────────────────────────────────────
   Модалка во весь экран, всё стекается колонками, страница скроллится
   целиком: внутренние overflow-контейнеры снимаются, чтобы не появлялось
   двойного скролла. */
@media (max-width: 768px) {
  .modal--split {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }
  .modal--split .modal__split-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
  }
  .modal--split .modal__split-client,
  .modal--split .modal__split-form,
  .modal--split .modal__split-right {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    border-right: none;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    overflow: visible;
  }
  .modal--split .modal__split-client { border-top: none; }
  .modal--split .modal__split-client .appt-client-card__body,
  .modal--split .modal__split-form .modal__split-form__fields,
  .modal--split .modal__split-right .activity-log {
    overflow: visible;
    max-height: none;
  }
  .modal__split-form .modal__footer {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-2);
  }
  .modal__split-form .modal__footer .btn { flex: 1 1 auto; }
  /* На мобильном аватар-блок ужимаем, чтобы заголовок ФИО не съел экран */
  .appt-client-card__head { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
  .appt-client-card__avatar { width: 64px; height: 64px; font-size: 22px; }
  /* Способы связи — в один столбец, чтобы лейблы не обрезались */
  .appt-client-card__channels { grid-template-columns: 1fr 1fr; }
}

/* ── Activity log ────────────────────────────────────────────── */
.activity-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
}
.activity-log__empty {
  text-align: center;
  padding: var(--sp-4) 0;
}
.activity-date-header {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  padding: var(--sp-1) 0;
  position: sticky;
  top: 0;
  background: var(--panel-strong);
  z-index: 1;
}
.activity-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-entry__meta {
  font-size: var(--text-xs);
  color: var(--muted);
}
.activity-entry__body {
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: break-word;
}
.activity-entry--change .activity-entry__body {
  color: var(--text-secondary);
}
.activity-entry--system .activity-entry__body {
  color: var(--muted);
  font-style: italic;
}
.activity-entry--comment .activity-entry__body {
  color: var(--text);
  white-space: pre-wrap;
}
.activity-entry--recording {
  gap: var(--sp-2);
}
.activity-entry--recording .activity-entry__body {
  color: var(--text);
}
.call-recording-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.call-recording-card.is-error {
  border-color: var(--red);
  background: var(--red-dim);
}
.call-recording-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.call-recording-card__title {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.call-recording-card__meta {
  color: var(--muted);
  font-size: var(--text-xs);
}
.call-recording-card__audio {
  display: block;
  width: 100%;
  height: 36px;
}
.call-recording-card__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.call-recording-card__speeds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  min-width: 0;
}
.call-recording-speed {
  min-width: 0;
  height: 30px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-strong);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 700;
}
.call-recording-speed:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.call-recording-speed.is-active {
  border-color: var(--blue);
  background: var(--blue-dim);
  color: var(--blue);
}
.call-recording-transcribe {
  flex: 0 0 auto;
  min-width: 42px;
  height: 30px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-strong);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}
.call-recording-transcribe:hover {
  border-color: var(--lime);
  color: var(--lime);
}
.call-recording-transcribe.is-ready {
  border-color: var(--lime);
  background: var(--lime-dim);
  color: var(--lime);
}
.call-recording-transcribe:disabled {
  cursor: wait;
  opacity: 0.7;
}
.call-recording-card__transcript {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-strong);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
}
.call-recording-card__transcript.is-hidden {
  display: none;
}
.activity-mention {
  color: var(--blue);
  font-weight: 500;
}
.activity-mention--link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.activity-mention--link:hover {
  color: var(--lime);
}
.activity-compose {
  padding: 11.5px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
  flex-shrink: 0;
}
.activity-compose__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: end;
  gap: var(--sp-2);
}
.activity-compose__row--with-mode {
  grid-template-columns: 130px minmax(0, 1fr) 42px;
}
.activity-compose__mode-wrap {
  width: 100%;
}
.activity-compose__mode-wrap .custom-select__button {
  height: 42px;
  min-height: 42px;
  font-size: var(--text-xs);
  padding: 0 6px 0 10px;
  gap: 4px;
}
.activity-compose__mode-wrap .custom-select__value {
  font-size: var(--text-xs);
}
.activity-compose__mode-wrap .custom-select__chevron {
  width: 20px;
  height: 20px;
  background: transparent;
}
/* Открываем меню вверх — composer прикреплён к низу карточки сделки,
   и стандартное раскрытие вниз вылезает за пределы модалки. */
.activity-compose__mode-wrap .custom-select__menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.activity-compose__mode-wrap .custom-select__option {
  font-size: var(--text-xs);
  min-height: 30px;
  padding: 4px 10px;
}
.activity-compose__input {
  resize: none;
  /* 42px — высота .btn в .modal__footer (padding 13px×2 + line-height 16px).
     Согласуем три элемента строки (селектор режима, textarea, кнопка
     отправки) и сравняем низ activity-панели с низом формы заявки. */
  height: 42px;
  min-height: 42px;
  max-height: 218px;
  padding: 10px 12px;
  font-size: var(--text-sm);
  line-height: 20px;
  overflow-y: hidden;
}
.activity-compose__send {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--r-md);
}
.activity-compose__send:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.55;
  transform: none;
}
.activity-mention-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: var(--sp-4);
  right: var(--sp-4);
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  z-index: 10;
  overflow: hidden;
}
.activity-mention-item {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
  transition: background 0.1s;
}
.activity-mention-item:hover { background: var(--hover); }

.form-section-title {
  padding-top: var(--sp-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.requisites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.requisites-grid__wide { grid-column: 1 / -1; }
.biz-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.biz-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-1) var(--sp-3);
  min-height: 104px;
  padding: var(--sp-4);
  text-align: left;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.biz-card:hover {
  border-color: var(--blue);
  background: var(--blue-dim);
}
.biz-card.is-active {
  border-color: var(--lime);
  background: var(--lime-dim);
}
.biz-card__emoji {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  font-size: 1.35rem;
}
.biz-card__name { font-weight: 700; align-self: end; }
.biz-card__desc { line-height: 1.35; }
.biz-card__check {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--lime);
  font-weight: 800;
  opacity: 0;
}
.biz-card.is-active .biz-card__check { opacity: 1; }

/* ── SETTINGS TOGGLES ────────────────────────────────────── */
.settings-toggles { display: flex; flex-direction: column; }
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-info { flex: 1; }
.settings-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}
.settings-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--muted-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.settings-tab:hover {
  color: var(--text);
  border-color: var(--line);
}
.settings-tab.is-active {
  color: var(--lime);
  background: var(--lime-dim);
  border-color: rgba(151,232,91,0.25);
}
.settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.settings-panel[hidden] { display: none !important; }
.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.settings-form-grid__wide,
.settings-form-grid__actions {
  grid-column: 1 / -1;
}
.settings-form-grid__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.quick-reply-vars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 260px;
  overflow: auto;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}
.quick-reply-vars__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.quick-reply-vars__title {
  text-transform: uppercase;
  letter-spacing: .08em;
}
.quick-reply-vars__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.quick-reply-var-chip {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
.settings-table-header {
  padding: var(--sp-5) var(--sp-5) 0;
}
.table-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.status-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.deleted-statuses-widget {
  margin-top: var(--sp-4);
}
.deleted-statuses-header {
  align-items: flex-start;
}
.status-row--deleted td {
  background: color-mix(in srgb, var(--panel) 94%, var(--muted) 6%);
}
.status-row--deleted .status-swatch {
  opacity: .55;
}
.client-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.client-row-action {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-md);
  flex: 0 0 36px;
}
.settings-toggle-row--inline {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch__track {
  width: 40px;
  height: 22px;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-base) var(--ease);
  position: relative;
}
.toggle-switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--text-soft);
  border-radius: var(--r-full);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.toggle-switch input:checked + .toggle-switch__track { background: var(--lime-dim); border: 1px solid rgba(151,232,91,0.4); }
.toggle-switch input:checked + .toggle-switch__track::after {
  transform: translateX(18px);
  background: var(--lime);
}

/* ── THEME GRID (inline in settings view) ────────────────── */
.theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  position: relative;
  min-width: 80px;
}
.theme-card:hover { border-color: var(--blue); background: var(--blue-dim); }
.theme-card.is-active { border-color: var(--lime); background: var(--lime-dim); }
.theme-card__check {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 10px;
  color: var(--lime);
  opacity: 0;
  font-weight: 700;
}
.theme-card.is-active .theme-card__check { opacity: 1; }
.theme-card__emoji { font-size: 1.2rem; line-height: 1; }
.theme-card__swatches { display: flex; gap: 3px; }
.theme-card__swatch { width: 12px; height: 12px; border-radius: var(--r-full); }
.theme-card__name { font-size: var(--text-xs); font-weight: 600; color: var(--text-soft); white-space: nowrap; }

/* ── NOTIFICATION DROPDOWN ───────────────────────────────── */
.notif-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  width: 320px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 400;
  overflow: hidden;
}
.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.notif-dropdown__empty {
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.notif-dropdown__list {
  max-height: 360px;
  overflow-y: auto;
}
.notif-item {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.notif-item:hover {
  background: var(--hover);
}
.notif-item.is-unread {
  background: var(--blue-dim);
}
.notif-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
}
.notif-item__body {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item__time {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ── CHAT EMPTY STATE ────────────────────────────────────── */
.chat-window__empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--muted);
  padding: var(--sp-8);
}
.chat-window__active {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   SHIFTS MODULE
   ══════════════════════════════════════════════════════════════ */

/* ── Calendar header ─────────────────────────────────────────── */
.shifts-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.shifts-cal-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.shifts-cal-nav .heading-2 { min-width: 180px; text-align: center; }

/* Select in toolbar must match btn--sm height (9px padding, text-sm) */
.shifts-cal-header .select-wrap .select-input {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: var(--text-sm);
}

/* ── Weekday row ─────────────────────────────────────────────── */
.shifts-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}
.shifts-weekdays > div {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}
.shifts-weekdays > div:nth-child(6),
.shifts-weekdays > div:nth-child(7) { color: var(--muted); }

/* ── Calendar grid ───────────────────────────────────────────── */
.shifts-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.shifts-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2);
  min-height: 100px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.shifts-cell:nth-child(7n) { border-right: none; }
.shifts-cell:hover { background: var(--panel); }
.shifts-cell--other-month { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.shifts-cell--other-month .shifts-cell__day { color: var(--muted); }
.shifts-cell--today .shifts-cell__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--lime);
  color: #000;
  border-radius: 50%;
  font-weight: 700;
}
.shifts-cell__day {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1;
  margin-bottom: var(--sp-1);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shifts-cell__badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ── Shift badge ─────────────────────────────────────────────── */
.shift-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  border: none;
  background: var(--shift-bg, var(--panel));
  color: var(--shift-text, var(--text-soft));
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-width: 0;
  transition: filter var(--dur-fast) var(--ease);
  white-space: nowrap;
  overflow: hidden;
}
.shift-badge:hover { filter: brightness(1.15); }
.shift-badge--completed { opacity: .7; }
.shift-badge--cancelled {
  opacity: .45;
  text-decoration: line-through;
}
.shift-badge__name {
  font-weight: 700;
  flex-shrink: 0;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shift-badge__time {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  color: inherit;
  opacity: .85;
}
.shift-badge-overflow {
  font-size: var(--text-xs);
  color: var(--muted-strong);
  padding: 1px var(--sp-2);
}

/* ── Stats panel ─────────────────────────────────────────────── */
.shifts-panel { display: contents; }
.shifts-panel[hidden] { display: none; }

.shifts-stats-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.shifts-stats-controls #shifts-stats-apply {
  height: 54px;
  min-height: 50px;
  padding-block: 0;
}
.shifts-stats-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.shifts-stats-summary[hidden] {
  display: none;
}
.shifts-stats-total {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* ── Conflict notice ─────────────────────────────────────────── */
.shift-conflict-notice {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(255,91,91,.12);
  border: 1px solid rgba(255,91,91,.35);
  color: var(--red);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-2);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .shifts-grid { grid-auto-rows: minmax(72px, auto); }
  .shifts-cell { padding: var(--sp-1); min-height: 72px; }
  .shift-badge__time { display: none; }
  .shifts-cal-header { flex-direction: column; align-items: flex-start; }
  .shifts-stats-controls { flex-direction: column; }
}

/* ── Tasks module ────────────────────────────────────────────── */
.task-type-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.task-type-item .btn {
  margin-left: auto;
}
.task-type-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Select in tasks header must match btn--sm height */
#view-tasks .tasks-header-actions {
  gap: var(--sp-2);
  flex-wrap: nowrap;
  max-width: 100%;
}

#view-tasks .view-header .select-wrap .select-input {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--text-sm);
  line-height: 36px;
}

#view-tasks .tasks-header-actions .custom-select__button {
  height: 36px;
  min-height: 36px;
  padding: 0 6px 0 var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1;
}

#view-tasks .tasks-header-actions .custom-select__chevron {
  width: 24px;
  height: 24px;
}

@media (max-width: 700px) {
  #view-tasks .view-header {
    align-items: flex-start;
  }

  #view-tasks .tasks-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  #view-tasks .tasks-header-actions .select-wrap {
    flex: 1 1 140px;
  }
}

/* ── Search-select (autocomplete) ────────────────────────────── */
.search-select { position: relative; }
.search-select__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-select__input-wrap .input { padding-right: 28px; }
.search-select__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  display: none;
}
.search-select__clear:hover { color: var(--text); }
.search-select__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg-raised));
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  /* backdrop-filter снят: дропдаун селектов открывается часто прямо
     внутри модалки редактирования заявки и каждое hover-движение по
     опциям заставляло re-блюрить регион. */
  z-index: 1200;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  padding: 6px;
}
.search-select__item {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-soft);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search-select__item:hover,
.search-select__item.is-highlighted {
  background: var(--blue-dim);
  color: var(--text);
}
.search-select__empty {
  padding: 8px 10px;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ── Document templates ─────────────────────────────────────── */
.doc-var-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-family: monospace;
  color: var(--blue);
  cursor: pointer;
  user-select: all;
}
.doc-var-chip:hover {
  background: var(--blue-dim);
}
.activity-entry--document .activity-entry__body {
  color: var(--text);
}
.activity-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}
.btn--xs {
  padding: 2px 8px;
  font-size: var(--text-xs);
  height: 22px;
  line-height: 1;
}

/* ── Document print preview window ─────────────────────────── */
dialog.doc-print-overlay {
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
dialog.doc-print-overlay::backdrop {
  background: rgba(0,0,0,.55);
}
.doc-print-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  width: min(860px, 96vw);
  height: 94vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.4));
  overflow: hidden;
}
.doc-print-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.doc-print-modal__body {
  overflow: hidden;
  flex: 1;
  background: var(--panel);
  display: flex;
  flex-direction: column;
}
.doc-print-iframe {
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
  display: block;
}
.doc-print-loading {
  color: var(--text-muted, #999);
  text-align: center;
  padding: var(--sp-8, 32px) 0;
  font-family: sans-serif;
}
.doc-print-error {
  color: var(--red, #c00);
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  font-family: sans-serif;
  line-height: 1.6;
}

/* ── Profile view ─────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  max-width: 1280px;
}
.profile-appearance-card {
  width: 100%;
  max-width: 1280px;
}
.profile-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
@media (max-width: 1100px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.profile-session {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.profile-session.is-current {
  border-color: var(--lime);
  background: var(--lime-dim, var(--surface));
}
.profile-session__main { min-width: 0; flex: 1; }
.profile-session__ua {
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-session__meta {
  font-size: var(--text-xs, 12px);
  color: var(--text-muted);
}
.profile-session__badge {
  background: var(--lime-dim);
  color: var(--lime);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs, 12px);
  font-weight: 500;
}

/* ── Asterisk AMI connection bar ───────────────────────────────────── */
.asterisk-conn {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2, var(--surface));
}
.asterisk-conn__state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.asterisk-conn__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.asterisk-conn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 var(--lime);
  animation: asterisk-conn-pulse 2s ease-out infinite;
}
@keyframes asterisk-conn-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 0%, transparent); }
}
.asterisk-conn__check svg,
.asterisk-conn__disconnect svg { display: block; }
.asterisk-conn__check.is-checking svg {
  animation: asterisk-conn-spin 0.8s linear infinite;
}
@keyframes asterisk-conn-spin {
  to { transform: rotate(360deg); }
}
.asterisk-conn__error {
  color: var(--danger, #e5484d);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   Интеграция «Обратная связь» (.fb-*)
   ════════════════════════════════════════════════════════════════════ */
.fb-tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.fb-tab {
  appearance: none;
  background: none;
  border: none;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.fb-tab:hover { color: var(--text); }
.fb-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.fb-panel { display: none; }
.fb-panel.is-active { display: block; }
/* Формы «Сообщить об ошибке» и «Запросить интеграцию» центрируем по
   горизонтали в доступном пространстве вкладки. */
.fb-panel[data-fb-panel="bug"].is-active,
.fb-panel[data-fb-panel="integration"].is-active {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* Чат с поддержкой заполняет доступную высоту флекс-цепочкой, без 100vh.
   .dash-view уже скроллится сам (flex:1 под топбаром 65px), поэтому
   растягиваем inner до полной высоты и пускаем fl:1 вниз по дереву —
   панель садится «впритык» и внешний скроллбар не появляется. */
#view-feedback-support .dash-view__inner {
  flex: 1;
  min-height: 0;
}
.fb-panel[data-fb-panel="support"].is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.fb-form-card { max-width: 720px; width: 100%; padding: var(--sp-5); margin-inline: auto; }
.fb-form-actions { margin-top: var(--sp-4); display: flex; justify-content: flex-end; }
.fb-config-warning,
.fb-support-config-warning {
  background: var(--gold-dim, rgba(245,191,79,0.12));
  border: 1px solid rgba(245,191,79,0.3);
  color: var(--text);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* — загрузка изображений — */
.fb-dropzone {
  border: 1.5px dashed var(--line-strong, var(--line));
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  outline: none;
}
.fb-dropzone:hover,
.fb-dropzone:focus-visible,
.fb-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-dim, rgba(99,102,241,0.08));
}
.fb-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.fb-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--r-full);
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fb-thumb__remove:hover { background: var(--red, #e5484d); }

/* — чат с поддержкой — */
/* Высоту НЕ привязываем к 100vh: панель живёт внутри .dash-view__inner
   (flex-column), который уже скроллится сам. vh игнорировал топбар, паддинги
   и заголовок раздела, из-за чего панель вылезала и появлялся внешний
   скроллбар при достаточном месте. Заполняем доступную высоту флексом. */
.fb-support {
  display: flex;
  gap: var(--sp-3);
  flex: 1;
  min-height: 420px;
}
.fb-tickets {
  flex: 0 0 33%;
  max-width: 33%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface, var(--bg-surface));
  overflow: hidden;
}
.fb-tickets__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.fb-tickets__list { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.fb-empty { padding: var(--sp-5) var(--sp-3); text-align: center; }
.fb-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--r-md);
  /* Равные вертикальные отступы: номер «дышит» одинаково сверху и снизу. */
  padding: var(--sp-3) var(--sp-3);
  cursor: pointer;
  margin-bottom: var(--sp-1);
  transition: background var(--dur-fast) var(--ease);
}
.fb-ticket:hover { background: var(--hover, var(--bg-raised)); }
.fb-ticket.is-active { background: var(--accent-dim, rgba(99,102,241,0.12)); }
/* Статус-бейдж вынесен из потока в правый верхний угол, чтобы номер/название/
   дата шли единой колонкой с равномерными отступами. */
.fb-ticket__status { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.fb-ticket__num { padding-right: 90px; }
.fb-ticket__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-ticket__meta { display: flex; align-items: center; justify-content: space-between; }
.fb-ticket__unread {
  background: var(--blue, #3b82f6);
  color: #fff;
  border-radius: var(--r-full);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fb-chat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface, var(--bg-surface));
  overflow: hidden;
}
.fb-chat__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
}
.fb-chat__active { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fb-chat__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.fb-chat__back { display: none; }
.fb-chat__title { font-weight: 600; }
.fb-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fb-msg { display: flex; }
.fb-msg--out { justify-content: flex-end; }
.fb-msg--in { justify-content: flex-start; }
.fb-msg--system { justify-content: center; }
.fb-msg--system .caption {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 12px;
  color: var(--text-muted);
}
.fb-msg__bubble {
  max-width: 78%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fb-msg--in .fb-msg__bubble {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-xs);
}
.fb-msg--out .fb-msg__bubble {
  background: var(--blue-dim);
  border: 1px solid rgba(101,207,255,0.25);
  border-bottom-right-radius: var(--r-xs);
}
.fb-msg__text { white-space: pre-wrap; word-break: break-word; }
.fb-msg__media {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: block;
}
.fb-msg__file { color: var(--accent); word-break: break-all; }
.fb-msg__time { align-self: flex-end; opacity: 0.6; font-size: 10px; }

.fb-chat__composer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
}
.fb-chat__input { flex: 1; }
.fb-chat__closed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* — адаптив: на мобильных сначала список, при выборе — чат — */
@media (max-width: 760px) {
  .fb-support { flex-direction: column; height: auto; }
  .fb-tickets { flex-basis: auto; max-width: 100%; max-height: 50vh; }
  .fb-chat { min-height: 60vh; }
  .fb-support--chat-open .fb-tickets { display: none; }
  .fb-support:not(.fb-support--chat-open) .fb-chat { display: none; }
  .fb-chat__back { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Реферальная система (.ref-*)
   ═══════════════════════════════════════════════════════════════════════ */
.ref-tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.ref-tab {
  appearance: none;
  background: none;
  border: none;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.ref-tab:hover { color: var(--text); }
.ref-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.ref-panel { display: none; }
.ref-panel.is-active { display: block; }

.ref-link-card { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.ref-link-card__title { margin-bottom: var(--sp-2); font-weight: 600; }
.ref-link-row { display: flex; gap: var(--sp-2); align-items: center; }
.ref-link-input { flex: 1; min-width: 0; font-family: var(--font-mono, monospace); }
.ref-code-hint, #ref-code-hint { margin-top: var(--sp-2); }

.ref-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ref-stat { padding: var(--sp-4); text-align: center; }
.ref-stat__value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--accent); }
.ref-stat__label { margin-top: var(--sp-1); }

.ref-chart-card { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.ref-chart-card__title { margin-bottom: var(--sp-3); font-weight: 600; }
.ref-chart-wrap { position: relative; height: 220px; }

.ref-progress-card { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.ref-thresholds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.ref-threshold {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  padding: var(--sp-3);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ref-threshold.is-reached { border-color: var(--accent); }
.ref-threshold.is-granted { border-color: #97e85b; background: #97e85b14; }
.ref-threshold__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.ref-threshold__plan { font-weight: 600; }
.ref-threshold__bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ref-threshold__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 900ms var(--ease, ease-out);
}
.ref-threshold.is-granted .ref-threshold__fill { background: #97e85b; }
.ref-threshold__status { margin-top: var(--sp-2); }

.ref-table-title { margin-bottom: var(--sp-3); font-weight: 600; }
.ref-table-wrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th, .ref-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ref-table th { color: var(--text-muted); font-weight: 600; font-size: 0.85em; }
.ref-table tr:last-child td { border-bottom: none; }
.ref-empty { margin-top: var(--sp-3); }

.ref-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.ref-two-col > .card { padding: var(--sp-4); }

@media (max-width: 860px) {
  .ref-two-col { grid-template-columns: 1fr; }
}

/* ── Экран оплаты подписки (payment-gate) ─────────────────────────── */
.payment-gate { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.payment-gate__head { display: flex; flex-direction: column; gap: var(--sp-1); }

.payment-gate__status {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  border: 1px solid var(--line);
}
.payment-gate__status--pending {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--text);
}
.payment-gate__status--rejected {
  background: var(--red-dim);
  border-color: var(--red);
  color: var(--text);
}

.payment-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.payment-plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: left;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.payment-plan:hover { border-color: var(--line-strong); }
.payment-plan--selected {
  border-color: var(--lime);
  background: var(--lime-dim);
}
.payment-plan__name { font-weight: 600; font-size: var(--text-lg); color: var(--text); }
.payment-plan__price { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.payment-plan__price small { font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
.payment-plan__features { font-size: var(--text-xs); color: var(--muted); }

.payment-requisites {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.payment-requisites__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.payment-requisites__list > div { display: flex; flex-direction: column; gap: 2px; }
.payment-requisites__list dt { font-size: var(--text-xs); color: var(--muted); }
.payment-requisites__list dd { margin: 0; font-weight: 600; color: var(--text); }

.payment-receipt-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.payment-receipt-form .field { display: flex; flex-direction: column; gap: var(--sp-1); }
.payment-receipt-form .field__label { font-size: var(--text-xs); color: var(--muted); }