/* ============================================================================
   brand-theme.css — unified "Vanilla Cream" brand skin for the auth & admin
   pages, so the WHOLE site matches the dashboard instead of a cold-white look.
   Cream canvas (#F9F2DE), warm-ivory surfaces (#FFFBF1), Manrope, purple accents.
   Loaded LAST on login / register / reset-password / admin.
   ============================================================================ */
@import url('/vendor/fonts/brand-fonts.css?v=20260701_local1');

:root,
:root[data-theme="light"] {
  --auth-bg: #F9F2DE !important;
  --auth-card-bg: #FFFBF1 !important;
  --auth-input-bg: #FFFFFF !important;
  --auth-card-border: rgba(124, 58, 237, 0.14) !important;
  --bg-body: #F9F2DE !important;
  --bg-card: #FFFBF1 !important;
}

html,
body {
  background-color: #F9F2DE !important;
  color: #1f2430 !important;
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Auth pages: warm cream canvas. NOTE: minimal.css hard-codes #f8fafc with the
   selector html[data-page="login"][data-theme="light"] body (spec 0,2,2), so we
   must match that exact specificity (and load later) to win. */
html[data-page="login"][data-theme="light"],
html[data-page="register"][data-theme="light"],
html[data-page="reset"][data-theme="light"],
html[data-page="reset-password"][data-theme="light"] {
  background: #F9F2DE !important;
}
html[data-page="login"][data-theme="light"] body,
html[data-page="register"][data-theme="light"] body,
html[data-page="reset"][data-theme="light"] body,
html[data-page="reset-password"][data-theme="light"] body {
  background:
    radial-gradient(ellipse 820px 460px at 18% -12%, rgba(139, 92, 246, 0.08), transparent 70%),
    radial-gradient(ellipse 640px 380px at 84% 112%, rgba(124, 58, 237, 0.06), transparent 65%),
    #F9F2DE !important;
  color: #1f2430 !important;
}
html[data-page="login"][data-theme="light"] .ambient-background,
html[data-page="register"][data-theme="light"] .ambient-background,
html[data-page="reset"][data-theme="light"] .ambient-background,
html[data-page="reset-password"][data-theme="light"] .ambient-background {
  background: transparent !important;
}

/* Auth card → warm ivory, soft purple outline + gentle glow (matches dashboard).
   Bare selectors (no html[data-page] requirement — some auth pages don't set it). */
body .auth-card,
body .login-card,
body .register-card,
body .reset-card,
body .auth-box,
.login-card, .register-card, .reset-card, .auth-card, .auth-box {
  background: #FFFBF1 !important;
  background-image: none !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.06),
              0 16px 44px -18px rgba(124, 58, 237, 0.22) !important;
}

/* Inputs: clean white on the ivory card. */
.auth-input,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"] {
  background: #FFFFFF !important;
}

/* Keep the mono brand wordmark as the logo signature. */
.matrixe-wordmark,
[class*="wordmark"] {
  font-family: 'Ubuntu Mono', 'Courier New', monospace !important;
}

/* ── Admin panel: cream canvas + warm-ivory surfaces (uses dashboard-new.css) ── */
body .main,
body .admin-container,
body .admin-section {
  background-color: transparent !important;
}
body .admin-card,
body .admin-section > .card,
body .prompt-card,
body .pc-card,
body .modal-content,
body .uv-table,
body .glass-input {
  background-color: #FFFBF1 !important;
}
/* Admin header / top bar warm glass */
body .admin-header,
body header.top-header {
  background-color: rgba(255, 251, 241, 0.82) !important;
}

/* FIX "names visible only on hover": prompt/section titles use a WHITE
   gradient text-fill (designed for a dark theme) → invisible on the light
   cream cards, only a hover rule reveals a colour. Force a solid dark fill so
   they're always readable. (admin.html doesn't load chat-polish/app-redesign
   that already fix this on the dashboard.) */
body .prompt-card h3,
body .prompt-card .pc-title,
body .prompt-card-title,
body .pc-title,
body .admin-section h3,
body .admin-card h3,
body .prompt-card h2,
body .prompt-item h3 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #1f2430 !important;
  color: #1f2430 !important;
}
/* The prompt preview / meta text stays muted but readable. */
body .prompt-card .pc-preview,
body .prompt-card .pc-meta {
  color: #5b6472 !important;
  -webkit-text-fill-color: #5b6472 !important;
}

/* [P2] QA-fix: Настройки → «Пакеты пополнения». `#packagesListSettings{display:grid}`
   раскладывал 3 пакета в ряд по ~340px внутри узкой (400px) админ-карточки → пакеты
   2–3 вылезали за карточку и накрывали соседнюю колонку. Ставим одну колонку — пакеты
   стекаются вертикально и остаются внутри карточки. (brand-theme.css грузится только на
   admin, поэтому дашбордный широкий вариант этого списка не затрагивается.) */
body #packagesListSettings {
  grid-template-columns: 1fr !important;
}
body #packagesListSettings > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* [P2] QA-fix (mobile): Настройки → «Динамические тарифы». Шапка карточки (заголовок
   + кнопка #addTierBtn «Добавить уровень», flex nowrap, кнопка flex-shrink:0 шириной
   ~203px) не влезала на узкий экран → кнопка уезжала за правый край и обрезалась.
   Плюс экшены тарифных строк (.atc-actions) переполнялись. На мобиле разрешаем шапке
   и строкам переноситься, а кнопкам — ужиматься/уходить под заголовок. */
@media (max-width: 900px) {
  /* Any flex row in settings that holds a button — card headers (Добавить уровень /
     Добавить пакет) and card footers (Сохранить + Начислить сейчас всем) — wraps so
     wide buttons drop to their own line instead of running off the right edge. */
  body #settingsSection *:has(> .btn),
  body #settingsSection *:has(> button) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body #settingsSection #addTierBtn,
  body #settingsSection .btn.small,
  body #settingsSection .btn.secondary {
    flex-shrink: 1 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  body #settingsSection .atc-content,
  body #settingsSection .atc-main-row,
  body #settingsSection .atc-actions {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  body #settingsSection .atc-actions { justify-content: flex-start !important; }
}