/* ============================================================
   crm-theme.css — приводит CRM к языку публичного сайта.

   Грузится последним (после crm.css и crm-ai-assistant.css), поэтому
   переопределяет их правила при равной специфичности. Откат = убрать
   <link> из crm.html, разметка и логика от файла не зависят.

   Палитра и плотность взяты 1:1 из seo-pages.css / frontline-index-theme.css:
   фон #050507 с сеткой 54px, панели #101014, волосяные линии
   rgba(255,255,255,.12), единственный акцент #ff6b00.

   Что убрано как визуальный шум:
   • радиальные оранжево-циановые свечения страницы и оверлей .crm-page::before;
   • градиентные заливки карточек и box-shadow на плоских поверхностях;
   • backdrop-blur и тени сайдбара;
   • оранжевая подсветка строк таблиц при наведении;
   • свечения вокруг логотипа, точек залов и кнопки ИИ.
   Тени остались только там, где элемент реально висит над контентом:
   дропдауны, модалки, командная палитра.
   ============================================================ */

/* ============================================================
   1. Токены
   ============================================================ */
:root {
  --crm-bg: #050507;
  --crm-surface: #0b0b0e;
  --crm-surface-2: #101014;
  --crm-surface-3: #151519;
  --crm-table-head-bg: #1b1b21;
  --crm-sidebar-bg: #0b0b0e;
  --crm-card-bg: #101014;
  --crm-card-border: rgba(255, 255, 255, 0.12);
  --crm-border: var(--crm-card-border);
  --crm-line-soft: rgba(255, 255, 255, 0.07);
  --crm-input-bg: rgba(255, 255, 255, 0.04);

  --crm-text: #f7f7f8;
  --crm-text-soft: #d6d6dd;
  --crm-text-muted: #a8a8b3;

  --crm-accent: #ff6b00;
  --crm-accent-hover: #ff9845;
  --crm-accent-soft: rgba(255, 107, 0, 0.12);
  --crm-accent-2: #54ded1;

  /* Приглушены на 1–2 ступени: на #050507 неоновые статусы звенят. */
  --crm-success: #3fbf7f;
  --crm-warning: #e0a341;
  --crm-danger: #f2606c;
  --crm-info: var(--crm-accent-2);

  --crm-radius: 10px;
  --crm-radius-sm: 8px;
  --crm-transition: 0.18s ease;

  --crm-shadow-soft: none;
  --crm-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.62);

  --crm-topbar-h: 64px;
  --crm-sidebar-w: 268px;
}

/* ============================================================
   2. Холст страницы
   ============================================================ */
.crm-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    var(--crm-bg);
  background-size: 54px 54px;
  color: var(--crm-text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Оверлей поверх всей страницы был чистой декорацией. */
.crm-page::before {
  display: none;
}

.crm-page ::selection {
  background: rgba(255, 107, 0, 0.85);
  color: #050507;
}

.crm-page :focus-visible {
  outline: 2px solid var(--crm-accent-2);
  outline-offset: 2px;
}

/* ============================================================
   3. Сайдбар
   ============================================================ */
.crm-sidebar {
  width: var(--crm-sidebar-w);
  padding: 12px;
  background: var(--crm-surface);
  border-right: 1px solid var(--crm-card-border);
  box-shadow: none;
  backdrop-filter: none;
}

.crm-sidebar-header {
  min-height: 60px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid var(--crm-line-soft);
}

.crm-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  box-shadow: none;
}

/* .crm-brand-text / .crm-brand-subtitle не трогаем: в crm.css они уже набраны
   Russo One + JetBrains Mono, то есть ровно так же, как заголовки сайта. */

.crm-location-selector {
  padding: 12px 0;
  border-bottom: 1px solid var(--crm-line-soft);
}

.crm-location-current {
  min-height: 54px;
  background: var(--crm-input-bg);
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius-sm);
}

.crm-location-current:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 107, 0, 0.45);
}

.crm-location-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--crm-accent-soft);
  border: 1px solid rgba(255, 107, 0, 0.22);
  color: var(--crm-accent);
}

