/* =====================================================================
   Мобильная версия сайта (2026-10-18). Всё внутри @media (max-width: 760px):
   на компьютере ничего не меняется. Подключается последним на всех страницах.
   ===================================================================== */
.mobile-tabbar { display: none; }

@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* --- основа: без масштаба +18.75% (он для больших экранов), без бокового скролла --- */
  html { zoom: 1 !important; }
  html, body { overflow-x: hidden; max-width: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  input, select, textarea, .ui-field { font-size: 16px !important; } /* iOS не зумит поле при фокусе */

  /* --- верхняя шапка: логотип + меню, лишние кнопки прячем --- */
  .topnav { padding: 0 12px !important; gap: 8px !important; height: 56px !important; --navbar-height: 56px; }
  .topnav-brand { font-size: 0.95rem !important; gap: 8px !important; }
  .topnav-actions { gap: 6px !important; margin-left: auto; }
  #btn-fullscreen { display: none !important; }
  .navbar-action-btn { width: 38px !important; height: 38px !important; }
  .topnav-toggle { order: 3; }
  .topnav-menu { top: 56px !important; }
  .topnav-menu .topnav-link { padding: 13px 14px !important; font-size: 15px !important; }

  /* --- нижняя панель разделов (как в приложениях) --- */
  .mobile-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(10, 11, 12, 0.94); backdrop-filter: blur(14px);
    border-top: 1px solid var(--tt-border-strong);
  }
  .mobile-tabbar a, .mobile-tabbar button {
    display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 10px;
    background: transparent; color: var(--tt-muted); text-decoration: none; font: 500 0.66rem var(--display-font);
  }
  .mobile-tabbar i { font-size: 19px; }
  .mobile-tabbar a.on { color: var(--tt-accent); background: rgba(82, 199, 154, 0.1); }
  .mobile-tabbar a:active, .mobile-tabbar button:active { background: rgba(255, 255, 255, 0.06); }

  /* --- страница: поля, заголовки --- */
  .main-wrapper { padding: 14px 12px 20px !important; }
  .page-header { margin-bottom: 12px !important; }
  .page-title { font-size: 1.45rem !important; }
  .page-subtitle { font-size: 0.78rem !important; }
  .page-toolbar { gap: 10px !important; }
  .page-toolbar > .ui-btn { flex: 1 1 auto; justify-content: center; }
  .navbar-search-wrapper { max-width: none !important; flex: 1 1 100% !important; order: 3; }
  .navbar-stats { margin-left: 0 !important; flex: 1 1 auto; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  #updated-at { width: 100%; order: 4; font-size: 0.72rem; }
  .page-filter-row { margin-bottom: 12px; }
  .project-switcher { display: grid !important; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .project-switcher button { padding: 9px 4px !important; font-size: 0.8rem !important; }
  .ui-btn { min-height: 42px; }
  .ui-btn-sm { min-height: 34px; }

  /* --- дашборд: проблемы сверху, затем серверы, история внизу --- */
  .dashboard-layout { display: flex !important; flex-direction: column !important; gap: 14px !important; }
  .dashboard-side { display: contents !important; }
  .problems-card { order: -1; max-height: none !important; }
  .events-card { order: 2; max-height: 70vh; }
  .category-block { margin-bottom: 18px !important; }

  /* карточка сервера: имя на всю ширину, ниже статус и кнопки, ниже доступы и плитки */
  .server-row { padding: 12px 12px 12px 16px !important; gap: 10px !important; }
  .sr-top { flex-wrap: wrap; row-gap: 8px; }
  .sr-top .sr-name { flex: 1 1 auto; font-size: 1rem; white-space: normal; }
  .sr-top .sr-hoster { display: none; }
  .sr-spacer { flex-basis: 100%; height: 0; }
  .sr-top .sr-uptime-inline { margin-right: auto; }
  .sr-top .sr-actions { margin-left: 0 !important; }
  .sr-top .sr-actions .ui-btn-sm { width: 38px !important; height: 38px !important; }
  .sr-bottom { grid-template-columns: 1fr !important; gap: 10px !important; }
  .sr-access { grid-template-columns: 1fr auto; }
  .sr-access .sr-ip { min-width: 0; }
  .sr-access .sr-ip b { overflow: hidden; text-overflow: ellipsis; }
  .sr-bottom .sr-metrics { display: grid !important; grid-template-columns: repeat(3, 1fr); }
  .sr-bottom .sr-metrics .mt { max-width: none; }
  .sr-bottom .sr-metrics .mt-wide { grid-column: span 3; max-width: none; }
  .mt-l i { display: inline !important; }
  .sr-bottom .sr-home .home-box { width: 100%; }
  .home-box .hb-row { gap: 16px; }
  .sr-top .tooltip-wrap::after { right: auto; left: 0; width: min(260px, 80vw); }

  /* правая колонка в виде карточек во всю ширину */
  .side-panel-card { padding: 12px !important; }
  .problem-item { padding: 10px !important; }
  .ev-item { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .ev-item .ev-time { grid-column: 3; }
  .ev-item .ev-state { grid-column: 2 / 4; justify-self: start; }

  /* --- таблицы: строка = карточка, у значения подпись колонки --- */
  .table-responsive, .table-wrap { overflow: visible !important; }
  table.table-custom, table.table-custom tbody { display: block; width: 100%; }
  table.table-custom thead { display: none; }
  table.table-custom tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
    margin: 0 0 10px; padding: 12px; border: 1px solid var(--tt-border); border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
  }
  table.table-custom td { display: grid; gap: 2px; padding: 0 !important; border: 0 !important; min-width: 0; word-break: break-word; }
  table.table-custom td[data-label]::before {
    content: attr(data-label); font: 500 0.62rem var(--display-font); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--tt-faint);
  }
  table.table-custom td:first-child { grid-column: 1 / -1; font-size: 1rem; }
  table.table-custom td:first-child::before { display: none; }
  table.table-custom td:last-child:not([data-label]), table.table-custom td[data-label=""] { grid-column: 1 / -1; }
  table.table-custom td[data-label=""]::before { display: none; }
  table.table-custom td[colspan] { grid-column: 1 / -1; }
  table.table-custom td .d-flex, table.table-custom td .ui-btn-group { flex-wrap: wrap; }
  .card:has(> .table-custom), .card:has(table.table-custom) { padding: 10px !important; background: transparent !important; border: 0 !important; }

  /* --- карточки-итоги (биллинг и т.п.) --- */
  .stat-card .stat-value, .stat-value { font-size: 1.4rem !important; word-break: normal; white-space: nowrap; }
  .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* --- все окна: на весь экран, кнопки снизу под пальцем --- */
  .overlay, .ui-modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .ui-modal, .infra-modal {
    width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important;
    margin: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column;
  }
  .ui-modal-body, .infra-modal .body { flex: 1; overflow-y: auto; }
  .ui-modal-footer, .infra-modal footer { position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; flex-wrap: wrap; }
  .ui-modal-footer .ui-btn { flex: 1 1 auto; }
  .ui-modal.ui-modal-sm { height: auto; max-height: 100dvh !important; margin-top: auto !important; border-radius: 16px 16px 0 0 !important; }
  .ui-form-row.cols-2, .ui-form-row.cols-3, .form-grid { grid-template-columns: 1fr !important; }

  /* окна сущностей /infra, мастер новой ноды, конфиг: паспорт сверху, вкладки, кнопка снизу */
  .insp2, .insp2.wiz2, .insp2.cfg2 {
    width: 100vw !important; height: 100dvh !important; margin: 0 !important; border-radius: 0 !important;
    grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .insp2-side {
    max-height: 30dvh; padding: 14px 16px 10px !important; gap: 10px !important;
    border-right: 0 !important; border-bottom: 1px solid var(--tt-border);
  }
  .insp2-title { font-size: 1.1rem !important; }
  .insp2-facts { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .insp2-fact { grid-template-columns: 1fr !important; gap: 2px !important; padding: 5px 0 !important; }
  .insp2-actions { grid-template-columns: 1fr 1fr; }
  .insp2-actions .insp2-cap { grid-column: 1 / -1; }
  .insp2-act { padding: 9px 10px !important; }
  .insp2-act-go { display: none; }
  .insp2-head { padding: 6px 8px 0 10px !important; }
  .insp2-tabs { overflow-x: auto !important; }
  .insp2-tab { padding: 10px 10px 12px !important; white-space: nowrap; font-size: 0.82rem !important; }
  .insp2-body { padding: 14px !important; }
  .insp2-grid { grid-template-columns: 1fr !important; }
  .insp2-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px !important; flex-wrap: wrap; }
  .insp2-foot .insp2-state { width: 100%; }
  .insp2-foot .ui-btn { flex: 1 1 auto; }
  .ui-choice-grid { grid-template-columns: 1fr !important; }
  .wiz2-seg { grid-auto-flow: row !important; }
  .wiz2-seg.small { grid-auto-flow: column !important; }
  .wiz2 .insp2-side { max-height: 24dvh; }
  .cfg2 .insp2-side { max-height: 38dvh; }
  .cfg2-code { height: 55dvh !important; min-height: 260px !important; }

  /* окно хода установки и плашка свёрнутой установки */
  #progress-panel {
    left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important;
    transform: none !important; border-radius: 0 !important;
  }
  #progress-panel.open { transform: none !important; }
  .term-screen { font-size: 0.74rem !important; }
  .term-time { display: none; }
  #progress-mini { left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; }

  /* уведомления - над нижней панелью, во всю ширину */
  .ui-toast-stack, .toast-stack, .toasts { left: 10px !important; right: 10px !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; width: auto !important; }
}

