/**
 * Telegram Mini Apps — адаптация интерфейса
 *
 * Этот файл содержит:
 * - CSS переменные Telegram (фоллбэки для desktop)
 * - Safe area отступы
 * - Touch-friendly размеры элементов (min 44px)
 * - Mobile-first стили
 * - Адаптация под BottomSheet поведение
 */

/* ==========================================
   TELEGRAM CSS ПЕРЕМЕННЫЕ
   ========================================== */

/*
 * Официальная палитра Telegram Mini Apps
 * Автоматическое переключение по prefers-color-scheme
 *
 * Dark Theme:
 * - bg: #17212b, secondary: #232e3c
 * - text: #f5f5f5, hint: #708499
 * - accent/link: #6ab2f2, button: #5288c1
 * - destructive: #ec3942
 *
 * Light Theme:
 * - bg: #ffffff, secondary: #efeff4
 * - text: #000000, hint: #8e8e93
 * - accent/link: #007aff, button: #007aff
 * - destructive: #ff3b30
 */

/* ========== LIGHT THEME (default) ========== */
:root {
  /* Telegram Light Theme */
  --tg-theme-bg-color: #ffffff;
  --tg-theme-text-color: #000000;
  --tg-theme-hint-color: #8e8e93;
  --tg-theme-link-color: #007aff;
  --tg-theme-button-color: #007aff;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #efeff4;
  --tg-theme-header-bg-color: #ffffff;
  --tg-theme-bottom-bar-bg-color: #f8f8f8;
  --tg-theme-accent-text-color: #007aff;
  --tg-theme-section-bg-color: #ffffff;
  --tg-theme-section-header-text-color: #6d6d72;
  --tg-theme-section-separator-color: rgba(0,0,0,0.08);
  --tg-theme-subtitle-text-color: #8e8e93;
  --tg-theme-destructive-text-color: #ff3b30;

  /* Color scheme indicator */
  --tg-color-scheme: light;

  /* Safe area insets (будут перезаписаны Telegram SDK) */
  --tg-safe-area-inset-top: env(safe-area-inset-top, 0px);
  --tg-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-area-inset-left: env(safe-area-inset-left, 0px);
  --tg-safe-area-inset-right: env(safe-area-inset-right, 0px);
  --tg-content-safe-area-inset-top: 0px;
  --tg-content-safe-area-inset-bottom: 0px;
  --tg-content-safe-area-inset-left: 0px;
  --tg-content-safe-area-inset-right: 0px;

  /* Viewport */
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;

  /* Touch-friendly sizes */
  --tma-touch-target: 44px;
  --tma-button-height: 48px;
  --tma-input-height: 48px;
  --tma-spacing-xs: 8px;
  --tma-spacing-sm: 12px;
  --tma-spacing-md: 16px;
  --tma-spacing-lg: 20px;
  --tma-spacing-xl: 24px;
  --tma-border-radius: 12px;
  --tma-border-radius-lg: 16px;
}

/* ========== DARK THEME (system preference) ========== */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    /* Telegram Dark Theme */
    --tg-theme-bg-color: #17212b;
    --tg-theme-text-color: #f5f5f5;
    --tg-theme-hint-color: #708499;
    --tg-theme-link-color: #6ab3f3;
    --tg-theme-button-color: #5288c1;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #232e3c;
    --tg-theme-header-bg-color: #17212b;
    --tg-theme-bottom-bar-bg-color: #17212b;
    --tg-theme-accent-text-color: #6ab2f2;
    --tg-theme-section-bg-color: #17212b;
    --tg-theme-section-header-text-color: #6ab3f3;
    --tg-theme-section-separator-color: rgba(255,255,255,0.08);
    --tg-theme-subtitle-text-color: #708499;
    --tg-theme-destructive-text-color: #ec3942;

    /* Color scheme indicator */
    --tg-color-scheme: dark;
  }
}

