/* FILE: /assets/krok/css/krok-modals.css
   ЄДИНИЙ стиль усіх КРОК-модалок — як редизайн логіну/реєстрації (authmodals):
   чиста картка, Ubuntu-заголовок, Raleway-тіло, плоскі зелено-ціанові кнопки,
   заокруглені поля з ціан focus-ring, нейтральний хрестик, єдиний backdrop,
   світла/темна тема. Override-шар: підключається ОСТАННІМ (перед </body>),
   з цільовими !important перекриває розкидані inline-стилі mainhub/design-b/тест.

   УВАГА: у хабі модалки = `.modal > .modal-content` + `.close`;
          у тесті = `.modal > .content` + `.close-x`; плюс кастомні
          `.rm-overlay/.rm-dialog` (результат) і `.dq-modal` (препарат).
          Тому селектори покривають ОБИДВІ структури. */

:root {
  --km-surface: #ffffff;
  --km-surface-2: #f0f6f4;
  --km-ink: #122e2a;
  --km-muted: #4f6b66;
  --km-line: #dde8e5;
  --km-primary: #10b981;
  --km-primary-strong: #0c9f6e;
  --km-on-primary: #ffffff;
  --km-accent: #0891b2;
  --km-danger: #dc2626;
  --km-ring: rgba(8,145,178,.30);
  --km-radius: 18px;
  --km-radius-sm: 10px;
  --km-shadow: 0 24px 60px -22px rgba(13,60,52,.45);
  --km-backdrop: rgba(7,20,18,.55);
  --km-fhead: 'Ubuntu', system-ui, -apple-system, sans-serif;
  --km-fbody: 'Raleway', system-ui, -apple-system, sans-serif;
}
body.dark-mode {
  --km-surface: #121e1c;
  --km-surface-2: #182825;
  --km-ink: #e9f2f0;
  --km-muted: #9db4af;
  --km-line: #243733;
  --km-primary: #2f9e7b;
  --km-primary-strong: #277f64;
  --km-accent: #5fb0c9;
  --km-danger: #f87171;
  --km-shadow: 0 24px 60px -22px rgba(0,0,0,.7);
  --km-backdrop: rgba(0,0,0,.62);
}

/* ── BACKDROP ── */
.modal,
.rm-overlay,
.fc-overlay,
#archSettingsModal {
  background: var(--km-backdrop) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── КАРТКА (обидві структури + кастомні) ── */
.modal > .content,
.modal > .modal-content,
.modal-content,
.rm-dialog,
.fc-dialog,
.asm {
  background: var(--km-surface) !important;
  background-image: none !important;
  color: var(--km-ink) !important;
  border: 1px solid var(--km-line) !important;
  border-radius: var(--km-radius) !important;
  box-shadow: var(--km-shadow) !important;
  font-family: var(--km-fbody) !important;
  padding: clamp(20px, 4vw, 28px) !important;
}

/* ── ЗАГОЛОВОК: Ubuntu, суцільний колір (без градієнт-тексту) ── */
.modal .content > h3,
.modal .modal-content > h3,
.modal-content h3,
.rm-title,
.dq-name,
.asm__title,
.asm h3 {
  font-family: var(--km-fhead) !important;
  font-weight: 700 !important;
  font-size: clamp(19px, 3.4vw, 23px) !important;
  letter-spacing: -.3px !important;
  color: var(--km-ink) !important;
  -webkit-text-fill-color: var(--km-ink) !important;
  background: none !important;
  margin: 0 0 14px !important;
}
.rm-sub, .dq-sub, .modal .content small, .modal-content small, .sim-mode-hint {
  color: var(--km-muted) !important;
  font-family: var(--km-fbody) !important;
}

/* ── ХРЕСТИК (нейтральний квадрат, без обертань) ── */
.close-x,
.close,
.dq-close {
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--km-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--km-line) !important;
  color: var(--km-muted) !important;
  border-radius: 10px !important;
  font-size: 22px !important; line-height: 1 !important;
  transition: background .15s ease, color .15s ease !important;
}
.close-x:hover, .close:hover, .dq-close:hover {
  background: var(--km-surface-2) !important;
  color: var(--km-ink) !important;
  transform: none !important;
}

/* ── ПОЛЯ (як на auth: 1.5px border, радіус, ціан focus) ── */
.modal input[type="text"], .modal input[type="search"], .modal textarea, .modal select,
.modal-content input, .modal-content textarea, .modal-content select,
.rm-dialog input, .asm input, .asm select {
  font-family: var(--km-fbody) !important;
  color: var(--km-ink) !important;
  background: var(--km-surface) !important;
  border: 1.5px solid var(--km-line) !important;
  border-radius: var(--km-radius-sm) !important;
}
.modal input:focus, .modal textarea:focus, .modal select:focus,
.modal-content input:focus, .modal-content textarea:focus {
  outline: none !important;
  border-color: var(--km-accent) !important;
  box-shadow: 0 0 0 4px var(--km-ring) !important;
}

/* ── КНОПКИ ──
   Зелений primary/активний сегмент */
.rm-btn--ok,
.st-btn--primary,
.sim-cat-btn.active,
.sim-mode-btn.active,
.dq-mode.is-active,
.asm__btn--primary,
.modal .content button.primary,
.modal-content button.confirm {
  background: var(--km-primary) !important;
  background-image: none !important;
  color: var(--km-on-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--km-fhead) !important;
  font-weight: 500 !important;
}
.rm-btn--ok:hover, .st-btn--primary:hover,
.dq-mode.is-active:hover, .modal-content button.confirm:hover {
  background: var(--km-primary-strong) !important;
}

/* Ghost / нейтральні */
.rm-btn--ghost,
.st-btn--ghost,
.sim-cat-btn,
.sim-mode-btn,
.dq-mode,
.sim-more-btn,
.asm__btn--ghost {
  background: var(--km-surface) !important;
  background-image: none !important;
  color: var(--km-ink) !important;
  border: 1.5px solid var(--km-line) !important;
  box-shadow: none !important;
  font-family: var(--km-fbody) !important;
}
.rm-btn--ghost:hover, .st-btn--ghost:hover,
.sim-cat-btn:hover, .sim-mode-btn:hover, .dq-mode:hover, .sim-more-btn:hover {
  background: var(--km-surface-2) !important;
}

/* Червоний (семантика: «робота над помилками» / небезпечні дії) — плоский */
.rm-btn--primary,
.fc-ok,
.asm__btn--danger {
  background: var(--km-danger) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--km-fhead) !important;
  font-weight: 500 !important;
}

/* загальна форма всіх кнопок у модалках */
.rm-btn, .st-btn, .sim-cat-btn, .sim-mode-btn, .dq-mode, .sim-more-btn,
.fc-ok, .fc-cancel, .asm__btn {
  border-radius: var(--km-radius-sm) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.rm-btn:hover, .st-btn:hover, .fc-ok:hover { transform: none !important; }

/* ── РЕЗУЛЬТАТ-МОДАЛКА: кільце/стат-кольори лишаємо, але під токени ── */
.rm-stat__v { color: var(--km-ink) !important; }
.rm-stat--ok .rm-stat__v { color: var(--km-primary) !important; }
.rm-stat--bad .rm-stat__v { color: var(--km-danger) !important; }

/* ── МОБІЛЬНИЙ: однаковий bottom-sheet ── */
@media (max-width: 600px) {
  .modal > .content,
  .modal > .modal-content,
  .modal-content,
  .rm-dialog,
  .fc-dialog,
  .asm {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
  }
  .modal, .rm-overlay, .fc-overlay { align-items: flex-end !important; }
}