/* Mobile Support CSS для Bootstrap 3 | Авто-применение на смартфонах/планшетах */
@media (max-width: 767px) {

  /* Основные отступы — меньше на мобильных */
  .padding-15 { padding: 10px !important; }
  .premium-page { padding: 5px !important; }

  /* Заголовки — меньше шрифт */
  .support-classic-title { 
    font-size: 1.3rem !important; 
    margin-bottom: 10px !important; 
  }
  h2.support-classic-title { font-size: 1.4rem !important; }

  /* Header: кнопки в столбик + full-width */
  .support-classic-header .col-sm-4,
  .support-classic-actions { 
    text-align: center !important; 
    margin-top: 15px !important; 
  }
  .support-classic-actions .btn,
  .support-classic-actions button { 
    display: block !important; 
    width: 100% !important; 
    margin-bottom: 8px !important; 
    padding: 12px 16px !important;  /* Touch-friendly (44px min height) */
    font-size: 16px !important; 
  }
  .support-inline-form { 
    width: 100% !important; 
    margin: 8px 0 !important; 
  }

  /* Статистика админа — скрыть/маленький шрифт */
  .support-admin-stats { 
    font-size: 12px !important; 
    opacity: 0.8; 
    margin-top: 5px; 
  }

  /* ТАБЛИЦЫ ТИКЕТОВ — идеальный скролл + компакт */
  .table-scrollable,
  .table-responsive { 
    -webkit-overflow-scrolling: touch;  /* Smooth iOS */
    overflow-x: auto !important; 
    margin-bottom: 15px !important; 
  }
  .support-ticket-table { 
    min-width: 600px !important;  /* Заставляем скролл */
    font-size: 13px !important; 
  }
  .support-ticket-table th,
  .support-ticket-table td { 
    padding: 6px 4px !important; 
    white-space: nowrap;  /* Нет переноса */
    vertical-align: middle !important; 
  }
  .support-ticket-table .btn { 
    padding: 4px 8px !important; 
    font-size: 12px !important; 
    margin: 0 2px; 
  }

  /* Скрываем второстепенные колонки (опционально, если есть hidden-xs) */
  th.hidden-xs, td.hidden-xs { display: none !important; }

  /* Кнопки действий — компакт + block */
  .support-btn,
  button.support-stop-btn,
  button.support-start-btn { 
    min-height: 44px !important;  /* Apple Human Interface Guidelines */
  }
  .btn-group-vertical-xs .btn,
  .btn-block-xs { display: block !important; width: 100% !important; }

  /* Карточки/панели — полная ширина */
  .support-card,
  .premium-card { 
    margin-bottom: 15px !important; 
  }
  .panel-body,
  .premium-card-body { padding: 15px !important; }

  /* Навигация — центр + меньше */
  .support-nav { 
    text-align: center !important; 
    font-size: 14px !important; 
  }
  .support-nav a { 
    display: inline-block !important; 
    padding: 8px 12px !important; 
  }

  /* Alerts — full-width */
  .alert { 
    margin: 10px 0 !important; 
    border-radius: 5px !important; 
  }

  /* Спиннер + disabled — лучше виден */
  button:disabled { 
    opacity: 0.6 !important; 
  }
  .fa-spinner { font-size: 18px !important; }

  /* Пустые состояния */
  .support-empty { 
    padding: 40px 20px !important; 
    text-align: center; 
    font-size: 16px !important; 
  }

  /* Кастомные твои классы (добавь если нужно) */
  .table-scrollable-borderless { border: none !important; }
  .red-salsa, .green-salsa { border-width: 2px !important; }
}

/* Планшеты (768-991px) — лёгкие правки */
@media (min-width: 768px) and (max-width: 991px) {
  .support-ticket-table { font-size: 14px !important; }
  .support-classic-actions .btn { margin-right: 5px !important; }
}

/* МОНИТОРИНГ СЕРВЕРОВ — MOBILE FIX (без добавления классов!) */
@media (max-width: 767px) {

  /* Колонки: col-xs-8 (data/nav) ТВЕРДО сверху, col-xs-4 (статистика) СНИЗУ — столбик */
  .padding-15 .row > [class*="col-xs-"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
  }
  .padding-15 .col-xs-8 { order: -1; }  /* col-xs-8 первым (если BS3 flex) */
  .padding-15 .col-xs-4 { margin-top: 20px; border-top: 1px solid #444; padding-top: 15px; }

  /* Блоки мониторинга — full-width + тени */
  .block_full.monitoring {
    width: 100vw !important;
    max-width: 100% !important;
    margin: 0 -10px 15px -10px !important;  /* Edge-to-edge */
    padding: 20px !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #2c3e50, #34495e) !important;
  }

  /* Статистика: заголовок компакт */
  .block_full.monitoring h3 {
    font-size: 1.3rem !important;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
    color: white !important;
  }
  .block_full.monitoring center { display: block !important; }

  /* Список статистики: flex + иконка слева (убираем margin-left и <br>) */
  .block_full.monitoring .name {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: 15px !important;
    color: #ecf0f1 !important;  /* Светлый текст */
    margin: 12px 0 !important;
    padding: 12px 0 !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;  /* Разделители */
    white-space: nowrap !important;
  }
  .block_full.monitoring .name:last-child { border-bottom: none !important; }
  .block_full.monitoring .name i {
    width: 24px !important;
    height: 24px !important;
    margin-right: 15px !important;
    font-size: 20px !important;
    text-align: center !important;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 4px;
    flex-shrink: 0;
  }
  .block_full.monitoring .name[style*="margin-left"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* ПРОГРЕСС-БАР {servers_%}% — ЖИРНАЯ цветная полоса (зелёный/красный градиент) */
  .block_full.monitoring .name[style*="width"] {
    height: 12px !important;
    margin: 20px 0 !important;
    border-radius: 10px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    background: linear-gradient(90deg,
      #e74c3c 0%,      /* Красный 0-30% */
      #f39c12 30%,     /* Оранжевый 30-60% */
      #f1c40f 60%,     /* Жёлтый 60-80% */
      #27ae60 80%      /* Зелёный 80-100% */
    ) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    animation: glow 2s ease-in-out infinite alternate !important;
  }

  /* {data} и {nav}: скролл если таблица/список */
  .padding-15 .col-xs-8 {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .padding-15 .col-xs-8 table,
  .padding-15 .col-xs-8 [class*="table"] {
    min-width: 600px !important;
    font-size: 13px !important;
  }
  .padding-15 th, .padding-15 td { padding: 8px 6px !important; white-space: nowrap; }

  /* Убираем ВСЕ <br> (они ломают layout) */
  .block_full.monitoring br { display: none !important; }

  /* Общие отступы страницы */
  .padding-15 { padding: 8px !important; }
}

/* АНИМАЦИИ */
@keyframes glow {
  0% { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 4px 20px rgba(39,174,96,0.6); }
}