/* ── LAYOUT.CSS — сайдбар, шапка, сетка ── */

#app { min-height: 100vh; }

.app-layout {
  display:    flex;
  min-height: 100vh;
}

/* ── Сайдбар ── */
.sidebar {
  width:       var(--sidebar-w);
  flex-shrink: 0;
  background:  linear-gradient(180deg, var(--brand-purple) 0%, #1a0029 100%);
  border-right: 1px solid var(--color-border);
  display:     flex;
  flex-direction: column;
  position:    sticky;
  top:         0;
  height:      100vh;
  overflow-y:  auto;
}

.sidebar__logo {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      20px 16px;
  border-bottom: 1px solid var(--color-border);
}
.sidebar__logo-mark {
  width:           36px;
  height:          36px;
  background:      var(--brand-orange);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     800;
  font-size:       18px;
  color:           #fff;
  flex-shrink:     0;
  box-shadow:      0 0 12px rgba(254,91,27,0.4);
}
.sidebar__logo-title { font-weight: 700; font-size: var(--text-base); }
.sidebar__logo-sub   { font-size: var(--text-xs); color: var(--color-muted); }

.sidebar__nav { flex: 1; padding: 12px 8px; }

.nav-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       8px 12px;
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  font-weight:   500;
  color:         var(--color-text-2);
  cursor:        pointer;
  transition:    background var(--t-fast), color var(--t-fast);
  text-decoration: none;
  margin-bottom: 2px;
}
.nav-item:hover       { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.nav-item--active     { background: rgba(254,91,27,0.15); color: var(--brand-orange); border-left: 2px solid var(--brand-orange); }
.nav-item__icon       { font-size: 16px; width: 20px; text-align: center; }

.sidebar__footer {
  padding:       12px 16px;
  border-top:    1px solid var(--color-border);
}
.sidebar__user      { display: flex; align-items: center; justify-content: space-between; }
.sidebar__user-name { font-size: var(--text-sm); font-weight: 500; }

/* ── Основной контент ── */
.main-content {
  flex:        1;
  overflow:    auto;
  padding:     24px;
  min-width:   0;
}

#page-content { max-width: 1100px; margin: 0 auto; }

/* ── Шапка страницы ── */
.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   24px;
  flex-wrap:       wrap;
}
.page-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-title    { font-size: var(--text-2xl); font-weight: 700; }
.page-subtitle { color: var(--color-muted); font-size: var(--text-sm); margin-top: 2px; }

/* ── Статистика ── */
.stats-row {
  display:        grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:            12px;
  margin-bottom:  20px;
}
.stat-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       16px 20px;
  min-height:    80px;
}
.stat-card--success { border-color: var(--color-success); }
.stat-card--error   { border-color: var(--color-error);   }
.stat-card--skeleton { height: 80px; }
.stat-card__value { font-size: var(--text-3xl); font-weight: 800; line-height: 1; margin-bottom: 4px; }
.stat-card__label { font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ── Мастер создания ── */
.wizard__header {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: 24px;
}

.wizard__steps {
  display:         flex;
  align-items:     center;
  margin-bottom:   24px;
  overflow-x:      auto;
  padding-bottom:  4px;
}

.wizard-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  flex-shrink:    0;
  opacity:        .4;
  transition:     opacity var(--t-normal);
}
.wizard-step--active  { opacity: .7; }
.wizard-step--current { opacity: 1; }
.wizard-step__icon {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--color-surface-2);
  border:          2px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  transition:      border-color var(--t-normal), background var(--t-normal);
}
.wizard-step--current .wizard-step__icon {
  border-color: var(--color-primary);
  background:   var(--color-primary-bg);
}
.wizard-step__label { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.wizard-step__connector {
  flex:           1;
  height:         2px;
  background:     var(--color-border);
  min-width:      20px;
}

.wizard__body { margin-bottom: 0; }
.wizard__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-top:      1px solid var(--color-border);
}
.wizard__footer-right { display: flex; gap: 8px; }

