/* Модуль «VPN и Revit Server»: вкладка настроек и админка.
   Только токены портала — кегль, отступы и радиусы числами не пишутся
   (docs/ОБЛИК-И-ШКАЛЫ.md). */

.vpn { display: flex; flex-direction: column; gap: var(--s-4); }
.vpn .card { margin: 0; }

.vpn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.vpn-row--end { justify-content: flex-end; flex-wrap: nowrap; }
.vpn-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; }

.vpn-launcher .card__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.vpn-launcher__text { display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 calc(var(--s-7) * 6); min-width: 0; }

/* QR и кнопки рядом; на узком экране — друг под другом */
.vpn-podpiska { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.vpn-qr {
  flex: none; width: calc(var(--s-7) * 4); max-width: 100%;
  padding: var(--s-2); background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border); line-height: 0;
}
.vpn-qr svg { width: 100%; height: auto; display: block; }

.vpn-mashiny { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.vpn-mashina { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); }
.vpn-mashina + .vpn-mashina { border-top: 1px solid var(--border); }
.vpn-mashina__name { min-width: 0; overflow-wrap: anywhere; }

.vpn-vydacha {
  margin-top: var(--s-4); padding: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}

.vpn-lyudi { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-7) * 5), 1fr)); gap: var(--s-1) var(--s-4); }
.vpn-tablica { overflow-x: auto; }
.vpn-privyazka { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; }
.vpn-privyazka + .vpn-privyazka { border-top: 1px solid var(--border); }
.vpn-privyazka > :first-child { flex: 1 1 calc(var(--s-7) * 4); min-width: 0; overflow-wrap: anywhere; }
.vpn-vybor { width: auto; max-width: 100%; }
.vpn-pole { max-width: calc(var(--s-7) * 9); }

/* Сводка подписки длиннее узкого экрана: плашке портала нельзя переноситься,
   а этой — нужно, иначе конец строки уезжает за край */
.vpn-svodka { height: auto; min-height: var(--s-5); white-space: normal; padding-block: var(--s-05); max-width: 100%; }