/* ECOFACTOR ID — service-specific styles
 *
 * Tokens, typography, .btn / .card / .input / .badge / .table / .nav-item
 * + .msg / .divider / .link / .btn-block / .ef-btn-spinner come from the
 * design-system canonical via runtime CDN <link> in templates.
 *
 * Layer: Internal Platform (theme-platform, Roboto, light default).
 *
 * Phase A.4 cutover (2026-05-08): auth pages (.page, .container,
 * .card.card-auth*, .btn-oauth, .otp-*, .footer, password-policy,
 * utility helpers, * box-sizing reset) теперь приходят из canonical
 * presets/layouts/auth-centered.css через templates/_design-system/auth/
 * centered.html.j2 extends. Раніше дублировались тут ~280 строк — drop'нуто.
 *
 * Этот файл оставляет ТОЛЬКО:
 *   - admin-only стили (.admin-page, .admin-section, .stat-card, .stats-grid)
 *   - lang-switcher chrome (defensive — ID's i18n.js renders dropdown
 *     using these classes; canonical EcoI18n.injectStyles() also injects
 *     equivalent rules but consumer-side keep keeps admin pages safe)
 *   - .form-group / .form-label legacy (admin/profile.html, admin/services.html
 *     and admin/auth_methods.html still reference these — pending separate
 *     migration на canonical .field/.field__label)
 *   - utility helpers (.hidden, .text-center, .text-sm, .mt-*, .mb-*) —
 *     used by admin pages which don't load auth-centered.css
 *   - .password-policy chrome (admin/auth_methods.html uses it; future
 *     promotion to base.css would let auth-centered.css drop too)
 */

@import url("https://id.ecofactortech.com/ds/v0.2/presets/base.css");

/* ── Form field stack (legacy — admin pages) ─────────────────────────
   Admin pages (profile.html, services.html, auth_methods.html) still use
   .form-group / .form-label markup. Canonical migration к .field/.field__label
   планируется отдельно. */

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.form-group > .input {
  width: 100%;
}

/* ── Admin dashboard — page layout (Internal Platform pattern) ───────
   .admin-page is a transparent JS-gating wrapper (auth-check / admin-content
   reveal). canonical .page-content (parent) already provides width 100%
   and 12×24 padding — .admin-page should NOT add max-width/margin/padding,
   tables go to viewport edge как в Sandbox (Volodymyr feedback 2026-05-10). */
.admin-page {
  width: 100%;
}

/* Tightened to canonical card chrome dialect (Volodymyr feedback 2026-05-10):
   12px radius (was 16), 20px padding (was 24), 12px gap (was 24),
   1px+ring shadow (was heavier 0 4px 10px). Matches .filter-bar /
   .table-card / .pagination в canonical internal-platform-compact.css. */
.admin-section {
  background: var(--surface-1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.admin-section__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* KPI cards — design-system uses .card; this is a per-tile variant */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* 2-column section grid — wrap pairs of .profile-section / .admin-section to
   sit side-by-side on wide viewports (each section has small content, so
   stretching to full width wastes space — Volodymyr feedback 2026-05-10
   /admin/me). Stacks back to single column under 900px so card content
   stays readable. */
.section-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
/* Stack at 1100px (was 900px). Below 1100 each pair-half is < 350px,
   too narrow for .profile-row's label + value + Edit chrome — values
   wrapped char-by-char. Stacking single-col below 1100 gives each
   section full content width, which renders cleanly. */
@media (max-width: 1100px) {
  .section-grid-2col { grid-template-columns: 1fr; }
}
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--outline-secondary);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}
.stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-action);
  line-height: 1.1;
}
.stat-card__label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ── Language switcher (Pulse-style dropdown) ──────────────────────── */

.lang-switcher {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}
.lang-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.lang-switcher-trigger:hover {
  background: var(--state-hover-overlay);
}
.lang-switcher-trigger .flag-icon {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.lang-switcher-trigger .chevron {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast);
}
.lang-switcher.open .chevron {
  transform: rotate(180deg);
}
.lang-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  background: var(--surface-1);
  border: 1px solid var(--outline-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}
.lang-switcher.open .lang-dropdown {
  display: block;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast);
}
.lang-option:hover {
  background: var(--surface-2);
}
.lang-option.active {
  color: var(--text-action);
  font-weight: 600;
}
.lang-option .flag-icon {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.lang-option__native {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 400;
}
.lang-option.active .lang-option__native {
  color: var(--text-action);
}

/* ── Utility helpers (used by admin pages — auth pages get them
       from canonical auth-centered.css) ────────────────────────── */

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-sm { font-size: 13px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* ── Password policy helper (static/js/password_policy.js)
       Used by admin/auth_methods.html (ID-side password change) plus
       canonical auth pages (which also have it via auth-centered.css —
       duplicate is harmless). Future: promote to base.css so single
       source covers both contexts. ─────────────────────────────── */

.password-policy { margin-top: 10px; font-size: 13px; }
.password-policy__row {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.password-policy__gen,
.password-policy__toggle {
  padding: 6px 10px; font-size: 12px; line-height: 1.2;
}
.password-policy__rules { list-style: none; padding: 0; margin: 0; }
.password-policy__rule {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.4;
  transition: color .15s;
}
.password-policy__mark {
  display: inline-block; width: 16px;
  text-align: center; font-weight: 600;
  color: var(--text-tertiary);
}
.password-policy__rule.is-ok { color: var(--container-success); }
.password-policy__rule.is-ok .password-policy__mark { color: var(--container-success); }