.step-title { margin-bottom: 6px; }
.step-desc  { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: 20px; }

/* ── Выбор подключения ── */
.connection-options {
  display:   grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:       12px;
  margin-bottom: 20px;
}
.connection-card {
  background:    var(--color-surface-2);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       16px;
  cursor:        pointer;
  transition:    border-color var(--t-fast);
}
.connection-card--selected { border-color: var(--color-primary); }
.connection-card__header   { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.connection-card__icon     { font-size: 18px; }
.connection-card__label    { font-weight: 600; flex: 1; }
.pros-list li { font-size: var(--text-xs); color: var(--color-success); margin-bottom: 3px; }
.cons-list li { font-size: var(--text-xs); color: var(--color-warning); margin-bottom: 3px; }

/* ── Мессенджеры ── */
.messenger-card {
  background:    var(--color-surface-2);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow:      hidden;
  transition:    border-color var(--t-fast);
}
.messenger-card--active  { border-color: var(--color-primary); }
.messenger-card__header  { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; }
.messenger-card__icon    { font-size: 20px; }
.messenger-card__label   { font-weight: 600; flex: 1; }
.messenger-card__body    { padding: 0 16px 16px; border-top: 1px solid var(--color-border); }

/* ── Review ── */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.review-section {
  background:    var(--color-surface-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       16px;
}
.review-section__title { font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.review-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); gap: 8px; }
.review-row:last-child { border-bottom: none; }
.review-row span { color: var(--color-muted); flex-shrink: 0; }

/* ── Детали клиента ── */
.detail-header__body  { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.detail-title         { font-size: var(--text-2xl); font-weight: 700; margin-bottom: 8px; }
.detail-meta          { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.detail-grid          { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.info-row             { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); gap: 8px; }
.info-row:last-child  { border-bottom: none; }
.info-row__label      { color: var(--color-muted); flex-shrink: 0; }
.info-row__value      { text-align: right; }
.info-row__copy       { display: flex; align-items: center; gap: 6px; }
.client-name          { font-weight: 600; }
.client-domain        { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }
.error-text           { font-size: var(--text-xs); color: var(--color-error); white-space: pre-wrap; }

/* ── Login ── */
.login-page {
  min-height:       100vh;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       linear-gradient(135deg, var(--brand-purple) 0%, #1a0029 50%, #0d0015 100%);
  position:         relative;
  overflow:         hidden;
}
.login-page::before {
  content:    '';
  position:   absolute;
  top:        -200px;
  right:      -200px;
  width:      600px;
  height:     600px;
  background: radial-gradient(circle, rgba(254,91,27,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.login-page::after {
  content:    '';
  position:   absolute;
  bottom:     -150px;
  left:       -150px;
  width:      400px;
  height:     400px;
  background: radial-gradient(circle, rgba(255,238,128,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.login-card {
  width:         100%;
  max-width:     400px;
  background:    rgba(58,0,90,0.8);
  border:        1px solid rgba(255,238,128,0.15);
  border-radius: var(--radius-xl);
  padding:       32px;
  box-shadow:    var(--shadow-lg), 0 0 40px rgba(254,91,27,0.1);
  backdrop-filter: blur(10px);
  position:      relative;
  z-index:       1;
}
.login-card__logo {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 32px;
}
.login-logo-mark {
  width:           48px;
  height:          48px;
  background:      var(--brand-orange);
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     800;
  font-size:       22px;
  color:           #fff;
  box-shadow:      0 0 20px rgba(254,91,27,0.5);
}
.login-logo-title { font-size: var(--text-xl); font-weight: 700; }
.login-logo-sub   { font-size: var(--text-xs); color: var(--color-muted); }
.login-form       { display: flex; flex-direction: column; gap: 16px; }
.login-error      { color: var(--color-error); font-size: var(--text-sm); text-align: center; }

/* ── conn-fields ── */
.conn-fields { margin-top: 16px; }