/* R5 — Адаптация страниц для Telegram Mini App (iframe)
 *
 * Когда страницы КЗ открываются в iframe внутри Mini App, они должны:
 * 1. Скрывать sidebar (боковое меню)
 * 2. Скрывать topnav/breadcrumbs (верхнюю навигацию)
 * 3. Использовать тёмную тему Telegram
 * 4. Адаптироваться под мобильную ширину
 *
 * Активируется через параметр ?miniapp=1 в URL
 */

/* ========================================
   MINIAPP MODE STYLES
   ======================================== */

body.miniapp-mode {
  /* Убираем padding для контента на всю ширину */
  --miniapp-padding: 12px;
}

/* 1. СКРЫТЬ SIDEBAR (боковое меню) */
body.miniapp-mode aside.sidebar,
body.miniapp-mode #sidebar,
body.miniapp-mode .sidebar-backdrop,
body.miniapp-mode #sidebar-backdrop {
  display: none !important;
}

/* 2. СКРЫТЬ TOPNAV / BREADCRUMBS / ЗАГОЛОВКИ */
body.miniapp-mode .topnav,
body.miniapp-mode .breadcrumbs,
body.miniapp-mode nav.top-nav,
body.miniapp-mode .page-header,
body.miniapp-mode .brand-box {
  display: none !important;
}

/* СКРЫТЬ TOPBAR (панель с балансом, темой, помощью) */
body.miniapp-mode header.topbar,
body.miniapp-mode .topbar {
  display: none !important;
}

/* СКРЫТЬ ЭЛЕМЕНТЫ TOPBAR (баланс, переключатель темы, помощь) */
body.miniapp-mode .topbar .right,
body.miniapp-mode .theme-toggle,
body.miniapp-mode .balance-chip,
body.miniapp-mode .balance-display,
body.miniapp-mode .ai-help-btn,
body.miniapp-mode .ai-help-desktop,
body.miniapp-mode .ai-help-mobile,
body.miniapp-mode .help-link {
  display: none !important;
}

/* Заголовки страниц не прячем: правило «h1 + div» скрывало и обычное
   содержимое, идущее сразу за заголовком (аудит 18.10.2026). */

/* 3. КОНТЕНТ НА ВСЮ ШИРИНУ */
body.miniapp-mode .shell {
  display: block !important;
}

body.miniapp-mode main,
body.miniapp-mode .main,
body.miniapp-mode .content {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--miniapp-padding) !important;
}

/* 4. ЦВЕТОВАЯ СХЕМА — ЕДИНАЯ С ГЛАВНОЙ MINIAPP (#0E0E12 + #8B5CF6) */
body.miniapp-mode {
  /* Фон как на главной странице Mini App */
  background: #0E0E12 !important;
  color: #F6F4EF !important;

  /* Переопределяем CSS-переменные страниц КЗ на цвета главной Mini App */
  --ink: #0E0E12 !important;
  --ink-soft: #15151B !important;
  --ink-elev: #1E1E26 !important;
  --ink-line: #2A2A33 !important;
  --paper: #F6F4EF !important;
  --muted-on-dark: #9A9AA4 !important;
  --violet: #8B5CF6 !important;
  --violet-bright: #A78BFA !important;
  --violet-deep: #7C3AED !important;
}

/* Карточки в стиле главной Mini App */
body.miniapp-mode .card,
body.miniapp-mode .card-dark {
  background: #15151B !important;
  border-color: #2A2A33 !important;
}

/* Кнопки в фирменном фиолетовом #8B5CF6 (как на главной) */
body.miniapp-mode .btn,
body.miniapp-mode .btn-primary,
body.miniapp-mode button:not(.unstyled):not(.btn-ghost):not(.btn-secondary) {
  background: #8B5CF6 !important;
  color: #ffffff !important;
  border: none !important;
}

body.miniapp-mode .btn-primary:hover,
body.miniapp-mode .btn:hover {
  background: #7C3AED !important;
}

body.miniapp-mode .btn-ghost,
body.miniapp-mode .btn-secondary {
  background: #15151B !important;
  color: #F6F4EF !important;
  border: 1px solid #2A2A33 !important;
}

body.miniapp-mode .btn-ghost:hover,
body.miniapp-mode .btn-secondary:hover {
  background: #1E1E26 !important;
  border-color: #2A2A33 !important;
}

/* Инпуты в стиле главной Mini App */
body.miniapp-mode input,
body.miniapp-mode textarea,
body.miniapp-mode select,
body.miniapp-mode .input,
body.miniapp-mode .textarea {
  background: #15151B !important;
  color: #F6F4EF !important;
  border-color: #2A2A33 !important;
}

body.miniapp-mode input::placeholder,
body.miniapp-mode textarea::placeholder {
  color: #9A9AA4 !important;
}

/* Ссылки в фиолетовом как на главной */
body.miniapp-mode a {
  color: #A78BFA !important;
}

body.miniapp-mode a:hover {
  color: #8B5CF6 !important;
}

