/* ============================================================
   Brand DS theme — основана на официальной дизайн-системе Babiators.
   Активируется классом body.theme-ds.
   Палитра и шрифты из design-system/babiators/tokens.css:
     - Vibrant Blue #003DA5 (primary)
     - Aqua #00BFB2 (accent)
     - Tangerine #FF6A39 (warm CTA)
     - Baby Blue #87D1E6, Blush #FF585D, Yellow #F8E200
     - Cream #F0EFDD (bg)
     - Font: Plus Jakarta Sans, Space Mono
   ============================================================ */

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

body.theme-ds {
  /* === Брендовая палитра (Official DS) === */
  --ds-blue:              #003DA5;
  --ds-blue-deep:         #243A74;
  --ds-blue-light:        #2E61AE;
  --ds-blue-soft:         rgba(0, 61, 165, 0.08);

  --ds-aqua:              #00BFB2;
  --ds-aqua-dark:         #009191;
  --ds-aqua-light:        #4CC1BC;
  --ds-tangerine:         #FF6A39;
  --ds-tangerine-dark:    #E13E26;
  --ds-tangerine-light:   #F58663;
  --ds-baby-blue:         #87D1E6;
  --ds-baby-blue-light:   #ABDFF1;
  --ds-blush:             #FF585D;
  --ds-blush-light:       #F4848C;
  --ds-yellow:            #F8E200;
  --ds-yellow-light:      #FEED76;

  --ds-white:             #FFFFFF;
  --ds-cream:             #F0EFDD;
  --ds-cream-light:       #FAFBF7;
  --ds-border:            #E2DED9;
  --ds-border-soft:       #EDEBE5;
  --ds-text:              #2C2A27;
  --ds-text-muted:        #6B6966;
  --ds-text-soft:         #9A9793;

  --ds-shadow:            0 2px 8px rgba(0, 61, 165, 0.06), 0 4px 16px rgba(0, 61, 165, 0.06);
  --ds-shadow-hover:      0 8px 32px rgba(0, 61, 165, 0.12);
  --ds-shadow-color:      0 4px 20px rgba(0, 191, 178, 0.2);

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

  --color-accent:         var(--ds-blue);
  --color-accent-hover:   var(--ds-blue-deep);
  --color-accent-light:   rgba(0, 61, 165, 0.06);
  --color-accent-50:      var(--ds-blue-soft);

  --sidebar-bg:           var(--ds-blue);
  --sidebar-text:         rgba(255, 255, 255, 0.7);
  --sidebar-active:       var(--ds-aqua);
  --sidebar-hover:        rgba(255, 255, 255, 0.1);

  --color-success:        #009191;
  --color-success-bg:     #E4F6F4;
  --color-success-border: var(--ds-aqua-light);
  --color-error:          #C5283D;
  --color-error-bg:       #FDE8EB;
  --color-error-border:   var(--ds-blush-light);
  --color-warning:        #8A6A00;
  --color-warning-bg:     #FFF8D6;
  --color-warning-border: var(--ds-yellow);
  --color-info:           var(--ds-blue);
  --color-info-bg:        #E6F0FA;
  --color-info-border:    var(--ds-baby-blue-light);

  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-btn:           999px;

  --font-family:          'Plus Jakarta Sans', 'Euclid Circular A', system-ui, sans-serif;
  --font-mono:            'Space Mono', 'GT Maru Mono', monospace;

  font-family: var(--font-family);
  background: var(--ds-cream);
  color: var(--ds-text);
}

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

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