/* ========== MANUAL DARK THEME (forced via class) ========== */
:root.theme-dark {
  /* Telegram Dark Theme */
  --tg-theme-bg-color: #17212b;
  --tg-theme-text-color: #f5f5f5;
  --tg-theme-hint-color: #708499;
  --tg-theme-link-color: #6ab3f3;
  --tg-theme-button-color: #5288c1;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #232e3c;
  --tg-theme-header-bg-color: #17212b;
  --tg-theme-bottom-bar-bg-color: #17212b;
  --tg-theme-accent-text-color: #6ab2f2;
  --tg-theme-section-bg-color: #17212b;
  --tg-theme-section-header-text-color: #6ab3f3;
  --tg-theme-section-separator-color: rgba(255,255,255,0.08);
  --tg-theme-subtitle-text-color: #708499;
  --tg-theme-destructive-text-color: #ec3942;

  /* Color scheme indicator */
  --tg-color-scheme: dark;
}

/* ==========================================
   БАЗОВЫЕ СТИЛИ (Telegram-native)
   ========================================== */

/* Предотвращение overscroll на iOS */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Основной body с Telegram цветами */
.tma-body {
  background-color: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Фикс для iOS Safari 100vh + Telegram режим */
body.tma-mode {
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding-top: var(--tg-safe-area-inset-top);
  padding-bottom: var(--tg-safe-area-inset-bottom);
  padding-left: var(--tg-safe-area-inset-left);
  padding-right: var(--tg-safe-area-inset-right);
}

/* Ссылки */
.tma-body a {
  color: var(--tg-theme-link-color);
}

/* Основные контейнеры */
.tma-body .sidebar,
.tma-body .mobile-sidebar {
  background-color: var(--tg-theme-bg-color);
  border-color: var(--tg-theme-section-separator-color);
}

.tma-body .navbar,
.tma-body header {
  background-color: var(--tg-theme-header-bg-color);
  border-color: var(--tg-theme-section-separator-color);
}

/* Текстовые элементы */
.tma-body h1, .tma-body h2, .tma-body h3, .tma-body h4, .tma-body h5, .tma-body h6 {
  color: var(--tg-theme-text-color);
}

.tma-body .text-muted,
.tma-body .opacity-50,
.tma-body .opacity-60,
.tma-body .opacity-70 {
  color: var(--tg-theme-hint-color) !important;
}

/* Кнопки Telegram-style */
.tma-body .btn-primary {
  background-color: var(--tg-theme-button-color) !important;
  color: var(--tg-theme-button-text-color) !important;
  border: none !important;
}

.tma-body .btn-primary:hover {
  filter: brightness(1.1);
}

/* Нейтральные кнопки (без класса variant) */
.tma-body .btn:not(.btn-primary):not(.btn-error):not(.btn-success):not(.btn-warning):not(.btn-ghost):not(.btn-outline) {
  background-color: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
  border: 1px solid var(--tg-theme-section-separator-color);
}

.tma-body .btn:not(.btn-primary):not(.btn-error):not(.btn-success):not(.btn-warning):not(.btn-ghost):not(.btn-outline):hover {
  background-color: var(--tg-theme-section-separator-color);
  filter: brightness(1.05);
}

.tma-body .btn-ghost {
  background-color: transparent;
  color: var(--tg-theme-accent-text-color);
}

.tma-body .btn-ghost:hover {
  background-color: var(--tg-theme-section-separator-color);
}

/* Карточки и секции */
.tma-body .card,
.tma-body .bg-base-100 {
  background-color: var(--tg-theme-section-bg-color);
  border-color: var(--tg-theme-section-separator-color);
}

.tma-body .bg-base-200,
.tma-body .bg-base-300 {
  background-color: var(--tg-theme-secondary-bg-color);
}

/* Инпуты */
.tma-body input,
.tma-body textarea,
.tma-body select {
  background-color: var(--tg-theme-secondary-bg-color) !important;
  color: var(--tg-theme-text-color) !important;
  border-color: var(--tg-theme-section-separator-color) !important;
}

.tma-body input::placeholder,
.tma-body textarea::placeholder {
  color: var(--tg-theme-hint-color);
}

.tma-body input:focus,
.tma-body textarea:focus,
.tma-body select:focus {
  border-color: var(--tg-theme-accent-text-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--tg-theme-accent-text-color), 0.2);
}