/* =====================  /infra на телефоне  ===================== */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .infra-embed { top: 56px !important; bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .infra-embed .canvas, #canvas { touch-action: none; }
  .infra-embed .legend { display: none !important; }
}

/* ===== правки после первого прогона на телефоне ===== */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* счётчики дашборда (всего / работает / блок / авария) - видны и на телефоне */
  .navbar-stats { display: flex !important; }
  .navbar-stat-pill { padding: 5px 10px !important; }

  /* таблицы: содержимое ячейки - строкой, не столбиком */
  table.table-custom td { display: block !important; }
  table.table-custom td[data-label]::before { display: block; margin-bottom: 3px; }
  table.table-custom td:first-child::before { display: none; }
  table.table-custom td:last-child { display: flex !important; gap: 8px; flex-wrap: wrap; align-items: center; }
  table.table-custom td:last-child::before { width: 100%; }
  table.table-custom td .ui-btn, table.table-custom td .sr-action-btn { min-width: 42px; min-height: 40px; }

  /* шапка схемы /infra: название сверху, ниже проект и кнопки лентой */
  .infra-embed .topbar { flex-wrap: wrap !important; height: auto !important; padding: 8px 10px !important; gap: 8px !important; }
  .infra-embed .brand { min-width: 0; }
  .infra-embed .brand-title { font-size: 0.95rem; }
  .infra-embed .top-actions { width: 100%; display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .infra-embed .top-actions::-webkit-scrollbar { display: none; }
  .infra-embed .top-actions > * { flex: 0 0 auto; }
  .infra-embed .infra-project-switcher { display: inline-flex !important; width: auto !important; }
  .infra-embed .infra-project-switcher button { padding: 7px 12px !important; }
  .infra-embed .top-actions .ui-btn { min-height: 38px; padding: 0 12px !important; white-space: nowrap; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* окна - поверх шапки и нижней панели разделов */
  .overlay, .insp-overlay, #modal-root .overlay, .ui-modal-overlay { z-index: 1100 !important; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .insp2, .insp2.wiz2, .insp2.cfg2 { grid-template-columns: minmax(0, 1fr) !important; overflow: hidden; }
  .insp2-side, .insp2-main { min-width: 0; max-width: 100vw; }
  .insp2-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .insp2-fact dd { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* окна /infra живут внутри .infra-embed (свой слой под шапкой) - когда окно
     открыто, поднимаем весь этот слой над шапкой и нижней панелью */
  .infra-embed:has(.overlay) { z-index: 1100 !important; top: 0 !important; bottom: 0 !important; }
  .infra-embed .overlay { position: fixed !important; inset: 0 !important; display: block !important; }
  .infra-embed .overlay > .insp2, .infra-embed .overlay > .ui-modal, .infra-embed .overlay > .infra-modal { position: absolute; inset: 0; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .insp2-main { grid-template-columns: minmax(0, 1fr) !important; }
  .insp2-body { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
  .insp2-body > *, .insp2-grid > * { min-width: 0; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .insp2-foot .insp2-state { display: none; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  body:has(.overlay) #progress-mini { display: none !important; }
}
/* Safari на iPhone не раздувает шрифт сам (иначе текст вылезает из блоков) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* /infra: блок схемы не шире экрана (раньше шапка распирала его вправо) */
  .infra-embed .app, .infra-embed .topbar, .infra-embed .workspace { min-width: 0 !important; max-width: 100vw !important; width: 100% !important; }
  /* кнопки шапки схемы - не лентой с прокруткой, а видно все сразу:
     проект во всю ширину, под ним 4 кнопки сеткой 2×2 */
  .infra-embed .top-actions { display: grid !important; grid-template-columns: 1fr 1fr; overflow: visible !important; gap: 6px !important; }
  .infra-embed .top-actions > * { min-width: 0; }
  .infra-embed .infra-project-switcher { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; }
  .infra-embed .infra-project-switcher button { padding: 8px 6px !important; }
  .infra-embed .top-actions .ui-btn { width: 100%; justify-content: center; padding: 0 8px !important; font-size: 0.82rem !important; }
}

/* ===== окна редактирования на телефоне v2 (2026-10-18) =====
   Окно листается целиком: сверху паспорт (факты и кнопки действий видны
   полностью), вкладки прилипают к верху, кнопка сохранения - к низу. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .insp2, .insp2.wiz2, .insp2.cfg2 {
    display: block !important; overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .insp2 .insp2-side { max-height: none !important; overflow: visible !important; }
  .insp2 .insp2-main { display: block !important; }
  .insp2 .insp2-head {
    position: sticky; top: 0; z-index: 3; background: #101214;
    box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.8);
  }
  .insp2 .insp2-body { overflow: visible !important; animation: none !important; min-height: 40dvh; }
  .insp2 .insp2-foot { position: sticky; bottom: 0; z-index: 3; background: #101214; border-top: 1px solid var(--tt-border); }
  .cfg2 .cfg2-nav { max-height: none; }

  /* обычные окна (каскад, сервер, DNS, подтверждения): шапка - тело с прокруткой -
     кнопки внизу, без «прилипания», которое в Safari уводило кнопки наверх */
  .ui-modal { display: flex !important; flex-direction: column !important; }
  .ui-modal > .ui-modal-header { flex: 0 0 auto; }
  .ui-modal > .ui-modal-body, #cascade-form .ui-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .ui-modal > .ui-modal-footer { position: static !important; flex: 0 0 auto; order: 99; }
  #cascade-form { overflow: hidden !important; }
  #cascade-form .ui-select-list { max-height: 45dvh; }
  .ui-modal-footer { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .ui-modal-footer > :only-child { grid-column: 1 / -1; }
  .ui-modal-footer .ui-btn-primary:last-child { grid-column: 1 / -1; order: 2; }
  .ui-modal-footer .ui-btn-danger, .ui-modal-footer .ui-btn-danger-ghost { order: 1; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* крестик закрытия всегда виден в правом верхнем углу, где бы ни был лист */
  .insp2 .insp2-head .insp-x {
    position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 6;
    width: 40px !important; height: 40px !important; margin: 0 !important;
    background: rgba(40, 18, 18, 0.92) !important; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
  .insp2 .insp2-id { padding-right: 46px; }
  .insp2 .insp2-tabs { padding-right: 4px; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* кнопки окна - всегда у нижнего края экрана */
  .insp2 .insp2-foot { position: fixed !important; left: 0; right: 0; bottom: 0; }
  .insp2 { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  /* анимация появления оставляла transform на окне, и закреплённые кнопки и
     крестик ездили вместе с прокруткой (особенно в Safari) - на телефоне без неё */
  .insp2, .insp2.wiz2, .insp2.cfg2 { animation: none !important; transform: none !important; }
}