/* ==========================================================================
   RHL Panel — мобильный адаптивный слой.
   Подключается ПОСЛЕ встроенных <style> в каждом шаблоне, поэтому
   переопределяет десктопные стили на узких экранах. На широких экранах
   (>768px) почти ничего не трогает — десктоп остаётся как был.
   ========================================================================== */

/* Кнопка-бургер: скрыта на десктопе, показывается на мобиле */
.mobile-nav-toggle{
  display:none;
  background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--text);cursor:pointer;
  width:38px;height:34px;flex-shrink:0;
  align-items:center;justify-content:center;
  font-size:18px;line-height:1;padding:0;
}
.mobile-nav-toggle:active{background:var(--surface2,rgba(255,255,255,.05))}

/* Кнопка "Серверы": скрыта на десктопе, показывается на мобиле (стр. логов) */
.mobile-servers-toggle{
  display:none;
  background:var(--surface2,rgba(255,255,255,.05));
  border:1px solid var(--border);border-radius:6px;
  color:var(--text);cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;padding:0 12px;height:34px;flex-shrink:0;
  margin-left:auto;
}
.mobile-servers-toggle:active{background:rgba(248,81,73,.15)}

/* Затемнение позади выехавшего меню */
.mobile-nav-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;
}
.mobile-nav-backdrop.open{display:block}

@media (max-width: 768px){

  /* ---- Шапка ---- */
  header{
    padding:0 12px !important;
    height:52px !important;
    gap:10px !important;
  }
  .hlogo{font-size:15px !important}
  .mobile-nav-toggle{display:flex}
  .mobile-servers-toggle{display:inline-flex;align-items:center}

  /* Горизонтальную навигацию прячем и превращаем в выезжающую панель */
  header nav{
    position:fixed !important;
    top:0;left:0;bottom:0;
    width:240px;max-width:80vw;
    background:var(--surface) !important;
    border-right:1px solid var(--border);
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
    padding:60px 10px 16px !important;
    margin:0 !important;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:999;
    overflow-y:auto;
  }
  header nav.open{transform:translateX(0)}
  header nav a{
    padding:12px 14px !important;
    border-radius:8px;
    font-size:15px !important;
    display:block;
  }
  header nav a.active{background:rgba(248,81,73,.12)}

  /* Профиль справа: прячем имя, оставляем аватар + выход компактно */
  .uinfo{gap:6px !important;font-size:12px !important}
  .uinfo strong{display:none}
  .spacer{display:none !important}

  /* ---- Боковая панель index (логи/чат) превращается в выезжающую ---- */
  .layout{flex-direction:column !important;overflow:visible !important}
  aside{
    position:fixed !important;
    top:52px;left:0;bottom:0;
    width:82vw !important;max-width:320px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:997;
    border-right:1px solid var(--border);
  }
  aside.open{transform:translateX(0)}

  /* ---- Основная область ---- */
  main{overflow:visible !important}
  .mbar{
    padding:8px 12px !important;
    gap:6px !important;
  }
  .mbar .sw input{width:100% !important;box-sizing:border-box}
  .sw{flex:1 1 100%}
  .btnrow{margin-left:0 !important;flex-wrap:wrap}

  /* Лог-строки: время над текстом, перенос */
  .ll{
    flex-direction:column !important;
    padding:6px 12px !important;
    gap:2px;
  }
  .lts{min-width:0 !important;font-size:11px}
  .llv{min-width:0 !important;text-align:left;margin-right:0}

  /* ---- Таблицы: горизонтальный скролл вместо разваливания ---- */
  .page,.tablewrap,.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}
  table th,table td{padding:8px 10px !important;font-size:13px !important}

  /* ---- Модалка на весь экран ---- */
  #modal{width:100vw !important;max-width:100vw !important;height:100vh !important;border-radius:0 !important}
  #modal-bg{padding:0 !important}

  /* ---- Live: поля в один столбец ---- */
  .live-grid,#live-grid,.fields{
    grid-template-columns:1fr !important;
    display:grid !important;gap:12px !important;padding:12px !important;
  }
  .field-card canvas{width:100% !important;height:auto !important}

  /* ---- Панель ввода чата прижата к низу, удобна для пальца ---- */
  .chat-send{padding:10px 12px !important}
  .chat-send input{font-size:16px !important}  /* 16px — iOS не зумит при фокусе */
  .chat-send button{padding:0 16px !important}

  /* Кнопки кик/бан крупнее для пальца */
  .kick-btn,.ban-btn,[data-action]{min-height:34px;min-width:34px}

  /* Общая защита от горизонтального переполнения */
  body{overflow-x:hidden}

  /* ---- Сайдбар «Онлайн» (карточки по командам): на мобиле — не колонка
     рядом с логами (сплющивает их до полоски), а блок сверху, во всю ширину,
     с ограниченной высотой и своим скроллом. ---- */
  .main-body{flex-direction:column !important;overflow:visible !important}
  .online-sidebar{width:100% !important;max-height:38vh;border-left:none !important;border-bottom:1px solid var(--border)}
  .os-cols{grid-template-columns:1fr 1fr !important}
}

/* Очень узкие телефоны */
@media (max-width: 380px){
  .hlogo span{display:none}
  header nav{width:88vw}
}