/* ============================================================
   BP Capsule UI Kit
   Лёгкий чисто-CSS набор стилей в фирменном виде BusinessPad
   для СТАТИЧЕСКИХ капсул (index.html + nginx), где не нужен React.
   Токены взяты из @business-pad/theme (репо infrabp/components).
   Светлая тема. Шрифт Fira Sans.
   ============================================================ */

:root {
  /* --- Палитра (из @business-pad/theme palette) --- */
  /* Primary — КРАСНАЯ (фирменная primary-кнопка капсул BP). Светлая тема. */
  --bp-primary: #E5322B;
  --bp-primary-dark: #C21F1A;
  --bp-primary-light: #FBE3E2;
  --bp-on-primary: #FFFFFF;

  --bp-accent: #FF5722;        /* secondary.main */
  --bp-accent-dark: #FF7E57;
  --bp-accent-light: #FFEBE4;

  --bp-text: #050819;          /* text.primary / common.black */
  --bp-text-secondary: #85868A;
  --bp-text-disabled: #CCCCCC;

  --bp-bg-base: #F5F5F5;       /* background.default */
  --bp-surface: #FFFFFF;       /* background.paper */

  --bp-grey-300: #D9DADF;
  --bp-grey-600: #85868A;
  --bp-grey-800: #424242;
  --bp-border: #D9DADF;

  --bp-error: #F32A16;   --bp-error-light: #FFD4D8;
  --bp-success: #599C16; --bp-success-light: #EDF7ED;
  --bp-warning: #FCCA25; --bp-warning-light: #FFF2D2;
  --bp-info: #0B79D0;    --bp-info-light: #E0EDFF;

  --bp-hover: rgba(0,0,0,0.04);
  --bp-selected: rgba(0,0,0,0.08);

  /* --- Форма / отступы --- */
  --bp-radius: 8px;
  --bp-radius-lg: 12px;
  --bp-space-1: 4px;
  --bp-space-2: 8px;
  --bp-space-3: 12px;
  --bp-space-4: 16px;
  --bp-space-6: 24px;
  --bp-shadow-1: 0 1px 2px rgba(5,8,25,0.06), 0 1px 3px rgba(5,8,25,0.10);
  --bp-shadow-2: 0 4px 12px rgba(5,8,25,0.10);

  /* --- Типографика (из @business-pad/theme typography) --- */
  --bp-font: 'Fira Sans', -apple-system, Segoe UI, Roboto, sans-serif;
}

/* --- База --- */
.bp, .bp *, .bp *::before, .bp *::after { box-sizing: border-box; }
.bp {
  font-family: var(--bp-font);
  color: var(--bp-text);
  background: var(--bp-bg-base);
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

/* --- Типографика --- */
.bp-h1 { font-weight: 600; font-size: 32px; line-height: 40px; margin: 0; }
.bp-h2 { font-weight: 500; font-size: 24px; line-height: 28px; margin: 0; }
.bp-h3 { font-weight: 500; font-size: 20px; line-height: 24px; margin: 0; }
.bp-h4 { font-weight: 500; font-size: 16px; line-height: 20px; margin: 0; }
.bp-subtitle { font-weight: 500; font-size: 14px; line-height: 16px; }
.bp-body { font-weight: 400; font-size: 16px; line-height: 20px; }
.bp-body-2 { font-weight: 400; font-size: 14px; line-height: 16px; }
.bp-caption { font-weight: 400; font-size: 12px; line-height: 14px; color: var(--bp-text-secondary); }
.bp-text-secondary { color: var(--bp-text-secondary); }

/* --- Кнопки --- */
.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bp-space-2);
  font-family: var(--bp-font); font-weight: 500; font-size: 14px; line-height: 16px;
  padding: 10px 16px; min-height: 40px; border: 1px solid transparent; border-radius: var(--bp-radius);
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; user-select: none;
}
.bp-btn--primary { background: var(--bp-primary); color: var(--bp-on-primary); }
.bp-btn--primary:hover { background: var(--bp-primary-dark); }
.bp-btn--accent { background: var(--bp-accent); color: #FFFFFF; }
.bp-btn--accent:hover { background: var(--bp-accent-dark); }
.bp-btn--secondary { background: var(--bp-surface); color: var(--bp-primary); border-color: var(--bp-border); }
.bp-btn--secondary:hover { background: var(--bp-hover); }
.bp-btn--ghost { background: transparent; color: var(--bp-primary); }
.bp-btn--ghost:hover { background: var(--bp-hover); }
.bp-btn:disabled, .bp-btn[disabled], .bp-btn--disabled {
  background: var(--bp-surface); color: var(--bp-text-disabled); border-color: var(--bp-grey-300);
  cursor: not-allowed; pointer-events: none;
}

/* --- Поля ввода --- */
.bp-input, .bp-textarea, .bp-select {
  width: 100%; font-family: var(--bp-font); font-size: 14px; line-height: 16px; color: var(--bp-text);
  background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-radius);
  padding: 11px 12px; min-height: 40px; transition: border-color .15s, box-shadow .15s; outline: none;
}
.bp-input::placeholder, .bp-textarea::placeholder { color: var(--bp-text-secondary); }
.bp-input:focus, .bp-textarea:focus, .bp-select:focus {
  border-color: var(--bp-primary); box-shadow: 0 0 0 3px var(--bp-primary-light);
}
.bp-input:disabled, .bp-textarea:disabled, .bp-select:disabled {
  background: var(--bp-bg-base); color: var(--bp-text-disabled); cursor: not-allowed;
}
.bp-textarea { min-height: 88px; resize: vertical; }
.bp-input--error { border-color: var(--bp-error); }
.bp-input--error:focus { box-shadow: 0 0 0 3px var(--bp-error-light); }

