/* ============================================================
   Playful Claymorphism theme — третья дизайн-система админки.
   Активируется классом body.theme-playful.
   Рекомендации UI/UX Pro Max:
     - Стиль: Claymorphism + Vibrant Block-based
     - Шрифты: Nunito (heading), DM Sans (body)
     - Палитра: Educational App — indigo primary, orange accent
     - Радиусы: 16–24px, толстые бордеры 3px
     - Двойные тени (inner + outer) для clay-эффекта
     - Bouncy hover анимации
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap');

body.theme-playful {
  /* === Палитра (60-30-10, desaturated pastels) === */
  --play-indigo: #6B63B5;          /* sidebar & primary — grape, sat ~40% */
  --play-indigo-deep: #5A5299;     /* gradient end, hover states */
  --play-indigo-soft: rgba(107, 99, 181, 0.07);
  --play-heading: #4A4291;         /* headings — deep plum, readable */
  --play-orange: #E8794A;          /* accent CTA — warm coral-orange */
  --play-orange-hover: #D0663A;

  --play-peach: #FDDDD6;           /* soft peach pastel */
  --play-baby-blue: #C5DFED;       /* soft sky */
  --play-mint: #C8EDCC;            /* soft mint */
  --play-lilac: #E8E4F6;           /* soft lilac */
  --play-gold: #EAB44C;            /* warm gold (desaturated) */

  --play-white: #FFFFFF;
  --play-bg: #F7F5FB;              /* 60% — very light lavender */
  --play-bg-2: #EFECF5;            /* secondary surface */
  --play-border: #DDD8EE;          /* warm lavender border */
  --play-border-soft: #E8E5F0;     /* softer variant */
  --play-text: #2D2A4A;            /* deep plum-slate */
  --play-text-muted: #8985A6;      /* slate-purple, not vivid */
  --play-text-soft: #A9A5C0;       /* lighter muted */

  /* Clay shadows — lower opacity, neutral purple */
  --play-shadow: 4px 4px 10px rgba(107, 99, 181, 0.08), inset -2px -2px 6px rgba(255, 255, 255, 0.5);
  --play-shadow-hover: 6px 6px 0 var(--play-indigo);
  --play-shadow-card: 4px 4px 14px rgba(107, 99, 181, 0.07), inset -1px -1px 4px rgba(255, 255, 255, 0.6);
  --play-shadow-press: 2px 2px 4px rgba(107, 99, 181, 0.10), inset 1px 1px 3px rgba(0, 0, 0, 0.04);

  /* === Глобальные токены === */
  --color-bg: var(--play-white);
  --color-bg-page: var(--play-bg);
  --color-text: var(--play-text);
  --color-text-secondary: #7A7793;
  --color-text-muted: var(--play-text-muted);
  --color-border: var(--play-border);
  --color-border-light: var(--play-border-soft);
  --color-border-focus: var(--play-indigo);

  --color-accent: var(--play-indigo);
  --color-accent-hover: var(--play-indigo-deep);
  --color-accent-light: #EEF2FF;
  --color-accent-50: var(--play-indigo-soft);

  --sidebar-bg: var(--play-indigo);
  --sidebar-text: #C7D2FE;
  --sidebar-active: var(--play-orange);
  --sidebar-hover: rgba(255, 255, 255, 0.1);

  --color-success: #10B981;
  --color-success-bg: #F0FAF4;
  --color-success-border: #8DD8A8;
  --color-error: #E05555;
  --color-error-bg: #FFF3F3;
  --color-error-border: #F0A0A0;
  --color-warning: var(--play-gold);
  --color-warning-bg: #FFFAF0;
  --color-warning-border: #F0D680;
  --color-info: #5A9AE0;
  --color-info-bg: #F0F6FE;
  --color-info-border: #A0C8F0;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-btn: 20px;

  --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Nunito', -apple-system, sans-serif;

  font-family: var(--font-family);
  background: var(--play-bg);
  color: var(--play-text);
}

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

/* === Заголовки — Nunito Black === */
body.theme-playful h1,
body.theme-playful h2,
body.theme-playful h3,
body.theme-playful h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--play-heading);
}

