/* ============================================================
   Babiators theme — альтернативная дизайн-система админки.
   Активируется классом body.theme-babiators.
   Палитра и шрифт взяты напрямую с babiators.com:
     - Navy #2F2E7C (brand primary)
     - Royal Blue #003DA5 (CTA)
     - Yellow #FEED76, Sky #7FBEEB, Pink #FF8DD9, Mint #9AD1C3
     - Cream #F8F6EA, Text gray #757676
     - Font: Inter как замена Euclid Circular B
   Следует правилам DESIGN.md (playful hover, generous radius,
   swatch-секции, uppercase labels), но в брендовых цветах.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

body.theme-babiators {
  /* === Брендовая палитра === */
  --bab-navy: #2F2E7C;
  --bab-navy-deep: #1F1E54;
  --bab-navy-soft: rgba(47, 46, 124, 0.08);
  --bab-royal: #003DA5;
  --bab-royal-hover: #002A7A;

  --bab-yellow: #FEED76;
  --bab-yellow-strong: #F8E200;
  --bab-sky: #7FBEEB;
  --bab-sky-light: #ABDFF1;
  --bab-pink: #FF8DD9;
  --bab-mint: #9AD1C3;

  --bab-white: #FFFFFF;
  --bab-cream: #F8F6EA;
  --bab-cream-2: #F3F0E0;
  --bab-border: #E7E4D4;
  --bab-border-soft: #EFEDDF;
  --bab-text: #0B0A2A;
  --bab-text-muted: #757676;
  --bab-text-soft: #9A9A9A;

  --bab-shadow: 0 1px 2px rgba(15, 14, 60, 0.06), 0 4px 12px rgba(15, 14, 60, 0.05);
  --bab-shadow-hover: -6px 6px 0 var(--bab-navy);

  /* === Глобальные токены === */
  --color-bg: var(--bab-white);
  --color-bg-page: var(--bab-cream);
  --color-text: var(--bab-text);
  --color-text-secondary: var(--bab-text-muted);
  --color-text-muted: var(--bab-text-soft);
  --color-border: var(--bab-border);
  --color-border-light: var(--bab-border-soft);
  --color-border-focus: var(--bab-royal);

  --color-accent: var(--bab-navy);
  --color-accent-hover: var(--bab-navy-deep);
  --color-accent-light: #ECEBF6;
  --color-accent-50: var(--bab-navy-soft);

  --sidebar-bg: var(--bab-navy);
  --sidebar-text: #BFBEE2;
  --sidebar-active: var(--bab-yellow);
  --sidebar-hover: rgba(255, 255, 255, 0.08);

  --color-success: #1F8A5E;
  --color-success-bg: #E8F5EE;
  --color-success-border: var(--bab-mint);
  --color-error: #C5283D;
  --color-error-bg: #FDE8EB;
  --color-error-border: var(--bab-pink);
  --color-warning: #8A6A00;
  --color-warning-bg: #FFF8D6;
  --color-warning-border: var(--bab-yellow-strong);
  --color-info: var(--bab-royal);
  --color-info-bg: #E6EFFA;
  --color-info-border: var(--bab-sky-light);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-btn: 9999px;

  --font-family: 'Inter', 'Euclid Circular B', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  font-family: var(--font-family);
  font-feature-settings: "ss01", "cv11";
  background: var(--bab-cream);
  color: var(--bab-text);
}

body.theme-babiators .page-bg,
body.theme-babiators .admin-layout { background: var(--bab-cream); }

/* === Заголовки === */
body.theme-babiators h1,
body.theme-babiators h2,
body.theme-babiators h3,
body.theme-babiators h4 {
  font-family: var(--font-family);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--bab-navy);
}

/* === Сайдбар: navy с cream активным пунктом === */
body.theme-babiators .sidebar {
  background: var(--bab-navy);
  border-right: none;
}
body.theme-babiators .sidebar-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 28px 24px 24px;
}
body.theme-babiators .sidebar-brand-icon {
  width: 180px;
  height: 24px;
  background: #fff;
  -webkit-mask: url('/assets/babiators-logo.svg') left center / contain no-repeat;
          mask: url('/assets/babiators-logo.svg') left center / contain no-repeat;
  border-radius: 0;
  box-shadow: none;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}