/* Разделители */
.tma-body .divider,
.tma-body .border-base-content\/10,
.tma-body .border-base-300 {
  border-color: var(--tg-theme-section-separator-color) !important;
}

/* Dropdown/меню */
.tma-body .dropdown-content,
.tma-body .menu {
  background-color: var(--tg-theme-section-bg-color);
  border-color: var(--tg-theme-section-separator-color);
}

/* DaisyUI Modal */
.tma-body .modal-box {
  background-color: var(--tg-theme-bg-color);
  color: var(--tg-theme-text-color);
  border: 1px solid var(--tg-theme-section-separator-color);
}

.tma-body .modal-box h3,
.tma-body .modal-box .font-bold {
  color: var(--tg-theme-text-color);
}

.tma-body .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal action buttons */
.tma-body .modal-action .btn {
  min-height: 44px;
}

.tma-body .menu li a {
  color: var(--tg-theme-text-color);
}

.tma-body .menu li a:hover,
.tma-body .menu li a.active {
  background-color: var(--tg-theme-secondary-bg-color) !important;
  color: var(--tg-theme-accent-text-color) !important;
}

/* Sidebar навигация — hover состояния */
.tma-body .sidebar a:hover,
.tma-body .mobile-sidebar a:hover,
.tma-body nav a:hover {
  background-color: var(--tg-theme-secondary-bg-color) !important;
  color: var(--tg-theme-text-color) !important;
}

/* Tailwind hover:bg-base-* классы */
.tma-body .hover\:bg-base-200:hover,
.tma-body .hover\:bg-base-300:hover {
  background-color: var(--tg-theme-secondary-bg-color) !important;
}

/* Sidebar summary (раскрывающееся меню) */
.tma-body summary:hover {
  background-color: var(--tg-theme-secondary-bg-color) !important;
  color: var(--tg-theme-text-color) !important;
}

/* Активный пункт меню */
.tma-body .bg-base-300 {
  background-color: var(--tg-theme-secondary-bg-color) !important;
}

/* Бейджи */
.tma-body .badge {
  background-color: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
}

.tma-body .badge-primary {
  background-color: var(--tg-theme-button-color);
  color: var(--tg-theme-button-text-color);
}

/* Текст с DaisyUI классами */
.tma-body .text-base-content {
  color: var(--tg-theme-text-color) !important;
}

.tma-body .text-base-content\/50,
.tma-body .text-base-content\/60,
.tma-body .text-base-content\/70,
.tma-body .text-base-content\/80 {
  color: var(--tg-theme-hint-color) !important;
}

/* Параграфы и span внутри карточек */
.tma-body p,
.tma-body span:not(.badge):not(.status-dot):not([class*="icon"]) {
  color: var(--tg-theme-text-color);
}

/* Вторичный текст (описания, подписи) */
.tma-body .text-sm.opacity-50,
.tma-body .text-xs.opacity-50,
.tma-body [class*="opacity-"]:not(.status-dot) {
  opacity: 1 !important;
  color: var(--tg-theme-hint-color) !important;
}

/* Tailwind text-slate/gray классы */
.tma-body [class*="text-slate-"],
.tma-body [class*="text-gray-"],
.tma-body [class*="text-zinc-"],
.tma-body [class*="text-neutral-"] {
  color: var(--tg-theme-text-color) !important;
}

/* Светлые оттенки текста - делаем hint цветом */
.tma-body .text-slate-400,
.tma-body .text-slate-500,
.tma-body .text-gray-400,
.tma-body .text-gray-500,
.tma-body .text-zinc-400,
.tma-body .text-zinc-500 {
  color: var(--tg-theme-hint-color) !important;
}

/* Метки и лейблы */
.tma-body label {
  color: var(--tg-theme-text-color);
}