/* === Сайдбар: grape с clay-элементами === */
body.theme-playful .sidebar {
  background: linear-gradient(180deg, var(--play-indigo) 0%, var(--play-indigo-deep) 100%);
  border-right: none;
}
body.theme-playful .sidebar-brand {
  padding: 28px 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
body.theme-playful .sidebar-brand-logo {
  filter: brightness(0) invert(1);
  height: 26px;
}
body.theme-playful .sidebar-brand-text,
body.theme-playful .sidebar-brand-sub { display: none; }
body.theme-playful .sidebar-section {
  color: rgba(255,255,255,0.3);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 10px;
  font-family: var(--font-display);
}
body.theme-playful .nav-item {
  color: #C7D2FE;
  border-radius: 14px;
  font-weight: 500;
  font-family: var(--font-family);
  padding: 12px 16px;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.theme-playful .nav-item:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateX(4px);
}
body.theme-playful .nav-item.active {
  background: var(--play-white);
  color: var(--play-indigo);
  font-weight: 700;
  border-color: var(--play-indigo-deep);
  box-shadow: var(--play-shadow);
}
body.theme-playful .nav-item.active .nav-icon { color: var(--play-orange); opacity: 1; }
body.theme-playful .nav-icon { opacity: 0.6; }
body.theme-playful .nav-item-badge {
  background: var(--play-orange);
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  padding: 2px 10px;
}
body.theme-playful .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}
body.theme-playful .sidebar-avatar {
  background: linear-gradient(135deg, var(--play-peach), var(--play-lilac));
  color: var(--play-indigo);
  border: 3px solid #fff;
  font-weight: 800;
  font-family: var(--font-display);
}
body.theme-playful .sidebar-user-name { color: #fff; font-family: var(--font-display); font-weight: 700; }
body.theme-playful .sidebar-user-role {
  color: var(--play-baby-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 10px;
}
body.theme-playful .sidebar-logout { color: var(--play-baby-blue); border-radius: 12px; }
body.theme-playful .sidebar-logout:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* === Topbar === */
body.theme-playful .admin-topbar {
  background: var(--play-white);
  border-bottom: 3px solid var(--play-border);
  border-radius: 0;
}
body.theme-playful .admin-topbar h1 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--play-heading);
}
body.theme-playful .topbar-time {
  color: var(--play-text-soft);
  font-size: 12px;
  font-weight: 500;
}

/* === Кнопки: chunky clay + bounce === */
body.theme-playful .btn {
  border-radius: 16px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  border: 3px solid transparent;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--play-shadow);
}
@media (hover: hover) {
  body.theme-playful .btn:hover:not(:disabled) {
    transform: scale(1.05) translateY(-2px);
    box-shadow: var(--play-shadow-hover);
  }
  body.theme-playful .btn:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: var(--play-shadow-press);
  }
}
body.theme-playful .btn-primary {
  background: var(--play-indigo);
  color: #fff;
  border-color: var(--play-indigo-deep);
}
@media (hover: hover) {
  body.theme-playful .btn-primary:hover:not(:disabled) {
    background: var(--play-indigo-deep);
  }
}
body.theme-playful .btn-secondary {
  background: var(--play-white);
  color: var(--play-indigo);
  border-color: var(--play-border);
}
@media (hover: hover) {
  body.theme-playful .btn-secondary:hover:not(:disabled) {
    background: var(--play-lilac);
    border-color: var(--play-indigo);
  }
}
body.theme-playful .btn-ghost {
  background: var(--play-white);
  color: var(--play-indigo);
  border: 2px solid var(--play-border);
  box-shadow: none;
}
@media (hover: hover) {
  body.theme-playful .btn-ghost:hover:not(:disabled) {
    background: var(--play-bg-2);
    border-color: var(--play-indigo);
    box-shadow: var(--play-shadow);
  }
}
body.theme-playful .btn-danger {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #FCA5A5;
}
body.theme-playful .btn-success {
  background: #D1FAE5;
  color: #059669;
  border-color: #6EE7B7;
}
body.theme-playful .btn-link {
  background: none;
  box-shadow: none;
  border: none;
  color: var(--play-indigo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
}
body.theme-playful .btn-link:hover { transform: none; box-shadow: none; }

/* === Поля ввода — chunky borders === */
body.theme-playful .input,
body.theme-playful .select,
body.theme-playful .textarea {
  background: var(--play-white);
  border: 3px solid var(--play-border);
  border-radius: 14px;
  font-family: var(--font-family);
  color: var(--play-text);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.theme-playful .input:focus,
body.theme-playful .select:focus,
body.theme-playful .textarea:focus {
  border-color: var(--play-indigo);
  outline: none;
  box-shadow: 0 0 0 4px rgba(107, 99, 181, 0.10);
  transform: scale(1.01);
}

/* === Карточки — clay с double shadow === */
body.theme-playful .card,
body.theme-playful .table-wrap,
body.theme-playful .stat-card,
body.theme-playful .ai-card,
body.theme-playful .operator-form,
body.theme-playful .product-form {
  background: var(--play-white);
  border: 3px solid var(--play-border);
  border-radius: 24px;
  box-shadow: var(--play-shadow-card);
}
body.theme-playful .ai-card { background: var(--play-bg-2); }

/* === Stat cards: pastel clay blocks === */
body.theme-playful .stat-card {
  border-left: 3px solid var(--play-border);
  padding: 24px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) {
  body.theme-playful .stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--play-shadow-hover);
  }
}
body.theme-playful .stat-card--warning {
  background: #FFF8E7;
  border-color: var(--play-gold);
}
body.theme-playful .stat-card--success {
  background: #EDFAF2;
  border-color: #6DC99A;
}
body.theme-playful .stat-card--info {
  background: #EEF4FE;
  border-color: #7EB3F0;
}
body.theme-playful .stat-card--error {
  background: #FFF2F2;
  border-color: #F09090;
}
body.theme-playful .stat-card-icon {
  background: var(--play-white);
  border: 3px solid currentColor;
  border-radius: 16px;
  box-shadow: inset -1px -1px 3px rgba(255,255,255,0.5);
}
body.theme-playful .stat-card-label {
  color: var(--play-text);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: var(--font-display);
}
body.theme-playful .stat-card-value {
  color: var(--play-heading);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.04em;
  font-family: var(--font-display);
}