body.theme-babiators .sidebar-brand-text { display: none; }
body.theme-babiators .sidebar-brand-sub {
  color: var(--bab-sky-light);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}
body.theme-babiators .sidebar-section {
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 10px;
}
body.theme-babiators .nav-item {
  color: #BFBEE2;
  border-radius: 9999px;
  font-weight: 500;
  padding: 11px 16px;
}
body.theme-babiators .nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
body.theme-babiators .nav-item.active {
  background: var(--bab-yellow);
  color: var(--bab-navy);
  font-weight: 700;
  box-shadow: -3px 3px 0 rgba(0,0,0,0.2);
}
body.theme-babiators .nav-item.active .nav-icon { color: var(--bab-navy); opacity: 1; }
body.theme-babiators .nav-icon { opacity: 0.65; }
body.theme-babiators .nav-item-badge {
  background: var(--bab-pink);
  color: var(--bab-navy);
  font-weight: 800;
  border-radius: 9999px;
}
body.theme-babiators .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}
body.theme-babiators .sidebar-avatar {
  background: var(--bab-pink);
  color: var(--bab-navy);
  border: 2px solid #fff;
  font-weight: 800;
}
body.theme-babiators .sidebar-user-name { color: #fff; }
body.theme-babiators .sidebar-user-role {
  color: var(--bab-sky-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 10px;
}
body.theme-babiators .sidebar-logout { color: var(--bab-sky-light); }
body.theme-babiators .sidebar-logout:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* === Topbar === */
body.theme-babiators .admin-topbar {
  background: var(--bab-cream);
  border-bottom: 1px solid var(--bab-border);
}
body.theme-babiators .admin-topbar h1 {
  letter-spacing: -0.025em;
  color: var(--bab-navy);
  font-weight: 700;
}
body.theme-babiators .topbar-time {
  font-family: var(--font-mono);
  color: var(--bab-text-muted);
  font-size: 11px;
}

/* === Кнопки: pill + playful hard-offset shadow === */
body.theme-babiators .btn {
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  box-shadow: var(--bab-shadow);
}
body.theme-babiators .btn:hover:not(:disabled) {
  transform: rotateZ(-2deg) translateY(-2px);
  box-shadow: var(--bab-shadow-hover);
}
body.theme-babiators .btn-primary {
  background: var(--bab-navy);
  color: #fff;
  border-color: var(--bab-navy);
}
body.theme-babiators .btn-primary:hover:not(:disabled) {
  background: var(--bab-royal);
  color: #fff;
}
body.theme-babiators .btn-secondary {
  background: var(--bab-white);
  color: var(--bab-navy);
  border: 1px solid var(--bab-navy);
}
body.theme-babiators .btn-secondary:hover:not(:disabled) {
  background: var(--bab-yellow);
  color: var(--bab-navy);
  border-color: var(--bab-navy);
}
body.theme-babiators .btn-ghost {
  background: var(--bab-white);
  color: var(--bab-navy);
  border: 1px solid var(--bab-border);
  box-shadow: none;
}
body.theme-babiators .btn-ghost:hover:not(:disabled) {
  background: var(--bab-sky-light);
  color: var(--bab-navy);
  border-color: var(--bab-navy);
  box-shadow: var(--bab-shadow-hover);
}
body.theme-babiators .btn-danger {
  background: var(--bab-pink);
  color: var(--bab-navy);
}
body.theme-babiators .btn-success {
  background: var(--bab-mint);
  color: var(--bab-navy);
}
body.theme-babiators .btn-link {
  background: none;
  box-shadow: none;
  color: var(--bab-royal);
  text-decoration: underline;
}
body.theme-babiators .btn-link:hover { transform: none; box-shadow: none; }

/* === Поля ввода === */
body.theme-babiators .input,
body.theme-babiators .select,
body.theme-babiators .textarea {
  background: var(--bab-white);
  border: 1px solid var(--bab-border);
  border-radius: 10px;
  font-family: var(--font-family);
  color: var(--bab-text);
}
body.theme-babiators .input:focus,
body.theme-babiators .select:focus,
body.theme-babiators .textarea:focus {
  border-color: var(--bab-royal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.15);
}

/* === Карточки === */
body.theme-babiators .card,
body.theme-babiators .table-wrap,
body.theme-babiators .stat-card,
body.theme-babiators .ai-card,
body.theme-babiators .operator-form,
body.theme-babiators .product-form {
  background: var(--bab-white);
  border: 1px solid var(--bab-border);
  border-radius: 20px;
  box-shadow: var(--bab-shadow);
}
body.theme-babiators .ai-card { background: var(--bab-cream-2); }

/* === Stat cards: каждая в своём брендовом swatch === */
body.theme-babiators .stat-card {
  border-left: 1px solid var(--bab-border);
  padding: 24px;
  position: relative;
}
body.theme-babiators .stat-card--warning {
  background: var(--bab-yellow);
  border-color: var(--bab-navy);
}
body.theme-babiators .stat-card--success {
  background: var(--bab-mint);
  border-color: var(--bab-navy);
}
body.theme-babiators .stat-card--info {
  background: var(--bab-sky);
  border-color: var(--bab-navy);
}
body.theme-babiators .stat-card--error {
  background: var(--bab-pink);
  border-color: var(--bab-navy);
}
body.theme-babiators .stat-card-icon {
  background: var(--bab-white);
  color: var(--bab-navy);
  border: 1.5px solid var(--bab-navy);
  border-radius: 9999px;
}
body.theme-babiators .stat-card-label {
  color: var(--bab-navy);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
}
body.theme-babiators .stat-card-value {
  color: var(--bab-navy);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.04em;
}

/* === Dashboard карточки === */
body.theme-babiators .dashboard-card {
  background: var(--bab-white);
  border: 1px solid var(--bab-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--bab-shadow);
}
body.theme-babiators .dashboard-card .table-wrap {
  border: 1px dashed var(--bab-border);
  box-shadow: none;
  border-radius: 12px;
}
body.theme-babiators .dashboard-card-header h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--bab-navy);
}