/* 5. МОБИЛЬНАЯ АДАПТАЦИЯ */
body.miniapp-mode {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body.miniapp-mode h1 {
  font-size: 24px !important;
  margin-bottom: 12px !important;
}

body.miniapp-mode h2 {
  font-size: 20px !important;
  margin-bottom: 10px !important;
}

body.miniapp-mode h3 {
  font-size: 17px !important;
  margin-bottom: 8px !important;
}

/* Таблицы на мобильном */
body.miniapp-mode table {
  font-size: 13px !important;
}

body.miniapp-mode th,
body.miniapp-mode td {
  padding: 8px 6px !important;
}

/* Скролл по горизонтали для широких таблиц */
body.miniapp-mode .table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 6. УБРАТЬ ЭЛЕМЕНТЫ НАВИГАЦИИ */
body.miniapp-mode .team-switcher,
body.miniapp-mode .balance-card,
body.miniapp-mode .nav-services,
body.miniapp-mode .profile-menu,
body.miniapp-mode .user-menu {
  display: none !important;
}

/* 7. АДАПТАЦИЯ СПЕЦИФИЧНЫХ КОМПОНЕНТОВ КЗ */

/* KZ Plans - адаптация кнопок месяцев */
body.miniapp-mode #plans-month {
  width: 100% !important;
  min-width: auto !important;
}

/* KZ Stats - адаптация графиков */
body.miniapp-mode .chart-container {
  height: 250px !important;
}

/* KZ Mediaplan - адаптация форм */
body.miniapp-mode .form-row {
  flex-direction: column !important;
  gap: 8px !important;
}

/* 8. ОТСТУПЫ И SPACING */
body.miniapp-mode .container {
  padding-left: var(--miniapp-padding) !important;
  padding-right: var(--miniapp-padding) !important;
}

body.miniapp-mode .card {
  margin-bottom: 12px !important;
  padding: 14px !important;
}

/* 9. СКРЫТЬ ДЕСКТОПНЫЕ ЭЛЕМЕНТЫ */
body.miniapp-mode .desktop-only,
body.miniapp-mode .hide-on-mobile {
  display: none !important;
}

/* 10. ОПТИМИЗАЦИЯ TOUCH */
body.miniapp-mode button,
body.miniapp-mode a,
body.miniapp-mode .clickable {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 11. ЕДИНАЯ ЦВЕТОВАЯ СХЕМА MINIAPP (как на главной странице) */
:root {
  --miniapp-bg: #0E0E12;
  --miniapp-bg-2: #15151B;
  --miniapp-bg-3: #1E1E26;
  --miniapp-line: #2A2A33;
  --miniapp-text: #F6F4EF;
  --miniapp-muted: #9A9AA4;
  --miniapp-violet: #8B5CF6;
  --miniapp-violet-light: #A78BFA;
  --miniapp-violet-dark: #7C3AED;
}

/* 12. СКРЫТЬ FOOTER */
body.miniapp-mode footer,
body.miniapp-mode .footer,
body.miniapp-mode .page-footer {
  display: none !important;
}

/* 13. FIX OVERFLOW */
body.miniapp-mode {
  overflow-x: hidden !important;
}

body.miniapp-mode * {
  max-width: 100vw !important;
}

/* 14. RESPONSIVE IMAGES */
body.miniapp-mode img {
  max-width: 100% !important;
  height: auto !important;
}

/* 15. АДАПТАЦИЯ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ */
@media (max-width: 375px) {
  body.miniapp-mode {
    --miniapp-padding: 8px;
    font-size: 14px !important;
  }

  body.miniapp-mode h1 {
    font-size: 20px !important;
  }

  body.miniapp-mode .card {
    padding: 10px !important;
  }
}

/* 16. ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ КОМПОНЕНТОВ */

/* Таблицы — тёмный фон и границы */
body.miniapp-mode table {
  background: #15151B !important;
  border-color: #2A2A33 !important;
}

body.miniapp-mode th,
body.miniapp-mode td {
  border-color: #2A2A33 !important;
  color: #F6F4EF !important;
}

body.miniapp-mode thead th {
  background: #1E1E26 !important;
  color: #9A9AA4 !important;
}

body.miniapp-mode tbody tr:hover {
  background: #1E1E26 !important;
}

/* Бейджи и теги */
body.miniapp-mode .badge,
body.miniapp-mode .tag,
body.miniapp-mode .chip {
  background: #1E1E26 !important;
  color: #F6F4EF !important;
  border-color: #2A2A33 !important;
}

body.miniapp-mode .tag-warn,
body.miniapp-mode .badge-warning {
  background: rgba(246, 173, 85, 0.15) !important;
  color: #f6ad55 !important;
}

body.miniapp-mode .tag-success,
body.miniapp-mode .badge-success {
  background: rgba(72, 187, 120, 0.15) !important;
  color: #48bb78 !important;
}

body.miniapp-mode .tag-error,
body.miniapp-mode .badge-error {
  background: rgba(245, 101, 101, 0.15) !important;
  color: #f56565 !important;
}

/* Модальные окна и диалоги */
body.miniapp-mode .modal,
body.miniapp-mode .dialog,
body.miniapp-mode .r5-dlg {
  background: #15151B !important;
  border-color: #2A2A33 !important;
}

body.miniapp-mode .modal-backdrop {
  background: rgba(14, 14, 18, 0.85) !important;
}

/* Разделители */
body.miniapp-mode hr,
body.miniapp-mode .divider {
  border-color: #2A2A33 !important;
}

/* Выделенные блоки */
body.miniapp-mode .highlight,
body.miniapp-mode .notice,
body.miniapp-mode .kz-notice {
  background: #1E1E26 !important;
  border-color: #2A2A33 !important;
}

/* Градиент бренда (фиолетовый) */
body.miniapp-mode .gradient-brand {
  background: linear-gradient(135deg, #8B5CF6, #A78BFA) !important;
}

/* Tooltip и подсказки */
body.miniapp-mode .tooltip {
  background: #1E1E26 !important;
  color: #F6F4EF !important;
  border-color: #2A2A33 !important;
}