/* === Dashboard карточки === */
body.theme-playful .dashboard-card {
  background: var(--play-white);
  border: 3px solid var(--play-border);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--play-shadow-card);
}
body.theme-playful .dashboard-card .table-wrap {
  border: 2px dashed var(--play-border);
  box-shadow: none;
  border-radius: 16px;
}
body.theme-playful .dashboard-card-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--play-heading);
}

/* === Таблицы === */
body.theme-playful .table { font-family: var(--font-family); }
body.theme-playful .table th {
  background: var(--play-bg-2);
  color: var(--play-heading);
  border-bottom: 3px solid var(--play-border);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  font-family: var(--font-display);
}
body.theme-playful .table td {
  border-bottom: 1px solid var(--play-border-soft);
  color: var(--play-text);
}
body.theme-playful .table tbody tr {
  transition: all 0.15s ease;
}
body.theme-playful .table tbody tr:hover {
  background: var(--play-bg);
  transform: scale(1.005);
}
body.theme-playful .table-row-warning { background: #FFFAF0 !important; }
body.theme-playful .table-row-warning:hover { background: #FFF5E0 !important; }

/* === Бейджи — chunky pills === */
body.theme-playful .badge {
  border-radius: 12px;
  border: 2px solid var(--play-border);
  padding: 4px 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
  font-family: var(--font-display);
  box-shadow: 2px 2px 0 rgba(107, 99, 181, 0.08);
}
body.theme-playful .badge::before { display: none; }
body.theme-playful .badge-success {
  background: #EDFAF2;
  color: #1B7A4A;
  border-color: #6DC99A;
}
body.theme-playful .badge-warning {
  background: #FFF8E7;
  color: #8B6914;
  border-color: var(--play-gold);
}
body.theme-playful .badge-error {
  background: #FFF2F2;
  color: #B33A3A;
  border-color: #F09090;
}
body.theme-playful .badge-info {
  background: #EEF4FE;
  color: #2E5FA3;
  border-color: #7EB3F0;
}
body.theme-playful .badge-pending {
  background: var(--play-bg-2);
  color: var(--play-text);
  border-style: dashed;
}

/* === Алерты === */
body.theme-playful .alert {
  border-radius: 16px;
  border-width: 3px;
  font-weight: 600;
  font-family: var(--font-family);
}

/* === Модалки — clay popup === */
body.theme-playful .modal-overlay {
  background: rgba(107, 99, 181, 0.18);
  backdrop-filter: blur(4px);
}
body.theme-playful .modal-content {
  background: var(--play-white);
  border: 3px solid var(--play-border);
  border-radius: 28px;
  box-shadow: 6px 6px 0 var(--play-indigo), 0 25px 60px -15px rgba(107, 99, 181, 0.2);
  animation: playful-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes playful-pop {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
body.theme-playful .modal-header {
  border-bottom: 3px solid var(--play-border);
}
body.theme-playful .modal-header h3 {
  font-family: var(--font-display);
  color: var(--play-heading);
}
body.theme-playful .modal-footer {
  background: var(--play-bg);
  border-top: 3px solid var(--play-border);
  border-radius: 0 0 25px 25px;
}
body.theme-playful .modal-close {
  background: var(--play-white);
  border: 3px solid var(--play-indigo);
  border-radius: 14px;
  color: var(--play-indigo);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.theme-playful .modal-close:hover {
  background: var(--play-lilac);
  transform: rotate(90deg);
}

/* === Drop zone === */
body.theme-playful .import-drop-zone {
  border: 3px dashed var(--play-border);
  border-radius: 20px;
  background: var(--play-bg);
}
body.theme-playful .import-drop-zone:hover {
  border-color: var(--play-indigo);
  background: var(--play-bg-2);
  transform: scale(1.01);
}

/* === Detail блок === */
body.theme-playful .detail-section-title {
  color: var(--play-heading);
  letter-spacing: 0.1em;
  font-weight: 800;
  font-family: var(--font-display);
  border-bottom: 2px solid var(--play-border);
  text-transform: uppercase;
  font-size: 10px;
}
body.theme-playful .detail-item-label {
  color: var(--play-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
}

/* === AI чеки === */
body.theme-playful .ai-check-pass {
  background: #D1FAE5;
  color: #065F46;
  border: 2px solid #10B981;
  border-radius: 12px;
}
body.theme-playful .ai-check-fail {
  background: #FEE2E2;
  color: #991B1B;
  border: 2px solid #EF4444;
  border-radius: 12px;
}

/* === Login экран — clay на indigo === */
body.theme-playful .admin-login {
  background: linear-gradient(135deg, #3D3876 0%, #5A5299 50%, #3D3876 100%);
}
body.theme-playful .admin-login::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(253, 188, 180, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(173, 216, 230, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(230, 230, 250, 0.15) 0%, transparent 60%);
}
body.theme-playful .admin-login-card { padding: 24px; }
body.theme-playful .admin-login-header p {
  color: var(--play-baby-blue);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
}
body.theme-playful .login-form-card {
  background: var(--play-white);
  border: 3px solid var(--play-border);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--play-indigo-deep), 0 30px 80px -20px rgba(0, 0, 0, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-playful .login-form-card .form-label {
  color: var(--play-heading);
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
body.theme-playful .login-form-card .input {
  background: var(--play-bg);
  border: 3px solid var(--play-border);
  color: var(--play-text);
  border-radius: 14px;
}
body.theme-playful .login-form-card .input::placeholder {
  color: var(--play-text-soft);
}
body.theme-playful .login-form-card .input:focus {
  border-color: var(--play-indigo);
  background: var(--play-white);
  box-shadow: 0 0 0 4px rgba(107, 99, 181, 0.12);
}
body.theme-playful .login-form-card .btn-primary {
  background: var(--play-indigo);
  color: #fff;
  border-radius: 16px;
  border-color: var(--play-indigo-deep);
  font-family: var(--font-display);
}
body.theme-playful .login-form-card .alert {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
  border-radius: 14px;
}

/* === Soft lock === */
body.theme-playful .soft-lock {
  background: #FFFAF0;
  border: 3px solid var(--play-gold);
  border-radius: 16px;
  color: #92400E;
  font-weight: 700;
}

/* === Theme switcher === */
body.theme-playful .theme-switch {
  background: var(--play-bg);
  border: 3px solid var(--play-border);
  border-radius: 16px;
  box-shadow: 2px 2px 0 rgba(107, 99, 181, 0.08);
}
body.theme-playful .theme-switch-btn {
  font-family: var(--font-display);
  color: var(--play-text);
  font-weight: 700;
  border-radius: 12px;
}
body.theme-playful .theme-switch-btn.active {
  background: var(--play-indigo);
  color: #fff;
  box-shadow: var(--play-shadow);
}