/* === Таблицы === */
body.theme-babiators .table { font-family: var(--font-family); }
body.theme-babiators .table th {
  background: var(--bab-cream-2);
  color: var(--bab-navy);
  border-bottom: 1px solid var(--bab-border);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
}
body.theme-babiators .table td {
  border-bottom: 1px solid var(--bab-border-soft);
  color: var(--bab-text);
}
body.theme-babiators .table tbody tr:hover {
  background: var(--bab-cream-2);
}
body.theme-babiators .td-mono { font-family: var(--font-mono); }
body.theme-babiators .td-sub { color: var(--bab-text-muted); }

/* === Бейджи === */
body.theme-babiators .badge {
  border-radius: 9999px;
  border: 1px solid var(--bab-navy);
  padding: 3px 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: 10px;
}
body.theme-babiators .badge::before { display: none; }
body.theme-babiators .badge-success {
  background: var(--bab-mint);
  color: var(--bab-navy);
}
body.theme-babiators .badge-warning {
  background: var(--bab-yellow);
  color: var(--bab-navy);
}
body.theme-babiators .badge-error {
  background: var(--bab-pink);
  color: var(--bab-navy);
}
body.theme-babiators .badge-info {
  background: var(--bab-sky);
  color: var(--bab-navy);
}
body.theme-babiators .badge-pending {
  background: var(--bab-cream-2);
  color: var(--bab-navy);
  border-style: dashed;
}

/* === Алерты === */
body.theme-babiators .alert {
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  font-weight: 500;
}

/* === Модалки === */
body.theme-babiators .modal-overlay {
  background: rgba(47, 46, 124, 0.35);
}
body.theme-babiators .modal-content {
  background: var(--bab-cream);
  border: 1px solid var(--bab-border);
  border-radius: 20px;
  box-shadow: -8px 8px 0 var(--bab-navy), 0 20px 60px -10px rgba(15, 14, 60, 0.25);
}
body.theme-babiators .modal-header {
  border-bottom: 1px solid var(--bab-border);
}
body.theme-babiators .modal-header h3 { color: var(--bab-navy); }
body.theme-babiators .modal-footer {
  background: var(--bab-cream-2);
  border-top: 1px solid var(--bab-border);
  border-radius: 0 0 20px 20px;
}
body.theme-babiators .modal-close {
  background: var(--bab-white);
  border: 1px solid var(--bab-navy);
  border-radius: 9999px;
  color: var(--bab-navy);
}
body.theme-babiators .modal-close:hover {
  background: var(--bab-yellow);
  color: var(--bab-navy);
}