.crm-location-dropdown {
  background: var(--crm-surface-2);
  border-color: var(--crm-card-border);
  border-radius: var(--crm-radius-sm);
  box-shadow: var(--crm-shadow-strong);
}

.crm-location-option:hover,
.crm-location-option.active,
.crm-location-action:hover {
  background: var(--crm-accent-soft);
}

.crm-nav-label {
  color: var(--crm-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.crm-nav-divider {
  background: var(--crm-line-soft);
}

.crm-nav-item {
  color: var(--crm-text-muted);
  border-radius: var(--crm-radius-sm);
  font-weight: 600;
}

.crm-nav-item i {
  color: #6e6e79;
}

.crm-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--crm-text);
}

/* Плоская заливка + тонкая полоса слева вместо градиента. */
.crm-nav-item.active {
  background: var(--crm-accent-soft);
  box-shadow: inset 2px 0 0 var(--crm-accent);
  color: var(--crm-text);
  font-weight: 700;
}

.crm-sidebar-footer {
  border-top: 1px solid var(--crm-line-soft);
}

.crm-sidebar-meta {
  background: transparent;
  border: 0;
  padding: 10px 0 2px;
  color: var(--crm-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.crm-live-dot {
  width: 6px;
  height: 6px;
  background: var(--crm-success);
  box-shadow: none;
}

/* ============================================================
   4. Верхняя панель
   Пересобрана: слева — арена (единственный контекст, которого нет
   в сайдбаре), справа — поиск, ИИ-помощник и профиль.
   ============================================================ */
.crm-topbar {
  position: sticky;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--crm-topbar-h);
  padding: 0 24px;
  background: var(--crm-bg);
  border-bottom: 1px solid var(--crm-card-border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Единственная декоративная деталь — та же волосяная линия, что у шапки сайта. */
.crm-topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(255, 107, 0, 0.7) 14%, rgba(255, 107, 0, 0.12) 46%, rgba(84, 222, 209, 0.28) 84%, transparent 98%);
  pointer-events: none;
}

/* Все элементы панели — 38px: тот же минимальный тач-таргет, что crm.css
   задаёт для .btn-sm, иначе панель идёт «лесенкой». */
.crm-menu-toggle {
  width: 38px;
  height: 38px;
  border-radius: var(--crm-radius-sm);
  border: 1px solid transparent;
  color: var(--crm-text-soft);
}

.crm-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--crm-card-border);
}

/* Переключатель арены */
.crm-topbar-location {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--crm-radius-sm);
  background: transparent;
  color: var(--crm-text);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--crm-transition), border-color var(--crm-transition);
}

.crm-topbar-location:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--crm-card-border);
}

.crm-topbar-title {
  max-width: min(38vw, 340px);
  overflow: hidden;
  color: var(--crm-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-topbar-caret {
  flex: 0 0 auto;
  color: var(--crm-text-muted);
  font-size: 10px;
}

.crm-topbar-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

/* Поиск — поле, а не кнопка: так он читается как инструмент, а не как
   ещё один элемент панели. */
.crm-command-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 250px;
  height: 38px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-input-bg);
  color: var(--crm-text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--crm-transition), background var(--crm-transition);
}

.crm-command-trigger:hover {
  border-color: rgba(255, 107, 0, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.crm-command-trigger > i {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--crm-text-muted);
}

.crm-topbar-search-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-command-trigger kbd {
  flex: 0 0 auto;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--crm-line-soft);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--crm-text-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
}

/* ИИ-помощник: кнопка остаётся, свечение уходит. Высоту не задаём — её держит
   min-height 38px из crm.css, как у остальных .btn-sm. */
.crm-page .btn.crm-ai-trigger {
  gap: 8px;
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius-sm);
  background: var(--crm-input-bg);
  color: var(--crm-text-soft);
  font-size: 13px;
  font-weight: 600;
}

.crm-page .btn.crm-ai-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 107, 0, 0.45);
  color: var(--crm-text);
}

