/* =============================================================================
   Layout — шапка модуля, сетки страниц
   ============================================================================= */

/* ---------- Имитация верхнего меню платформы (сдать в финале) ----------
   На проде верхнее меню даёт B2B-платформа. Этот блок — только контекстная
   подсказка для демо прототипа, его НЕ нужно переносить в прод. */
.platform-stub {
  background: var(--color-neutral-800);
  color: var(--color-text-contrast);
  font-size: var(--fs-captionL);
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.platform-stub .brand { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); }
.platform-stub .brand-mark {
  width: 20px; height: 20px; border-radius: 4px; background: var(--color-brand-600);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.platform-stub nav { display: flex; gap: var(--space-3); color: rgba(255,255,255,.65); }
.platform-stub nav a { color: rgba(255,255,255,.65); }
.platform-stub nav a.current { color: white; font-weight: var(--fw-medium); }
.platform-stub .profile { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); }
.platform-stub .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--color-brand-500); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-semibold); color: white; }

/* ---------- Страница модуля ---------- */
.module-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-10);
}

/* Шапка страницы */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-5);
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; font-size: var(--fs-titleL); line-height: var(--lh-titleL); font-weight: var(--fw-semibold); letter-spacing: -0.3px; }
.page-header .subtitle { margin-top: 4px; color: var(--color-text-secondary); font-size: var(--fs-bodyM); }
.page-header .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Link-стрелка назад */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-secondary); font-size: var(--fs-bodyS);
  padding: 6px 10px; border-radius: var(--radius-s); margin-left: -10px;
}
.back-link:hover { color: var(--color-text-primary); background: var(--color-neutral-40); text-decoration: none; }

/* ---------- Filters panel ---------- */
.filters-panel {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-50);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.filters-row {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-3);
}
.filters-row-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: end;
}
.filters-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-3); gap: var(--space-3); flex-wrap: wrap;
}
.filters-chips { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 1200px) {
  .filters-row { grid-template-columns: 1fr 1fr 1fr; }
  .filters-row-secondary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .filters-row, .filters-row-secondary { grid-template-columns: 1fr; }
}

/* ---------- Form sections ---------- */
.form-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}
.form-sections { display: flex; flex-direction: column; gap: var(--space-4); }
.form-section {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-50);
  border-radius: var(--radius-l);
  padding: var(--space-5) var(--space-6);
}
.form-section-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.form-section-title { font-size: var(--fs-titleS); line-height: var(--lh-titleS); font-weight: var(--fw-semibold); }
.form-section-subtitle { font-size: var(--fs-bodyS); color: var(--color-text-secondary); margin-top: 2px; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.form-row    { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.form-row > * { flex: 1 1 240px; }
.field-col-span-2 { grid-column: span 2; }

@media (max-width: 900px) {
  .form-container { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

/* Sticky sidebar */
.form-aside {
  position: sticky; top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.form-aside-actions {
  display: flex; flex-direction: column; gap: var(--space-2);
}

/* Form footer actions */
.form-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-50);
  border-radius: var(--radius-l);
  margin-top: var(--space-4);
  gap: var(--space-3); flex-wrap: wrap;
}
.form-footer .left { color: var(--color-text-secondary); font-size: var(--fs-bodyS); }

/* ---------- Inline divider with checkbox (бессрочный/неограниченный) ---------- */
.field-with-toggle { display: flex; gap: var(--space-3); align-items: flex-end; }
.field-with-toggle .es-field-wrap { flex: 1; }
.field-with-toggle .es-check { padding: 10px 0; }

/* ---------- Summary card (карточка промокода) ---------- */
.summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5);
}
.summary-item { display: flex; flex-direction: column; gap: 2px; }
.summary-label { font-size: var(--fs-captionL); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .02em; }
.summary-value { font-size: var(--fs-bodyM); color: var(--color-text-primary); font-weight: var(--fw-medium); }
.summary-value.mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }

/* ---------- Condition builder (FR-19 упрощённо) ---------- */
.cond-builder { display: flex; flex-direction: column; gap: var(--space-3); }
.cond-group {
  background: var(--color-neutral-30);
  border: 1px dashed var(--color-neutral-70);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.cond-row {
  display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: var(--space-2);
  align-items: center;
}
.cond-conjunction {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 4px;
  background: var(--color-info-100); color: var(--color-info-800);
  font-size: var(--fs-captionL); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 700px) {
  .cond-row { grid-template-columns: 1fr; }
}

/* ---------- Agent demo order summary ---------- */
.order-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-5);
  align-items: start;
}
.order-total-card { background: var(--color-neutral-800); color: var(--color-text-contrast); border-radius: var(--radius-l); padding: var(--space-5) var(--space-6); }
.order-total-card .label { font-size: var(--fs-captionL); opacity: .65; text-transform: uppercase; letter-spacing: .02em; }
.order-total-card .value { font-size: var(--fs-titleL); line-height: var(--lh-titleL); font-weight: var(--fw-semibold); margin-top: 6px; }
.order-total-card .discount-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-bodyS); margin-top: var(--space-3); }
.order-total-card .discount-row .amount { color: var(--color-success-400); font-weight: var(--fw-semibold); }

@media (max-width: 900px) { .order-grid { grid-template-columns: 1fr; } }

/* ---------- Promo field (agent) ---------- */
.promo-field-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-50);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}
.promo-field-card .promo-status {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-m);
  margin-top: var(--space-3);
}
.promo-field-card .promo-status.is-loading { background: var(--color-neutral-30); color: var(--color-text-secondary); }
.promo-field-card .promo-status.is-valid   { background: var(--color-success-75); color: var(--color-success-700); border: 1px solid var(--color-success-200); }
.promo-field-card .promo-status.is-warning { background: var(--color-warning-75); color: var(--color-warning-700); border: 1px solid var(--color-warning-200); }
.promo-field-card .promo-status.is-invalid { background: var(--color-error-50);   color: var(--color-error-700);   border: 1px solid var(--color-error-100); }

.promo-applied-banner {
  background: var(--color-success-50);
  border: 1px solid var(--color-success-200);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3);
}
.promo-reserved-banner {
  background: var(--color-info-75);
  border: 1px solid var(--color-info-200);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ---------- Spinner ---------- */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Generate preview ---------- */
.preview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px; max-height: 260px; overflow-y: auto;
  padding: var(--space-3); background: var(--color-neutral-30);
  border-radius: var(--radius-m);
}
.preview-grid .code {
  padding: 6px 10px; background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-60); border-radius: var(--radius-s);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-bodyS);
  text-align: center;
}

/* ---------- Helpers ---------- */
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.w-full { width: 100%; } .text-right { text-align: right; }
.hidden { display: none !important; }