/* Адаптация для ноутбуков 14–15" (ширина до 1366px).
   На маленьких экранах принудительно активируем мобильную версию. */

/* На больших экранах меню отображается полностью */
@media (min-width: 1367px) {
  .header-menu,
  .nav-menu,
  .top-menu,
  [class*="header-menu"],
  [class*="nav-menu"],
  [class*="top-menu"],
  header nav,
  header .nav {
    display: flex !important;
  }
  
  html.mobile-view,
  body.mobile-view {
    /* Убираем мобильную версию на больших экранах */
  }
}

/* На маленьких экранах ноутбуков (14-15") активируем мобильную версию */
@media (max-width: 1366px) {
  /* Скрываем большое горизонтальное меню */
  .header-menu,
  .nav-menu,
  .top-menu,
  [class*="header-menu"],
  [class*="nav-menu"],
  [class*="top-menu"],
  header nav,
  header .nav {
    display: none !important;
  }
  
  /* Скрываем кастомную кнопку меню, если она была создана */
  .mobile-header-toggle,
  .mobile-header-panel,
  .mobile-header-backdrop {
    display: none !important;
  }
  
  /* Принудительно применяем мобильные стили */
  html.mobile-view,
  body.mobile-view {
    /* Активируем мобильную версию через класс */
  }
  
  /* Принудительно показываем мобильные элементы, если они есть */
  [class*="mobile"]:not(.mobile-header-toggle):not(.mobile-header-panel):not(.mobile-header-backdrop),
  [class*="Mobile"]:not(.mobile-header-toggle):not(.mobile-header-panel):not(.mobile-header-backdrop),
  [class*="drawer"],
  [class*="Drawer"],
  [class*="sidebar"],
  [class*="Sidebar"],
  [class*="hamburger"],
  [class*="Hamburger"],
  [data-mobile="true"],
  [aria-label*="menu" i],
  [aria-label*="navigation" i] {
    display: block !important;
  }
  
  /* Скрываем десктопные элементы */
  [class*="desktop"],
  [class*="Desktop"],
  [data-desktop="true"] {
    display: none !important;
  }
  
  /* Принудительно применяем мобильные стили для основного контента */
  #root > * {
    /* Убеждаемся, что контент адаптируется */
  }
  
  /* Если есть мобильное меню в React, показываем его */
  button[aria-label*="menu" i],
  button[aria-label*="Menu" i],
  [role="button"][aria-label*="menu" i] {
    display: inline-flex !important;
  }
  
  /* Принудительно применяем мобильные стили для всех элементов на маленьких экранах */
  html.mobile-view *,
  body.mobile-view * {
    /* Убеждаемся, что все элементы адаптируются */
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Убеждаемся, что viewport не увеличивается */
  html.mobile-view,
  body.mobile-view {
    zoom: 1 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  
  /* Скрываем горизонтальное меню и показываем вертикальное, если есть */
  html.mobile-view .header-menu,
  html.mobile-view .nav-menu,
  html.mobile-view .top-menu,
  body.mobile-view .header-menu,
  body.mobile-view .nav-menu,
  body.mobile-view .top-menu {
    display: none !important;
  }
  
  /* Адаптируем основной контент для мобильных устройств */
  html.mobile-view #root,
  body.mobile-view #root {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Адаптируем контейнеры для мобильных устройств */
  html.mobile-view [class*="container"],
  body.mobile-view [class*="container"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Адаптируем карточки и блоки для мобильных устройств */
  html.mobile-view [class*="card"],
  html.mobile-view [class*="Card"],
  body.mobile-view [class*="card"],
  body.mobile-view [class*="Card"] {
    width: 100% !important;
    margin: 0.5rem 0 !important;
    padding: 1rem !important;
  }
  
  /* Адаптируем таблицы для мобильных устройств */
  html.mobile-view table,
  body.mobile-view table {
    font-size: 0.875rem !important;
    width: 100% !important;
    display: table !important;
    overflow-x: auto !important;
    table-layout: auto !important;
  }
  
  /* Убеждаемся, что контейнеры с данными отображаются */
  html.mobile-view [class*="server"],
  html.mobile-view [class*="Server"],
  html.mobile-view [class*="referral"],
  html.mobile-view [class*="Referral"],
  html.mobile-view [class*="data"],
  html.mobile-view [class*="Data"],
  html.mobile-view [class*="content"],
  html.mobile-view [class*="Content"],
  body.mobile-view [class*="server"],
  body.mobile-view [class*="Server"],
  body.mobile-view [class*="referral"],
  body.mobile-view [class*="Referral"],
  body.mobile-view [class*="data"],
  body.mobile-view [class*="Data"],
  body.mobile-view [class*="content"],
  body.mobile-view [class*="Content"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Убеждаемся, что списки и таблицы данных отображаются */
  html.mobile-view [class*="list"],
  html.mobile-view [class*="List"],
  html.mobile-view [class*="table"],
  html.mobile-view [class*="Table"],
  body.mobile-view [class*="list"],
  body.mobile-view [class*="List"],
  body.mobile-view [class*="table"],
  body.mobile-view [class*="Table"] {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Убеждаемся, что элементы загрузки и ошибок отображаются */
  html.mobile-view [class*="loading"],
  html.mobile-view [class*="Loading"],
  html.mobile-view [class*="error"],
  html.mobile-view [class*="Error"],
  html.mobile-view [class*="empty"],
  html.mobile-view [class*="Empty"],
  body.mobile-view [class*="loading"],
  body.mobile-view [class*="Loading"],
  body.mobile-view [class*="error"],
  body.mobile-view [class*="Error"],
  body.mobile-view [class*="empty"],
  body.mobile-view [class*="Empty"] {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Адаптируем кнопки для мобильных устройств, но исключаем кнопки в input-group */
  html.mobile-view button:not(.input-group button):not(.input-group .btn):not(.promo-input-container button):not(.promo-input-container .btn),
  html.mobile-view .button:not(.input-group .button):not(.promo-input-container .button),
  body.mobile-view button:not(.input-group button):not(.input-group .btn):not(.promo-input-container button):not(.promo-input-container .btn),
  body.mobile-view .button:not(.input-group .button):not(.promo-input-container .button) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    margin: 0.5rem 0 !important;
  }
  
  /* Убеждаемся, что кнопки в input-group отображаются правильно */
  html.mobile-view .input-group,
  html.mobile-view .promo-input-container,
  body.mobile-view .input-group,
  body.mobile-view .promo-input-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  html.mobile-view .input-group .btn,
  html.mobile-view .input-group button,
  html.mobile-view .input-group button.btn,
  html.mobile-view .input-group [role="button"],
  html.mobile-view .promo-input-container .btn,
  html.mobile-view .promo-input-container button,
  html.mobile-view .promo-ok-button,
  body.mobile-view .input-group .btn,
  body.mobile-view .input-group button,
  body.mobile-view .input-group button.btn,
  body.mobile-view .input-group [role="button"],
  body.mobile-view .promo-input-container .btn,
  body.mobile-view .promo-input-container button,
  body.mobile-view .promo-ok-button {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    line-height: 1.5 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 12px !important;
    background: var(--primary, #6366f1) !important;
    color: var(--tg-theme-button-text-color, #ffffff) !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
  }
  
  html.mobile-view .input-group .input,
  html.mobile-view .promo-input-container input,
  body.mobile-view .input-group .input,
  body.mobile-view .promo-input-container input {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  
  /* Дополнительные правила для кнопки "ОК" в промокоде - все возможные варианты */
  html.mobile-view .input-group button[type="button"],
  html.mobile-view .input-group button[type="submit"],
  html.mobile-view .input-group .btn[type="button"],
  html.mobile-view .input-group .btn[type="submit"],
  html.mobile-view .promo-input-container button[type="button"],
  html.mobile-view .promo-input-container button[type="submit"],
  html.mobile-view .promo-input-container .btn[type="button"],
  html.mobile-view .promo-input-container .btn[type="submit"],
  body.mobile-view .input-group button[type="button"],
  body.mobile-view .input-group button[type="submit"],
  body.mobile-view .input-group .btn[type="button"],
  body.mobile-view .input-group .btn[type="submit"],
  body.mobile-view .promo-input-container button[type="button"],
  body.mobile-view .promo-input-container button[type="submit"],
  body.mobile-view .promo-input-container .btn[type="button"],
  body.mobile-view .promo-input-container .btn[type="submit"],
  html.mobile-view #cleanPromoCheckBtn,
  html.mobile-view button#cleanPromoCheckBtn,
  body.mobile-view #cleanPromoCheckBtn,
  body.mobile-view button#cleanPromoCheckBtn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 60px !important;
    max-width: none !important;
    height: auto !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: var(--radius, 16px) !important;
    background: var(--primary, #6366f1) !important;
    color: var(--tg-theme-button-text-color, #ffffff) !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  /* Убеждаемся, что все кнопки в контейнерах промокода видны - максимальная специфичность */
  html.mobile-view .card .input-group button,
  html.mobile-view .card .input-group .btn,
  html.mobile-view .card .promo-input-container button,
  html.mobile-view .card .promo-input-container .btn,
  html.mobile-view [class*="promo-code"] .input-group button,
  html.mobile-view [class*="promo-code"] .input-group .btn,
  html.mobile-view [class*="promo-code"] .promo-input-container button,
  html.mobile-view [class*="promo-code"] .promo-input-container .btn,
  body.mobile-view .card .input-group button,
  body.mobile-view .card .input-group .btn,
  body.mobile-view .card .promo-input-container button,
  body.mobile-view .card .promo-input-container .btn,
  body.mobile-view [class*="promo-code"] .input-group button,
  body.mobile-view [class*="promo-code"] .input-group .btn,
  body.mobile-view [class*="promo-code"] .promo-input-container button,
  body.mobile-view [class*="promo-code"] .promo-input-container .btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0.75rem 1.25rem !important;
  }
  
  /* Убеждаемся, что все кнопки в контейнерах промокода видны */
  html.mobile-view [class*="promo"] button,
  html.mobile-view [class*="promo"] .btn,
  html.mobile-view [class*="Promo"] button,
  html.mobile-view [class*="Promo"] .btn,
  body.mobile-view [class*="promo"] button,
  body.mobile-view [class*="promo"] .btn,
  body.mobile-view [class*="Promo"] button,
  body.mobile-view [class*="Promo"] .btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
  }
}

/* Fix for admin/user header dropdowns:
   На десктопе некоторые правила могли оставлять `.dropdown-menu` скрытой (display:none),
   даже когда она имеет класс `.active`.
*/
.dropdown-menu.active {
  display: block !important;
}