/* === Сайдбар: Vibrant Blue с Aqua акцентом === */
body.theme-ds .sidebar {
  background: var(--ds-blue);
  border-right: none;
}
body.theme-ds .sidebar-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 28px 24px 24px;
}
body.theme-ds .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-ds .sidebar-brand-text { display: none; }
body.theme-ds .sidebar-brand-sub {
  color: var(--ds-baby-blue-light);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-family: var(--font-mono);
}
body.theme-ds .sidebar-section {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 10px;
  font-family: var(--font-mono);
}
body.theme-ds .nav-item {
  color: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-weight: 500;
  padding: 11px 16px;
}
body.theme-ds .nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.theme-ds .nav-item.active {
  background: var(--ds-aqua);
  color: var(--ds-blue);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 191, 178, 0.3);
}
body.theme-ds .nav-item.active .nav-icon { color: var(--ds-blue); opacity: 1; }
body.theme-ds .nav-icon { opacity: 0.6; }
body.theme-ds .nav-item-badge {
  background: var(--ds-tangerine);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
}
body.theme-ds .sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
body.theme-ds .sidebar-avatar {
  background: var(--ds-aqua);
  color: var(--ds-blue);
  border: 2px solid #fff;
  font-weight: 800;
}
body.theme-ds .sidebar-user-name { color: #fff; }
body.theme-ds .sidebar-user-role {
  color: var(--ds-baby-blue-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 10px;
  font-family: var(--font-mono);
}
body.theme-ds .sidebar-logout { color: var(--ds-baby-blue-light); }
body.theme-ds .sidebar-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

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

/* === Кнопки: pill + мягкий hover === */
body.theme-ds .btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.2s ease;
  box-shadow: var(--ds-shadow);
}
body.theme-ds .btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-hover);
}
body.theme-ds .btn-primary {
  background: var(--ds-blue);
  color: #fff;
  border-color: var(--ds-blue);
}
body.theme-ds .btn-primary:hover:not(:disabled) {
  background: var(--ds-blue-deep);
  color: #fff;
}
body.theme-ds .btn-secondary {
  background: var(--ds-aqua);
  color: #fff;
  border: 1px solid var(--ds-aqua);
}
body.theme-ds .btn-secondary:hover:not(:disabled) {
  background: var(--ds-aqua-dark);
  color: #fff;
  border-color: var(--ds-aqua-dark);
}
body.theme-ds .btn-ghost {
  background: var(--ds-white);
  color: var(--ds-blue);
  border: 1px solid var(--ds-border);
  box-shadow: none;
}
body.theme-ds .btn-ghost:hover:not(:disabled) {
  background: var(--ds-cream);
  color: var(--ds-blue);
  border-color: var(--ds-blue);
  box-shadow: var(--ds-shadow);
}
body.theme-ds .btn-danger {
  background: var(--ds-blush);
  color: #fff;
}
body.theme-ds .btn-success {
  background: var(--ds-aqua);
  color: #fff;
}
body.theme-ds .btn-link {
  background: none;
  box-shadow: none;
  color: var(--ds-blue);
  text-decoration: underline;
}
body.theme-ds .btn-link:hover { transform: none; box-shadow: none; }

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

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