/* Таблицы */
.tma-body table {
  color: var(--tg-theme-text-color);
  background-color: var(--tg-theme-bg-color);
}

.tma-body thead,
.tma-body th {
  color: var(--tg-theme-text-color) !important;
  background-color: var(--tg-theme-secondary-bg-color) !important;
}

.tma-body tbody {
  background-color: var(--tg-theme-bg-color);
}

.tma-body tr {
  background-color: var(--tg-theme-bg-color) !important;
}

.tma-body td {
  color: var(--tg-theme-text-color);
  background-color: var(--tg-theme-bg-color) !important;
  border-color: var(--tg-theme-section-separator-color) !important;
}

.tma-body tr:hover td {
  background-color: var(--tg-theme-secondary-bg-color) !important;
}

/* Tailwind bg-white для таблиц */
.tma-body table .bg-white,
.tma-body table [class*="bg-white"],
.tma-body .bg-white {
  background-color: var(--tg-theme-bg-color) !important;
}

/* DataTables стили */
.tma-body .datatable-table,
.tma-body .datatable-container {
  background-color: var(--tg-theme-bg-color) !important;
}

.tma-body .datatable-table tbody tr {
  background-color: var(--tg-theme-bg-color) !important;
}

.tma-body .datatable-table tbody tr:hover {
  background-color: var(--tg-theme-secondary-bg-color) !important;
}

/* Alert/destructive */
.tma-body .text-error,
.tma-body .text-danger {
  color: var(--tg-theme-destructive-text-color) !important;
}

.tma-body .btn-error,
.tma-body .btn-danger {
  background-color: var(--tg-theme-destructive-text-color);
  color: #ffffff;
}

/* ==========================================
   НАВИГАЦИЯ — MOBILE FIRST
   ========================================== */

/* Скрыть desktop sidebar на mobile */
@media (max-width: 1023px) {
  .sidebar:not(.mobile-sidebar) {
    display: none !important;
  }

  main.flex-1 {
    margin-left: 0 !important;
  }
}

/* Mobile Bottom Navigation Bar */
.tma-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(64px + var(--tg-safe-area-inset-bottom, 0px));
  padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
  background: var(--tg-theme-bottom-bar-bg-color, oklch(var(--b1)));
  border-top: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.tma-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: var(--tma-touch-target);
  min-height: 64px;
  padding: 8px 12px;
  color: var(--tg-theme-hint-color, oklch(var(--bc) / 0.5));
  text-decoration: none;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tma-bottom-nav-item:active {
  transform: scale(0.95);
}

.tma-bottom-nav-item.active,
.tma-bottom-nav-item:hover {
  color: var(--tg-theme-accent-text-color, oklch(var(--p)));
}