.crm-page .btn.crm-ai-trigger > svg {
  color: var(--crm-accent-2);
}

.crm-page .btn.crm-ai-trigger::after {
  box-shadow: none;
  width: 4px;
  height: 4px;
}

/* Профиль */
.crm-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  min-width: 38px;
  padding: 0 6px 0 12px;
  border: 1px solid transparent;
  border-radius: var(--crm-radius-sm);
  color: var(--crm-text-soft);
  text-decoration: none;
  transition: background var(--crm-transition), border-color var(--crm-transition);
}

.crm-topbar-user:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--crm-card-border);
}

.crm-topbar-username {
  max-width: 140px;
  overflow: hidden;
  color: var(--crm-text-soft);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-page .crm-user-avatar,
.crm-page .crm-avatar-initials {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.crm-page .crm-avatar-initials {
  background: var(--crm-accent-soft);
  border: 1px solid rgba(255, 107, 0, 0.28);
  color: var(--crm-accent);
  font-weight: 800;
}

/* ============================================================
   5. Заголовки разделов
   ============================================================ */
.crm-section-header {
  border-bottom: 1px solid var(--crm-line-soft);
}

.crm-section-title {
  font-family: var(--heading-font-family, Inter, sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--crm-text);
}

.crm-section-kicker {
  color: var(--crm-text-muted);
}

.crm-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--crm-text-soft);
}

.crm-card-title i,
.crm-section-title i {
  color: var(--crm-accent);
}

/* ============================================================
   6. Панели и карточки
   ============================================================ */
.crm-card,
.crm-settings-card,
.crm-chart-card,
.crm-kpi-card,
.crm-page .table-card,
.booking-detail-card,
.booking-detail-status-bar {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius);
  box-shadow: none;
}

.crm-kpi-card:hover {
  border-color: rgba(255, 107, 0, 0.35);
  transform: none;
  box-shadow: none;
}

/* Оранжево-циановая полоса на каждой KPI-карточке — карточки и так
   отделены рамкой, а на сетке из шести штук полосы читаются как рябь. */
.crm-kpi-card::before {
  display: none;
}

.crm-kpi-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--crm-line-soft);
  color: var(--crm-text-muted);
}

/* ============================================================
   7. Таблицы
   ============================================================ */
.crm-table thead th,
.crm-page .data-table th {
  background: var(--crm-table-head-bg);
  border-bottom: 1px solid var(--crm-card-border);
  color: var(--crm-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.crm-table tbody td,
.crm-page .data-table td {
  border-bottom: 1px solid var(--crm-line-soft);
  color: var(--crm-text-soft);
}

/* Оранжевая подсветка строки перекрашивала всю таблицу при движении мыши. */
.crm-table tbody tr:hover,
.crm-page .data-table tbody tr:hover,
.clickable-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.crm-room-dot::before {
  box-shadow: none;
}

/* ============================================================
   8. Кнопки и поля — форма как у .button на сайте
   ============================================================ */
/* Высоту не переопределяем: min-height 42/38px из crm.css — это минимальные
   тач-таргеты, менять их ради вида не стоит. */
.crm-page .btn {
  border-radius: var(--crm-radius-sm);
  font-weight: 700;
  letter-spacing: 0;
  transition: background var(--crm-transition), border-color var(--crm-transition), color var(--crm-transition);
}

.crm-page .btn:hover {
  transform: none;
}

.crm-page .btn:active {
  transform: none;
}

.crm-page .btn.primary {
  background: linear-gradient(110deg, var(--crm-accent), var(--crm-accent-hover));
  border-color: transparent;
  color: #090909;
  box-shadow: none;
}

.crm-page .btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: none;
}

.crm-page .btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--crm-card-border);
  color: var(--crm-text-soft);
}

.crm-page .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 107, 0, 0.45);
  color: var(--crm-text);
}

.crm-page .btn.success {
  background: var(--crm-success);
  border-color: transparent;
  color: #06110b;
}