.bp-field { display: flex; flex-direction: column; gap: var(--bp-space-1); }
.bp-label { font-weight: 500; font-size: 14px; line-height: 16px; color: var(--bp-text); }
.bp-help { font-size: 12px; line-height: 14px; color: var(--bp-text-secondary); }
.bp-help--error { color: var(--bp-error); }

/* --- Select со стрелкой-chevron --- */
.bp-select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2385868A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}

/* --- Чекбокс --- */
.bp-checkbox { display: inline-flex; align-items: center; gap: var(--bp-space-2); cursor: pointer; font-size: 14px; }
.bp-checkbox input { width: 18px; height: 18px; accent-color: var(--bp-primary); cursor: pointer; }

/* --- Карточка --- */
.bp-card {
  background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--bp-radius-lg);
  padding: var(--bp-space-6); box-shadow: var(--bp-shadow-1);
}
.bp-card__title { font-weight: 500; font-size: 20px; line-height: 24px; margin: 0 0 var(--bp-space-3); }

/* --- Таблица --- */
.bp-table { width: 100%; border-collapse: collapse; background: var(--bp-surface); font-size: 14px; }
.bp-table thead th {
  text-align: left; font-weight: 500; color: var(--bp-text-secondary);
  padding: 12px 16px; border-bottom: 1px solid var(--bp-border); background: var(--bp-bg-base);
  white-space: nowrap;
}
.bp-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--bp-border); }
.bp-table tbody tr:hover { background: var(--bp-hover); }
.bp-table--rounded { border: 1px solid var(--bp-border); border-radius: var(--bp-radius); overflow: hidden; }

/* --- Бэйджи / статусы --- */
.bp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; line-height: 16px; font-weight: 500;
}
.bp-badge--primary { background: var(--bp-primary-light); color: var(--bp-primary); }
.bp-badge--success { background: var(--bp-success-light); color: var(--bp-success); }
.bp-badge--error { background: var(--bp-error-light); color: var(--bp-error); }
.bp-badge--warning { background: var(--bp-warning-light); color: #8a6d00; }
.bp-badge--info { background: var(--bp-info-light); color: var(--bp-info); }
.bp-badge--neutral { background: var(--bp-bg-base); color: var(--bp-text-secondary); }

/* --- Утилиты --- */
.bp-stack { display: flex; flex-direction: column; gap: var(--bp-space-4); }
.bp-row { display: flex; align-items: center; gap: var(--bp-space-3); }
.bp-divider { height: 1px; background: var(--bp-border); border: 0; margin: var(--bp-space-4) 0; }
.bp-link { color: var(--bp-primary); text-decoration: none; }
.bp-link:hover { text-decoration: underline; }