/* === Stat cards: DS-палитра === */
body.theme-ds .stat-card {
  border-left: 1px solid var(--ds-border);
  padding: 24px;
  position: relative;
}
body.theme-ds .stat-card--warning {
  background: linear-gradient(135deg, #FFF8D6 0%, #FEFCE8 100%);
  border-color: var(--ds-yellow);
}
body.theme-ds .stat-card--success {
  background: linear-gradient(135deg, #E4F6F4 0%, #F0FBF9 100%);
  border-color: var(--ds-aqua-light);
}
body.theme-ds .stat-card--info {
  background: linear-gradient(135deg, #E6F0FA 0%, #F0F6FC 100%);
  border-color: var(--ds-baby-blue);
}
body.theme-ds .stat-card--error {
  background: linear-gradient(135deg, #FDE8EB 0%, #FFF0F1 100%);
  border-color: var(--ds-blush-light);
}
body.theme-ds .stat-card-icon {
  background: var(--ds-white);
  color: var(--ds-blue);
  border: 1.5px solid var(--ds-border);
  border-radius: 12px;
}
body.theme-ds .stat-card-label {
  color: var(--ds-text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: var(--font-mono);
}
body.theme-ds .stat-card-value {
  color: var(--ds-blue);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.04em;
}

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

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

/* === Бейджи === */
body.theme-ds .badge {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 3px 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: 10px;
}
body.theme-ds .badge::before { display: none; }
body.theme-ds .badge-success {
  background: #E4F6F4;
  color: var(--ds-aqua-dark);
  border-color: var(--ds-aqua-light);
}
body.theme-ds .badge-warning {
  background: #FFF8D6;
  color: #8A6A00;
  border-color: var(--ds-yellow);
}
body.theme-ds .badge-error {
  background: #FDE8EB;
  color: var(--ds-tangerine-dark);
  border-color: var(--ds-blush-light);
}
body.theme-ds .badge-info {
  background: #E6F0FA;
  color: var(--ds-blue);
  border-color: var(--ds-baby-blue-light);
}
body.theme-ds .badge-pending {
  background: var(--ds-cream-light);
  color: var(--ds-text-muted);
  border-color: var(--ds-border);
  border-style: dashed;
}

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

/* === Модалки === */
body.theme-ds .modal-overlay {
  background: rgba(0, 61, 165, 0.25);
  backdrop-filter: blur(4px);
}
body.theme-ds .modal-content {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px -10px rgba(0, 61, 165, 0.2);
}
body.theme-ds .modal-header {
  border-bottom: 1px solid var(--ds-border);
}
body.theme-ds .modal-header h3 { color: var(--ds-blue); }
body.theme-ds .modal-footer {
  background: var(--ds-cream-light);
  border-top: 1px solid var(--ds-border);
  border-radius: 0 0 20px 20px;
}
body.theme-ds .modal-close {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  color: var(--ds-text-muted);
}
body.theme-ds .modal-close:hover {
  background: var(--ds-cream);
  color: var(--ds-blue);
  border-color: var(--ds-blue);
}

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

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

/* === AI чеки === */
body.theme-ds .ai-check-pass {
  background: #E4F6F4;
  color: var(--ds-aqua-dark);
  border: 1px solid var(--ds-aqua-light);
}
body.theme-ds .ai-check-fail {
  background: #FDE8EB;
  color: var(--ds-tangerine-dark);
  border: 1px solid var(--ds-blush-light);
}

/* === Login экран === */
body.theme-ds .admin-login {
  background: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-blue-deep) 50%, #1A2D5C 100%);
}
body.theme-ds .admin-login::before {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(0, 191, 178, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(255, 106, 57, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(135, 209, 230, 0.15) 0%, transparent 50%);
}
body.theme-ds .admin-login-card { padding: 24px; }
body.theme-ds .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-ds .admin-login-header h1 {
  display: none;
}
body.theme-ds .admin-login-header p {
  color: var(--ds-baby-blue-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
body.theme-ds .login-form-card {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-ds .login-form-card .form-label {
  color: var(--ds-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-family: var(--font-mono);
}
body.theme-ds .login-form-card .input {
  background: var(--ds-cream-light);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: 12px;
}
body.theme-ds .login-form-card .input::placeholder {
  color: var(--ds-text-soft);
}
body.theme-ds .login-form-card .input:focus {
  border-color: var(--ds-blue);
  background: var(--ds-white);
  box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.12);
}
body.theme-ds .login-form-card .btn-primary {
  background: var(--ds-blue);
  color: #fff;
  border-radius: 999px;
}
body.theme-ds .login-form-card .alert {
  background: #fde8eb;
  border-color: var(--ds-blush-light);
  color: #7a0f1d;
}

/* === Soft lock === */
body.theme-ds .soft-lock {
  background: var(--ds-aqua);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
}

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

/* ============================================================
   Theme switcher
   ============================================================ */
body.theme-ds .theme-switch {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  box-shadow: var(--ds-shadow);
}
body.theme-ds .theme-switch-btn {
  font-family: var(--font-family);
  color: var(--ds-text-muted);
  font-weight: 600;
}
body.theme-ds .theme-switch-btn.active {
  background: var(--ds-blue);
  color: #fff;
}