.tma-bottom-nav-item svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.tma-bottom-nav-item span {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Content padding when bottom nav is visible */
@media (max-width: 1023px) {
  body.has-bottom-nav main {
    padding-bottom: calc(80px + var(--tg-safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================
   MOBILE HEADER
   ========================================== */

.tma-header {
  position: sticky;
  top: var(--tg-content-safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 56px;
  padding: 0 var(--tma-spacing-md);
  background: var(--tg-theme-header-bg-color, oklch(var(--b1)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 40;
  border-bottom: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
}

.tma-header-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--tg-theme-text-color, oklch(var(--bc)));
  text-align: center;
  flex: 1;
}

.tma-header-btn {
  min-width: var(--tma-touch-target);
  min-height: var(--tma-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-theme-accent-text-color, oklch(var(--p)));
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================
   TOUCH-FRIENDLY КОМПОНЕНТЫ
   ========================================== */

/* Кнопки */
.tma-btn {
  min-height: var(--tma-button-height);
  padding: var(--tma-spacing-sm) var(--tma-spacing-lg);
  border-radius: var(--tma-border-radius);
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tma-spacing-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border: none;
}

.tma-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.tma-btn-primary {
  background: var(--tg-theme-button-color, oklch(var(--p)));
  color: var(--tg-theme-button-text-color, oklch(var(--pc)));
}

.tma-btn-secondary {
  background: var(--tg-theme-secondary-bg-color, oklch(var(--b2)));
  color: var(--tg-theme-text-color, oklch(var(--bc)));
}

.tma-btn-ghost {
  background: transparent;
  color: var(--tg-theme-accent-text-color, oklch(var(--p)));
}

.tma-btn-destructive {
  background: var(--tg-theme-destructive-text-color, oklch(var(--er)));
  color: #fff;
}

/* Кнопка на всю ширину */
.tma-btn-full {
  width: 100%;
}

/* Инпуты */
.tma-input {
  min-height: var(--tma-input-height);
  padding: var(--tma-spacing-sm) var(--tma-spacing-md);
  border-radius: var(--tma-border-radius);
  font-size: 16px; /* Предотвращает zoom на iOS */
  background: var(--tg-theme-secondary-bg-color, oklch(var(--b2)));
  color: var(--tg-theme-text-color, oklch(var(--bc)));
  border: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
  width: 100%;
  transition: border-color 0.2s ease;
}

.tma-input:focus {
  outline: none;
  border-color: var(--tg-theme-accent-text-color, oklch(var(--p)));
}

.tma-input::placeholder {
  color: var(--tg-theme-hint-color, oklch(var(--bc) / 0.5));
}

/* Select */
.tma-select {
  min-height: var(--tma-input-height);
  padding: var(--tma-spacing-sm) var(--tma-spacing-md);
  padding-right: 40px;
  border-radius: var(--tma-border-radius);
  font-size: 16px;
  background: var(--tg-theme-secondary-bg-color, oklch(var(--b2)));
  color: var(--tg-theme-text-color, oklch(var(--bc)));
  border: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ==========================================
   КАРТОЧКИ И СЕКЦИИ
   ========================================== */

.tma-section {
  background: var(--tg-theme-section-bg-color, oklch(var(--b2)));
  border-radius: var(--tma-border-radius-lg);
  margin: var(--tma-spacing-md);
  overflow: hidden;
}

.tma-section-header {
  padding: var(--tma-spacing-md);
  color: var(--tg-theme-section-header-text-color, oklch(var(--bc) / 0.6));
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tma-cell {
  display: flex;
  align-items: center;
  min-height: var(--tma-touch-target);
  padding: var(--tma-spacing-sm) var(--tma-spacing-md);
  background: var(--tg-theme-bg-color, oklch(var(--b1)));
  border-bottom: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
  -webkit-tap-highlight-color: transparent;
}

.tma-cell:last-child {
  border-bottom: none;
}

.tma-cell:active {
  background: oklch(var(--bc) / 0.05);
}

.tma-cell-icon {
  width: 28px;
  height: 28px;
  margin-right: var(--tma-spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.tma-cell-content {
  flex: 1;
  min-width: 0;
}

.tma-cell-title {
  font-size: 16px;
  color: var(--tg-theme-text-color, oklch(var(--bc)));
}

.tma-cell-subtitle {
  font-size: 14px;
  color: var(--tg-theme-subtitle-text-color, oklch(var(--bc) / 0.5));
  margin-top: 2px;
}

.tma-cell-value {
  font-size: 16px;
  color: var(--tg-theme-hint-color, oklch(var(--bc) / 0.5));
  margin-left: var(--tma-spacing-sm);
}

.tma-cell-chevron {
  width: 16px;
  height: 16px;
  color: var(--tg-theme-hint-color, oklch(var(--bc) / 0.3));
  margin-left: var(--tma-spacing-xs);
}

/* ==========================================
   СПИСКИ
   ========================================== */

.tma-list {
  background: var(--tg-theme-section-bg-color, oklch(var(--b2)));
  border-radius: var(--tma-border-radius-lg);
  overflow: hidden;
}

.tma-list-item {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--tma-spacing-sm) var(--tma-spacing-md);
  border-bottom: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.tma-list-item:last-child {
  border-bottom: none;
}

.tma-list-item:active {
  background: oklch(var(--bc) / 0.05);
}

/* ==========================================
   BADGES И СТАТУСЫ
   ========================================== */

.tma-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
}

.tma-badge-primary {
  background: var(--tg-theme-accent-text-color, oklch(var(--p) / 0.15));
  color: var(--tg-theme-accent-text-color, oklch(var(--p)));
}

.tma-badge-success {
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
}

.tma-badge-warning {
  background: oklch(var(--wa) / 0.15);
  color: oklch(var(--wa));
}

.tma-badge-error {
  background: var(--tg-theme-destructive-text-color, oklch(var(--er) / 0.15));
  color: var(--tg-theme-destructive-text-color, oklch(var(--er)));
}

/* ==========================================
   LOADING STATES
   ========================================== */

.tma-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--tg-theme-hint-color, oklch(var(--bc) / 0.2));
  border-top-color: var(--tg-theme-accent-text-color, oklch(var(--p)));
  border-radius: 50%;
  animation: tma-spin 0.8s linear infinite;
}

@keyframes tma-spin {
  to { transform: rotate(360deg); }
}

.tma-skeleton {
  background: linear-gradient(
    90deg,
    var(--tg-theme-secondary-bg-color, oklch(var(--b2))) 25%,
    oklch(var(--bc) / 0.1) 50%,
    var(--tg-theme-secondary-bg-color, oklch(var(--b2))) 75%
  );
  background-size: 200% 100%;
  animation: tma-shimmer 1.5s infinite;
  border-radius: var(--tma-border-radius);
}

@keyframes tma-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================
   МОДАЛЬНЫЕ ОКНА (BottomSheet style)
   ========================================== */

.tma-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.tma-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.tma-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  background: var(--tg-theme-bg-color, oklch(var(--b1)));
  border-radius: var(--tma-border-radius-lg) var(--tma-border-radius-lg) 0 0;
  padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 101;
  overflow: hidden;
}

.tma-modal.active {
  transform: translateY(0);
}

.tma-modal-handle {
  width: 36px;
  height: 4px;
  background: oklch(var(--bc) / 0.2);
  border-radius: 2px;
  margin: 8px auto 12px;
}

.tma-modal-header {
  padding: var(--tma-spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--tg-theme-section-separator-color, oklch(var(--bc) / 0.1));
}

.tma-modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--tg-theme-text-color, oklch(var(--bc)));
}

.tma-modal-content {
  padding: var(--tma-spacing-md);
  max-height: calc(90vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================
   АДАПТИВНАЯ ТИПОГРАФИКА
   ========================================== */

.tma-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--tg-theme-text-color, oklch(var(--bc)));
  line-height: 1.3;
}

.tma-subtitle {
  font-size: 15px;
  color: var(--tg-theme-subtitle-text-color, oklch(var(--bc) / 0.6));
  line-height: 1.4;
}

.tma-caption {
  font-size: 13px;
  color: var(--tg-theme-hint-color, oklch(var(--bc) / 0.5));
}

/* ==========================================
   SWIPE ACTIONS (для списков)
   ========================================== */

.tma-swipe-container {
  position: relative;
  overflow: hidden;
}

.tma-swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.tma-swipe-action {
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.tma-swipe-action-delete {
  background: var(--tg-theme-destructive-text-color, oklch(var(--er)));
}

.tma-swipe-action-edit {
  background: var(--tg-theme-accent-text-color, oklch(var(--p)));
}

/* ==========================================
   HAPTIC FEEDBACK VISUAL
   ========================================== */

.tma-haptic {
  transition: transform 0.1s ease;
}

.tma-haptic:active {
  transform: scale(0.97);
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Phones (portrait) */
@media (max-width: 479px) {
  .tma-spacing-md { padding: 12px; }
  .tma-title { font-size: 20px; }

  /* Hide desktop-only elements */
  .desktop-only { display: none !important; }
}

/* Phones (landscape) & small tablets */
@media (min-width: 480px) and (max-width: 767px) {
  .tma-section {
    margin-left: var(--tma-spacing-lg);
    margin-right: var(--tma-spacing-lg);
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .tma-section {
    margin-left: var(--tma-spacing-xl);
    margin-right: var(--tma-spacing-xl);
  }

  .tma-bottom-nav-item span {
    font-size: 12px;
  }
}

/* Desktop (show sidebar, hide bottom nav) */
@media (min-width: 1024px) {
  .tma-bottom-nav {
    display: none !important;
  }

  .mobile-only {
    display: none !important;
  }

  body.has-bottom-nav main {
    padding-bottom: 0 !important;
  }
}

/* ==========================================
   УТИЛИТЫ
   ========================================== */

/* Безопасные отступы */
.tma-safe-top { padding-top: var(--tg-safe-area-inset-top, 0px); }
.tma-safe-bottom { padding-bottom: var(--tg-safe-area-inset-bottom, 0px); }
.tma-safe-left { padding-left: var(--tg-safe-area-inset-left, 0px); }
.tma-safe-right { padding-right: var(--tg-safe-area-inset-right, 0px); }
.tma-safe-x {
  padding-left: var(--tg-safe-area-inset-left, 0px);
  padding-right: var(--tg-safe-area-inset-right, 0px);
}
.tma-safe-y {
  padding-top: var(--tg-safe-area-inset-top, 0px);
  padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
}

/* Touch target минимум */
.tma-touch { min-width: var(--tma-touch-target); min-height: var(--tma-touch-target); }

/* Скрытие элементов по размеру экрана */
@media (max-width: 1023px) { .desktop-only { display: none !important; } }
@media (min-width: 1024px) { .mobile-only { display: none !important; } }

/* Утилита hidden */
.hidden { display: none !important; }

/* ==========================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
   ========================================== */

/* Контейнер для иконок с анимацией */
.theme-toggle-icon {
  position: relative;
  width: 16px;
  height: 16px;
}

.theme-toggle-icon .theme-icon-light,
.theme-toggle-icon .theme-icon-dark {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Показанная иконка */
.theme-toggle-icon .theme-icon-light:not(.hidden),
.theme-toggle-icon .theme-icon-dark:not(.hidden) {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Скрытая иконка */
.theme-toggle-icon .theme-icon-light.hidden,
.theme-toggle-icon .theme-icon-dark.hidden {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

/* Стили кнопки переключения темы */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--tg-theme-text-color);
  transition: background-color 0.2s ease;
}

.theme-toggle-btn:hover {
  background-color: var(--tg-theme-secondary-bg-color);
}

.theme-toggle-btn:active {
  transform: scale(0.98);
}

/* ==========================================
   DAISYUI ПЕРЕМЕННЫЕ ДЛЯ TELEGRAM ТЕМЫ
   ========================================== */

/*
 * DaisyUI использует oklch цвета через CSS переменные:
 * --b1, --b2, --b3 (backgrounds)
 * --bc (base content/text)
 * --p (primary), --s (secondary), --a (accent)
 *
 * Переопределяем их для Telegram темы
 */

/* Light theme — переопределяем DaisyUI переменные */
.tma-body {
  /* Base backgrounds */
  --b1: 100% 0 0;           /* #ffffff */
  --b2: 95% 0.01 250;       /* #efeff4 */
  --b3: 92% 0.01 250;       /* slightly darker */

  /* Base content (text) */
  --bc: 0% 0 0;             /* #000000 */

  /* Primary color (Telegram blue) */
  --p: 55% 0.22 250;        /* #007aff */
  --pc: 100% 0 0;           /* white text on primary */

  /* Secondary */
  --s: 70% 0.15 250;
  --sc: 100% 0 0;

  /* Accent */
  --a: 55% 0.22 250;        /* same as primary */
  --ac: 100% 0 0;

  /* Success */
  --su: 65% 0.2 145;        /* green */
  --suc: 100% 0 0;

  /* Warning */
  --wa: 80% 0.18 85;        /* yellow/orange */
  --wac: 0% 0 0;

  /* Error (destructive) */
  --er: 60% 0.25 25;        /* #ff3b30 */
  --erc: 100% 0 0;

  /* Neutral */
  --n: 50% 0.02 250;
  --nc: 100% 0 0;
}

/* Dark theme — переопределяем DaisyUI переменные */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .tma-body {
    /* Base backgrounds (Telegram dark) */
    --b1: 18% 0.02 250;       /* #17212b */
    --b2: 23% 0.025 250;      /* #232e3c */
    --b3: 28% 0.03 250;       /* slightly lighter */

    /* Base content (text) — ВАЖНО для контраста */
    --bc: 96% 0.01 100;       /* #f5f5f5 */

    /* Primary color (Telegram blue, lighter for dark) */
    --p: 70% 0.15 230;        /* #6ab2f2 */
    --pc: 18% 0.02 250;       /* dark text on primary */

    /* Secondary */
    --s: 60% 0.12 230;
    --sc: 18% 0.02 250;

    /* Accent */
    --a: 70% 0.15 230;        /* same as primary */
    --ac: 18% 0.02 250;

    /* Success */
    --su: 65% 0.18 145;
    --suc: 18% 0.02 250;

    /* Warning */
    --wa: 75% 0.15 85;
    --wac: 18% 0.02 250;

    /* Error (destructive) */
    --er: 55% 0.22 20;        /* #ec3942 */
    --erc: 100% 0 0;

    /* Neutral */
    --n: 45% 0.03 250;
    --nc: 96% 0.01 100;
  }
}

/* Manual dark theme class */
.theme-dark .tma-body,
.tma-body.theme-dark,
:root.theme-dark .tma-body {
  /* Base backgrounds (Telegram dark) */
  --b1: 18% 0.02 250;
  --b2: 23% 0.025 250;
  --b3: 28% 0.03 250;

  /* Base content (text) */
  --bc: 96% 0.01 100;

  /* Primary */
  --p: 70% 0.15 230;
  --pc: 18% 0.02 250;

  /* Secondary */
  --s: 60% 0.12 230;
  --sc: 18% 0.02 250;

  /* Accent */
  --a: 70% 0.15 230;
  --ac: 18% 0.02 250;

  /* Success */
  --su: 65% 0.18 145;
  --suc: 18% 0.02 250;

  /* Warning */
  --wa: 75% 0.15 85;
  --wac: 18% 0.02 250;

  /* Error */
  --er: 55% 0.22 20;
  --erc: 100% 0 0;

  /* Neutral */
  --n: 45% 0.03 250;
  --nc: 96% 0.01 100;
}

/* ==========================================
   ЧАТ-ПУЗЫРИ (Activation Assistant и другие)
   ========================================== */

/* Базовые стили для всех чат-пузырей */
.tma-body .chat-bubble {
  color: var(--tg-theme-text-color) !important;
}

/* Входящие сообщения */
.tma-body .chat-bubble.incoming,
.tma-body .chat-bubble[class*="bg-base-200"] {
  background-color: var(--tg-theme-secondary-bg-color) !important;
  color: var(--tg-theme-text-color) !important;
}

/* Исходящие сообщения */
.tma-body .chat-bubble.outgoing,
.tma-body .chat-bubble[class*="bg-success"] {
  background-color: oklch(var(--su) / 0.15) !important;
  color: var(--tg-theme-text-color) !important;
}

/* Текст внутри пузырей */
.tma-body .chat-bubble span,
.tma-body .chat-bubble p,
.tma-body .chat-bubble div {
  color: var(--tg-theme-text-color) !important;
}

/* Время в чат-пузырях (hint color) */
.tma-body .chat-bubble .text-xs.opacity-50,
.tma-body .chat-bubble .chat-time {
  color: var(--tg-theme-hint-color) !important;
  opacity: 1 !important;
}