/* PREMIUM MODAL SYSTEM — стиль как «Новая запись» в календаре */
:root {
  --pm-accent: var(--primary,#2F6F68);
  --pm-accent-dark: #1f4f4a;
  --pm-accent-soft: #6faea6;
  --pm-ink: #1A1A1A;
  --pm-muted: #667085;
  --pm-line: #E0E0E0;
  --pm-surface: #ffffff;
  --pm-soft: #F4F6F6;
}

html.dark,
[data-theme="dark"] {
  --pm-ink: #EDEDED;
  --pm-muted: #A8A8A8;
  --pm-line: #2E2E2E;
  --pm-surface: #1E1E1E;
  --pm-soft: #1A1A1A;
  --pm-accent-soft: rgba(61, 143, 134, 0.25);
}

body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0);
}

/* ——— Overlay ——— */
.modal-overlay,
.modal-backdrop,
.cal-edit-overlay,
.cal-create-overlay,
[class*="-modal-overlay"] {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Etalon: crmConfirm (.crm-dialog-overlay) — без blur */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.modal-overlay.active,
.modal-backdrop.active,
.cal-edit-overlay:not([hidden]),
.cal-edit-overlay.active,
.cal-create-overlay.active,
.cal-create-overlay:not([hidden]),
[class*="-modal-overlay"].active,
[class*="-modal-overlay"]:not([hidden]) {
  display: flex;
}

.modal-overlay[hidden],
.modal-backdrop[hidden],
.cal-edit-overlay[hidden],
.cal-create-overlay[hidden],
[class*="-modal-overlay"][hidden] {
  display: none !important;
}

[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .modal-backdrop,
html.dark .modal-overlay,
html.dark .modal-backdrop,
html.dark .cal-edit-overlay,
html.dark .cal-create-overlay,
html.dark [class*="-modal-overlay"] {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ——— Dialog panel ——— */
.modal-overlay .modal,
.modal-backdrop .modal-content,
.modal-content,
.cal-edit-modal,
.cal-create-modal,
.bk-modal-premium,
.pr-modal-card.bk-modal-premium,
.pr-modal.bk-modal-premium,
.cprof-modal.bk-modal-premium,
[class*="-modal-overlay"] > .modal,
[class*="-modal-overlay"] > [class*="-modal"]:not([class*="overlay"]):not([class*="actions"]) {
  --cal-primary: var(--pm-accent);
  position: relative;
  width: min(560px, 100%);
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-x: hidden !important;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--pm-surface);
  color: var(--pm-ink);
  border-radius: 20px;
  padding: 28px 28px 24px;
  border: 1px solid rgba(47, 111, 104, 0.12);
  box-shadow:
    0 4px 16px rgba(15, 23, 22, 0.06),
    0 28px 72px rgba(15, 23, 22, 0.22);
  animation: premiumModalIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.wide,
.modal-content.wide,
.cal-create-modal.wide,
[class*="-modal-overlay"] > [class*="-modal-lg"],
[class*="-modal-overlay"] > [class*="-modal"].wide {
  width: min(640px, 100%);
}

[class*="-modal-overlay"] > [class*="-modal-xl"],
[class*="-modal-overlay"] > .nfin-modal-lg {
  width: min(1100px, 96vw);
}

[class*="-modal-overlay"] > [class*="-modal-sm"] {
  width: min(420px, 100%);
}

@keyframes premiumModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Убираем цветной кант слева / сверху на всех модалках */
.modal-overlay .modal::before,
.modal-backdrop .modal-content::before,
.cal-edit-modal::before,
.bk-modal-premium::before,
[class*="-modal-overlay"] > [class*="-modal"]:not([class*="overlay"])::before,
.cal-create-accent,
.bk-modal-accent,
[class*="-modal-accent"] {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

/* Close — только крестик в углу, НЕ кнопки «Отмена» в футере */
.modal-close,
.cal-edit-x,
.cal-create-close,
.bk-modal-close,
[class*="-modal-close"],
[class*="-modal-x"] {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color:var(--text-secondary,#555);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}
.modal-close:hover,
.cal-edit-x:hover,
.cal-create-close:hover,
.bk-modal-close:hover,
[class*="-modal-close"]:hover,
[class*="-modal-x"]:hover {
  background: rgba(47, 111, 104, 0.1);
  color: var(--pm-accent);
}
html.dark .modal-close,
html.dark .cal-edit-x,
html.dark .cal-create-close,
html.dark .bk-modal-close,
html.dark [class*="-modal-close"],
html.dark [class*="-modal-x"],
[data-theme="dark"] .modal-close,
[data-theme="dark"] .cal-edit-x,
[data-theme="dark"] .cal-create-close,
[data-theme="dark"] .bk-modal-close,
[data-theme="dark"] [class*="-modal-close"],
[data-theme="dark"] [class*="-modal-x"] {
  background: transparent;
  color: #A8A8A8;
}
html.dark .modal-close:hover,
html.dark .cal-edit-x:hover,
html.dark .cal-create-close:hover,
html.dark .bk-modal-close:hover,
html.dark [class*="-modal-close"]:hover,
html.dark [class*="-modal-x"]:hover,
[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .cal-edit-x:hover,
[data-theme="dark"] .cal-create-close:hover,
[data-theme="dark"] .bk-modal-close:hover,
[data-theme="dark"] [class*="-modal-close"]:hover,
[data-theme="dark"] [class*="-modal-x"]:hover {
  background: rgba(61, 143, 134, 0.18);
  color: var(--pm-accent-soft, #6faea6);
}

/* Titles */
.modal-overlay .modal > h2,
.cal-create-modal h2,
.cal-edit-modal h2,
[class*="-modal-overlay"] [class*="-modal"]:not([class*="actions"]) > h2,
.bk-modal-premium > h2,
.nh-modal > h2 {
  margin: 0 0 8px;
  padding-right: 40px;
  font-size: 24px;
  font-weight: 700;
  color: var(--pm-ink);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-overlay .modal > h2 i,
.cal-create-modal h2 i,
.cal-edit-modal h2 i,
[class*="-modal-overlay"] [class*="-modal"] > h2 i,
.bk-modal-premium > h2 i,
.nh-modal > h2 i {
  color: var(--pm-accent);
  width: 1.15em;
  text-align: center;
  flex-shrink: 0;
}
.modal-overlay .modal > h2::after {
  display: none;
}

/* Appointment card modal (Список записей / Дашборд) — layout must be global */
.cal-edit-modal .cal-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-right: 40px;
  color: var(--pm-ink);
}
.cal-edit-modal .cal-modal-title .crm-avatar,
.cal-edit-modal .cal-modal-title .crm-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cal-edit-modal .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pm-line, rgba(47, 111, 104, 0.1));
  font-size: 13px;
}
html.dark .cal-edit-modal .row,
[data-theme="dark"] .cal-edit-modal .row {
  border-bottom-color: var(--pm-line, #2E2E2E);
}
.cal-edit-modal .row .lbl {
  color: var(--pm-muted, #667085);
  flex-shrink: 0;
  font-weight: 500;
}
.cal-edit-modal .row .val {
  font-weight: 500;
  text-align: right;
  color: var(--pm-ink);
  min-width: 0;
}
.cal-edit-modal .row .val.crm-name-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-align: right;
}
.cal-edit-modal .row .val.crm-name-cell .crm-avatar,
.cal-edit-modal .row .val.crm-name-cell .crm-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cal-edit-modal .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.cal-edit-modal .status-pill.pending {
  background: color-mix(in srgb, #F9A825 16%, var(--bg-card, #FFF8E1));
  color: #F9A825;
}
.cal-edit-modal .status-pill.confirmed {
  background: color-mix(in srgb, #0D47A1 16%, var(--bg-card, #E3F2FD));
  color: #0D47A1;
}
.cal-edit-modal .status-pill.arrived {
  background: color-mix(in srgb, #0891B2 16%, var(--bg-card, #E0F7FA));
  color: #0891B2;
}
.cal-edit-modal .status-pill.in_progress {
  background: color-mix(in srgb, #C62828 14%, var(--bg-card, #FCE4EC));
  color: #C62828;
}
.cal-edit-modal .status-pill.completed {
  background: color-mix(in srgb, #2E7D32 16%, var(--bg-card, #E8F5E9));
  color: #2E7D32;
}
.cal-edit-modal .status-pill.cancelled {
  background: color-mix(in srgb, #C62828 16%, var(--bg-card, #FFEBEE));
  color: #C62828;
}
.cal-edit-modal .status-pill.no_show {
  background: color-mix(in srgb, #6A1B9A 16%, var(--bg-card, #F3E5F5));
  color: #6A1B9A;
}
.cal-edit-modal .row + .cal-create-actions {
  margin-top: 8px;
}

.cal-create-kicker,
.pm-kicker,
.bk-modal-kicker,
.nh-modal-kicker,
[class*="-modal-kicker"] {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pm-accent);
}

.cal-create-lead,
.pm-lead,
.bk-modal-lead,
.nh-modal-lead,
[class*="-modal-lead"] {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pm-muted);
}

/* Fields — без min-width, чтобы не было горизонтального скролла */
.cal-create-field label,
.modal-overlay .form-group label,
[class*="-modal"] .form-group label,
[class*="-modal"] [class*="-fg"] > label,
[class*="-modal"] .cl-fg > label,
.bk-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-muted);
}

.cal-create-field input,
.cal-create-field select,
.cal-create-field textarea,
.modal-overlay .form-group input,
.modal-overlay .form-group select,
.modal-overlay .form-group textarea,
[class*="-modal"] .form-group input,
[class*="-modal"] .form-group select,
[class*="-modal"] .form-group textarea,
[class*="-modal"] [class*="-fg"] input,
[class*="-modal"] [class*="-fg"] select,
[class*="-modal"] [class*="-fg"] textarea,
[class*="-modal"] .cl-fg input,
[class*="-modal"] .cl-fg select,
[class*="-modal"] .cl-fg textarea,
.bk-modal input,
.bk-modal select,
.bk-modal textarea,
.bk-form-group input,
.bk-form-group select,
.bk-form-group textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 11px 12px;
  border: 1px solid var(--pm-line);
  border-radius: 12px;
  font: 500 14px inherit;
  background: var(--pm-surface);
  color: var(--pm-ink);
  transition: border-color .15s, box-shadow .15s;
}

.cal-create-grid,
.bk-form-grid,
[class*="-modal"] form,
[class*="-modal"] [class*="-form-grid"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* Create-visit modal: no right-edge overflow, room for close button */
.cal-create-modal,
.cal-create-modal.wide {
  box-sizing: border-box;
  max-width: 100%;
  padding-left: 28px;
  padding-right: 28px;
}
.cal-create-modal *,
.cal-create-modal *::before,
.cal-create-modal *::after {
  box-sizing: border-box;
}
.cal-create-modal > h2,
.cal-create-modal > .cal-create-kicker,
.cal-create-modal > .cal-create-lead {
  padding-right: 44px;
}
.cal-create-modal form,
.cal-create-modal .cal-create-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.cal-create-modal .cal-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
}
.cal-create-modal .cal-create-grid > *,
.cal-create-modal .cal-create-field {
  min-width: 0;
  max-width: 100%;
}
.cal-create-modal .cal-create-field input,
.cal-create-modal .cal-create-field select,
.cal-create-modal .cal-create-field textarea {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 560px) {
  .cal-create-modal .cal-create-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.cal-create-field input:focus,
.cal-create-field select:focus,
.cal-create-field textarea:focus,
.modal-overlay .form-group input:focus,
.modal-overlay .form-group select:focus,
.modal-overlay .form-group textarea:focus,
[class*="-modal"] input:focus,
[class*="-modal"] select:focus,
[class*="-modal"] textarea:focus {
  outline: none;
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 2px rgba(47, 111, 104, 0.10);
}

/* Actions row — Отмена рядом с основным действием */
.modal-actions,
.modal-footer,
.form-actions,
.cal-create-actions,
.bk-modal-actions,
[class*="-modal-actions"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: static !important;
}

.modal-actions > *,
.modal-footer > *,
.form-actions > *,
.cal-create-actions > *,
.bk-modal-actions > *,
[class*="-modal-actions"] > * {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 42px;
}

/* ——— Premium buttons ——— */
.pm-btn,
.cal-create-actions .cal-btn,
.modal-actions button,
.modal-footer button,
.form-actions .btn-save,
.form-actions .btn-cancel,
.modal-overlay .btn-save,
.modal-overlay .btn-cancel,
.bk-modal-actions .bk-btn,
[class*="-modal-actions"] button,
[class*="-modal-actions"] .cl-btn,
[class*="-modal-actions"] [class*="-btn"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font: 600 14px inherit !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .12s;
  text-decoration: none;
  box-sizing: border-box;
}

.pm-btn:active,
.cal-create-actions .cal-btn:active,
.form-actions .btn-save:active,
.form-actions .btn-cancel:active,
[class*="-modal-actions"] button:active {
  transform: translateY(1px);
}

.pm-btn-primary,
.cal-create-actions .cal-btn-primary,
.form-actions .btn-save,
.modal-overlay .btn-save,
.bk-modal-actions .bk-btn-primary,
[class*="-modal-actions"] [class*="-btn-primary"],
[class*="-modal-actions"] .cl-btn-primary,
[class*="-modal-actions"] button[type="submit"] {
  background: linear-gradient(180deg, #35807a 0%, var(--pm-accent) 100%) !important;
  color: #fff !important;
  border-color: var(--pm-accent-dark) !important;
  box-shadow: 0 8px 22px rgba(47, 111, 104, 0.28) !important;
}

.pm-btn-primary:hover,
.cal-create-actions .cal-btn-primary:hover,
.form-actions .btn-save:hover,
.modal-overlay .btn-save:hover,
[class*="-modal-actions"] [class*="-btn-primary"]:hover,
[class*="-modal-actions"] button[type="submit"]:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, #3a8a83 0%, #2a655f 100%) !important;
}

.pm-btn-secondary,
.cal-create-actions .cal-btn-secondary,
.cal-create-actions .cal-btn:not(.cal-btn-primary),
.form-actions .btn-cancel,
.modal-overlay .btn-cancel,
.bk-modal-actions .bk-btn-outline,
[class*="-modal-actions"] [class*="-btn-outline"],
[class*="-modal-actions"] [class*="-btn-secondary"],
[class*="-modal-actions"] .cl-btn-outline,
[class*="-modal-actions"] button[data-close],
[class*="-modal-actions"] button[type="button"]:not([class*="-btn-primary"]):not(.btn-save):not([class*="danger"]) {
  background: var(--pm-surface) !important;
  color: var(--pm-ink) !important;
  border: 1px solid var(--pm-line) !important;
  box-shadow: none !important;
}

.pm-btn-secondary:hover,
.cal-create-actions .cal-btn-secondary:hover,
.form-actions .btn-cancel:hover,
.modal-overlay .btn-cancel:hover,
[class*="-modal-actions"] [class*="-btn-outline"]:hover,
[class*="-modal-actions"] button[data-close]:hover {
  background: #F8FAFC !important;
  border-color: var(--pm-accent) !important;
  color: var(--pm-accent) !important;
}

[class*="-modal-actions"] [class*="-btn-danger"],
[class*="-modal-actions"] button.btn-danger {
  background: linear-gradient(180deg, #e57373, #c62828) !important;
  color: #fff !important;
  border-color: #b71c1c !important;
  box-shadow: 0 8px 22px rgba(198, 40, 40, 0.25) !important;
}

@media (max-width: 640px) {
  .modal-overlay,
  .modal-backdrop,
  .cal-edit-overlay,
  .cal-create-overlay,
  [class*="-modal-overlay"] {
    align-items: flex-end;
    padding: 0;
  }
  .modal-overlay .modal,
  .modal-content,
  .cal-edit-modal,
  .cal-create-modal,
  [class*="-modal-overlay"] > [class*="-modal"]:not([class*="overlay"]):not([class*="actions"]) {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    animation: premiumModalSheet 0.25s ease-out;
  }
}

@keyframes premiumModalSheet {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

/* ——— Person cell (аватар + имя) в модалках и деталях ——— */
.crm-person,
.bk-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.crm-person .crm-avatar,
.bk-person .crm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #E8F0EF;
  background: var(--pm-soft, #F4F6F6);
  flex-shrink: 0;
}
.crm-person-text,
.bk-person-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crm-person-name,
.bk-person-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--pm-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-person-sub,
.bk-client-sub {
  font-size: 12px;
  color: var(--pm-muted);
  line-height: 1.3;
}

/* Единая сетка деталей записи */
.pm-detail-grid,
.nsch-grid,
.bk-detail-grid,
.msched-detail-grid,
[class*="-detail-grid"] {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 16px;
  font-size: 14px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  margin-bottom: 4px;
  align-items: center;
}
[class*="-modal"] [class*="-detail-grid"],
[class*="-modal"] [class*="-detail-body"],
[class*="-overlay"] [class*="-detail-grid"],
[class*="-overlay"] [class*="-detail-body"],
#nhDetailBody,
#nhDetailBody > * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pm-detail-grid .k,
.nsch-grid .k,
.bk-detail-grid .k,
.msched-detail-grid .k,
[class*="-detail-grid"] .k {
  color: var(--pm-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[class*="-modal"] .pm-lead,
[class*="-modal"] .nsch-hint,
[class*="-modal"] .nb-hint,
[class*="-modal"] .bk-modal-lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pm-muted);
}

/* Dark theme: dimmer dividers inside modals */
html.dark [class*="-modal-actions"],
html.dark .modal-actions,
html.dark .modal-footer,
html.dark .form-actions,
html.dark .cal-create-actions,
[data-theme="dark"] [class*="-modal-actions"] {
  border-top-color: rgba(255, 255, 255, 0.06);
}
html.dark .pos-modal hr,
html.dark .bk-modal-premium hr {
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

/* Dark theme: softer focus ring on form controls (global) */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark .form-group input:focus,
html.dark .form-group select:focus,
html.dark .form-group textarea:focus,
html.dark .staff-toolbar input:focus,
html.dark .staff-toolbar select:focus,
html.dark .modal input:focus,
html.dark .modal select:focus,
html.dark .modal textarea:focus,
html.dark .an-input:focus,
html.dark .an-select:focus,
html.dark .an-filter input:focus,
html.dark .an-filter select:focus,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  outline: none !important;
  border-color: rgba(61, 143, 134, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(61, 143, 134, 0.10) !important;
}
html.dark button:focus-visible,
html.dark a:focus-visible,
html.dark [role="button"]:focus-visible {
  outline: 1px solid rgba(61, 143, 134, 0.45);
  outline-offset: 2px;
}