/* === Drop zone импорта === */
body.theme-babiators .import-drop-zone {
  border: 2px dashed var(--bab-navy);
  border-radius: 20px;
  background: var(--bab-cream-2);
}
body.theme-babiators .import-drop-zone:hover {
  border-color: var(--bab-royal);
  background: var(--bab-sky-light);
}

/* === Detail блок === */
body.theme-babiators .detail-section-title {
  color: var(--bab-navy);
  letter-spacing: 0.12em;
  font-weight: 700;
  border-bottom: 1px solid var(--bab-border);
  text-transform: uppercase;
  font-size: 10px;
}
body.theme-babiators .detail-item-label {
  color: var(--bab-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
}
body.theme-babiators .detail-item-value { color: var(--bab-text); }

/* === AI чеки === */
body.theme-babiators .ai-check-pass {
  background: var(--bab-mint);
  color: var(--bab-navy);
  border: 1px solid var(--bab-navy);
}
body.theme-babiators .ai-check-fail {
  background: var(--bab-pink);
  color: var(--bab-navy);
  border: 1px solid var(--bab-navy);
}

/* === Login экран === */
body.theme-babiators .admin-login {
  background: linear-gradient(135deg, var(--bab-navy) 0%, var(--bab-navy-deep) 50%, var(--bab-navy) 100%);
}
body.theme-babiators .admin-login::before {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(254, 237, 118, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(255, 141, 217, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(127, 190, 235, 0.15) 0%, transparent 50%);
}
body.theme-babiators .admin-login-card { padding: 24px; }
body.theme-babiators .login-brand-icon {
  width: 260px;
  height: 32px;
  background: #fff;
  -webkit-mask: url('/assets/babiators-logo.svg') center / contain no-repeat;
          mask: url('/assets/babiators-logo.svg') center / contain no-repeat;
  border-radius: 0;
  border: none;
  box-shadow: none;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  margin: 0 auto var(--spacing-5);
}
body.theme-babiators .admin-login-header h1 {
  display: none;
}
body.theme-babiators .admin-login-header p {
  color: var(--bab-sky-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
}
body.theme-babiators .login-form-card {
  background: var(--bab-white);
  border: 1px solid var(--bab-border);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-babiators .login-form-card .form-label {
  color: var(--bab-navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}
body.theme-babiators .login-form-card .input {
  background: var(--bab-cream);
  border: 1px solid var(--bab-border);
  color: var(--bab-text);
  border-radius: 10px;
}
body.theme-babiators .login-form-card .input::placeholder {
  color: var(--bab-text-soft);
}
body.theme-babiators .login-form-card .input:focus {
  border-color: var(--bab-royal);
  background: var(--bab-white);
  box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.15);
}
body.theme-babiators .login-form-card .btn-primary {
  background: var(--bab-navy);
  color: #fff;
  border-radius: 9999px;
}
body.theme-babiators .login-form-card .alert {
  background: #fde8eb;
  border-color: var(--bab-pink);
  color: #7a0f1d;
}

/* === Soft lock === */
body.theme-babiators .soft-lock {
  background: var(--bab-yellow);
  border: 1px solid var(--bab-navy);
  border-radius: 12px;
  color: var(--bab-navy);
  font-weight: 600;
}

/* === Tracking inline === */
body.theme-babiators .tracking-inline .input {
  border-radius: 8px;
  border-color: var(--bab-border);
}

/* ============================================================
   Theme switcher
   ============================================================ */
body.theme-babiators .theme-switch {
  background: var(--bab-white);
  border: 1px solid var(--bab-navy);
  border-radius: 9999px;
  box-shadow: -2px 2px 0 var(--bab-navy);
}
body.theme-babiators .theme-switch-btn {
  font-family: var(--font-family);
  color: var(--bab-navy);
  font-weight: 600;
}
body.theme-babiators .theme-switch-btn.active {
  background: var(--bab-navy);
  color: var(--bab-yellow);
}