.crm-page .btn.danger {
  background: var(--crm-danger);
  border-color: transparent;
  color: #170608;
}

.crm-page .btn.warning {
  background: var(--crm-warning);
  border-color: transparent;
  color: #150e03;
}

.crm-filter-input,
.crm-filter-select,
.crm-filter-date,
.crm-input,
.crm-page .form-field input,
.crm-page .form-field select,
.crm-page .form-field textarea,
.crm-page .form-input {
  border-radius: var(--crm-radius-sm);
  border-color: var(--crm-card-border);
  background: var(--crm-input-bg);
  color: var(--crm-text);
}

.crm-filter-input:focus,
.crm-filter-select:focus,
.crm-filter-date:focus,
.crm-input:focus,
.crm-page .form-field input:focus,
.crm-page .form-field select:focus,
.crm-page .form-field textarea:focus,
.crm-page .form-input:focus {
  border-color: rgba(255, 107, 0, 0.55);
  box-shadow: none;
  outline: none;
}

/* ============================================================
   9. Статусы
   Цвет остаётся смыслом, но заливка приглушена и форма едина.
   ============================================================ */
.crm-page .crm-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.crm-page .crm-status.new {
  background: rgba(84, 222, 209, 0.1);
  border-color: rgba(84, 222, 209, 0.24);
  color: var(--crm-info);
}

.crm-page .crm-status.confirmed,
.crm-page .crm-status.completed {
  background: rgba(63, 191, 127, 0.1);
  border-color: rgba(63, 191, 127, 0.24);
  color: var(--crm-success);
}

.crm-page .crm-status.in_progress,
.crm-page .crm-status.started,
.crm-page .crm-status.refunded {
  background: rgba(224, 163, 65, 0.1);
  border-color: rgba(224, 163, 65, 0.24);
  color: var(--crm-warning);
}

.crm-page .crm-status.cancelled,
.crm-page .crm-status.no_show,
.crm-page .crm-status.error {
  background: rgba(242, 96, 108, 0.1);
  border-color: rgba(242, 96, 108, 0.24);
  color: var(--crm-danger);
}

.crm-page .crm-status.draft {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--crm-card-border);
  color: var(--crm-text-muted);
}

/* ============================================================
   10. Слои над контентом — единственное место, где остаются тени
   ============================================================ */
.crm-modal-card,
.crm-command-panel {
  background: var(--crm-surface-2);
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow-strong);
}

/* ============================================================
   11. Промо-баннер — остаётся, но перестаёт спорить с контентом
   ============================================================ */
.crm-banner-carousel {
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius);
  box-shadow: none;
}

.crm-banner-img {
  opacity: 0.5;
}

.crm-banner-carousel:hover .crm-banner-img {
  opacity: 0.72;
}

.crm-banner-title {
  font-family: var(--heading-font-family, Inter, sans-serif);
  letter-spacing: 0.02em;
}

/* ============================================================
   12. Адаптив
   ============================================================ */
@media (max-width: 1180px) {
  .crm-command-trigger {
    width: 200px;
  }
}

@media (max-width: 1024px) {
  .crm-command-trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .crm-command-trigger .crm-topbar-search-label,
  .crm-command-trigger kbd {
    display: none;
  }

  .crm-page .btn.crm-ai-trigger .crm-topbar-btn-label {
    display: none;
  }

  /* padding в crm.css помечен !important, перебиваем тем же весом. */
  .crm-page .btn.crm-ai-trigger {
    width: 38px;
    padding-inline: 0 !important;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .crm-topbar {
    padding: 0 16px;
  }
}

@media (max-width: 640px) {
  .crm-topbar {
    height: 60px;
    gap: 8px;
  }

  .crm-topbar-title {
    max-width: 40vw;
    font-size: 14px;
  }

  .crm-topbar-location {
    padding: 0 8px;
  }

  .crm-topbar-username {
    display: none;
  }

  .crm-topbar-user {
    padding: 0 4px;
  }

  .crm-section-title {
    font-size: 19px;
  }
}