/* ================================================================
   Модуль «Безопасность» — клиентские стили (свои + мобильная адаптация).
   Классы страницы (pui-field, pui-inp, pui-btn1, pui-h3) — из project-ui.css.
   ================================================================ */

/* Fieldset по умолчанию имеет min-width: min-content и свои margin/padding,
   а контейнер uk-grid — отрицательные поля: вместе распирало #main и появлялся
   горизонтальный скролл. Приводим к «плоской» раскладке без выхода за края. */
.sec-page .sec-grid,
.sec-page .uk-grid.sec-grid { margin-left: 0 !important; margin-right: 0 !important; }
.sec-page .sec-grid > .pui-width-1-1 { margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; }
.sec-page fieldset.pui-field { min-width: 0 !important; max-width: 100%; box-sizing: border-box;
  margin: 4px 0 6px; padding: 0 8px 8px; }
.sec-page fieldset.pui-field > legend { max-width: 100%; }
.sec-page fieldset.pui-field table { width: auto; max-width: 100%; box-sizing: border-box; }

/* Поля ввода — как в bk2: не длиннее 300px (в т.ч. моб-десктоп), без гориз. скролла */
.sec-page .pui-field .pui-inp { box-sizing: border-box; width: 300px; max-width: 100%; }
.sec-page .pui-inp { max-width: 300px; }
.sec-win .pui-inp { max-width: 300px; }
.sec-page .pui-field table { width: auto; max-width: 100%; }
.sec-page .pui-field table > tbody > tr > td { white-space: nowrap; }
.sec-page .pui-field table > tbody > tr > td > i { white-space: normal; }

/* Кнопки в полях — как в bk2 (фиксированная ширина 174px × sizerem) */
.sec-btn { width: calc(174px * var(--sizerem)); max-width: 100%; }

/* Сетка полей: на широком экране — в один столбец (как uk-grid-collapse в bk2) */
.sec-grid { display: block; }
.sec-grid > .pui-width-1-1 { width: 100%; }

/* Окна подтверждения (bk.win.add): перетаскиваемые, по центру */
.sec-mask { position: fixed; inset: 0; z-index: 100200; background: rgba(0, 0, 0, .25); touch-action: none; }
.sec-win { position: fixed; z-index: 100201; background: #f2f0f0; border: 1px solid #888;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, .45); box-sizing: border-box; max-width: calc(100vw - 20px); }
.sec-win-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0.3rem 0.45rem; background: #d2d0d0; border-bottom: 1px solid #b6b3b3; font-weight: bold;
  font-size: 0.9rem; cursor: move; user-select: none; }
.sec-win-x { border: 1px solid #9a9a9a; background: #e8e6e6; width: 22px; height: 20px; line-height: 1;
  cursor: pointer; font-size: 12px; padding: 0; }
.sec-win-x:hover { background: #f5d0d0; }
.sec-win-body { padding: 8px; font-size: 0.9rem; max-height: calc(100vh - 120px); overflow: auto; }

/* --- мобильная адаптация (как у остальных модулей) --- */
@media (max-width: 899px) {
  .sec-page .pui-field { margin: 0 0 8px; }
  .sec-page .pui-field table,
  .sec-page .pui-field table > tbody,
  .sec-page .pui-field table > tbody > tr,
  .sec-page .pui-field table > tbody > tr > td { display: block; width: auto !important; box-sizing: border-box; }
  .sec-page .pui-field table > tbody > tr > td { text-align: left !important; padding: 2px 4px; }
  .sec-page .pui-field table > tbody > tr > td[align="right"] { padding-top: 6px; color: #555; }
  /* поля не длиннее 300px и на мобильном (как на десктопе), но не шире колонки */
  .sec-page .pui-field .pui-inp { width: 300px; max-width: 100%; }
  .sec-page .pui-field table > tbody > tr > td { white-space: normal; }
  .sec-btn { width: 100%; }
  .sec-win { left: 10px !important; right: 10px !important; top: 30px !important; bottom: 30px !important;
    width: auto !important; max-width: none; height: auto; }
  .sec-win-body { max-height: none; height: calc(100% - 34px); box-sizing: border-box; }
}

/* --- экран ввода второго пароля при входе (как pass2.php в bk2) ---
   Жёсткая фиксация: экран привязан к layout viewport (100lvh/100vh), а не к visual
   viewport, поэтому появление экранной клавиатуры не сжимает и не ломает вёрстку. */
/* ===== экран второго пароля — 1:1 с pass2.php / pass2.css live-bk2 ===== */
.p2-wrap {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100300;
  background-color: #666666; overflow: auto; overscroll-behavior: contain;
  height: 100vh; height: 100dvh; height: 100lvh;
  font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
  line-height: normal; font-size: 10pt; color: #000;
  -webkit-text-size-adjust: 100%;
}
html.mpg-kbd-lock, html.mpg-kbd-lock body { position: fixed; width: 100%; overflow: hidden !important; }

.p2-center { text-align: center; padding: 0 10px; box-sizing: border-box; }
.p2-h3 { margin: 1em 0 0.5em; font-size: 1.17em; font-weight: bold; }
.p2-err { color: #f36464; font-size: 10pt; min-height: 1.2em; margin: 0 0 6px; text-shadow: 0 0 1px #fff; }

/* Панель с клавиатурой (live: #mbksecure) */
.p2-panel {
  transform: scale(0.2);
  transition: ease-in-out 1s all;
  cursor: default;
  display: inline-block;
  min-width: 220px;
  height: auto;
  border-radius: 5px;
  border: 2px solid #3d467b;
  background-color: #dededd;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  text-align: left;
}
.p2-panel.p2-leave {
  transform: scale(0.2) !important;
  opacity: 0;
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
  pointer-events: none;
}
.p2-panel table { border-collapse: separate; }
.p2-panel .p2-hdr { background-color: #466ba0; }
.p2-panel .p2-hdr-t { color: #fff; font-size: 10pt; }
.p2-panel .p2-body { padding: 5px; }
.p2-panel .p2-inputrow { padding-bottom: 10px; }

/* Кнопки и поле — значения из live pass2.css */
.tbatonlste0 {
  background-color: #fff;
  border: 2px solid #3d467b;
  border-radius: 4px;
  color: #3d467b;
  font-size: 13pt;
  cursor: default;
  font-weight: bold;
  text-align: center;
  height: 30pt;
  width: 130pt;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.tbatonlste1 {
  background-color: #fff;
  border: 2px solid #3d467b;
  border-radius: 4px;
  color: #3d467b;
  font-size: 13pt;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  font-family: inherit;
}
.tbatonlste12 {
  background-color: #e77817;
  border: 2px solid #3d467b;
  border-radius: 4px;
  color: #3d467b;
  font-size: 13pt;
  cursor: pointer;
  font-weight: bold;
  box-sizing: border-box;
  font-family: inherit;
}
.btnktp1 { height: 30pt; font-size: 16pt; aspect-ratio: 1 / 1; margin: 0; padding: 0; }
.btnktp2 { height: 30pt; font-size: 16pt; aspect-ratio: 2.07 / 1; margin: 0; padding: 0; }
.btnktp0fx .btnktp1 { aspect-ratio: 2.17 / 1; }
.btnktp3 { height: 62pt; font-size: 10pt; aspect-ratio: 1 / 1; margin: 0; padding: 0; }
.p2-clearbtn { font-size: 10pt !important; }
.tbatonlste1:hover {
  -webkit-box-shadow: 0px 0px 1px 1px rgba(249, 186, 66, 1) inset;
  box-shadow: 0px 0px 1px 1px rgba(249, 186, 66, 1) inset;
  cursor: pointer;
}
.tbatonlste1:active { box-shadow: none; background-color: #e2e1da; }
.btnktp1, .btnktp2, .btnktp3 { -webkit-appearance: none; appearance: none; }

.g2fa-form { font-size: 10pt; color: #3d467b; text-align: left; padding: 10px; }
.g2fa-input { width: 140pt; max-width: 100%; letter-spacing: 2px; }
.g2fa-actions { margin-top: 10px; text-align: right; }
.g2fa-ok { height: 30pt; padding: 0 14pt; cursor: pointer; }

/* Красный крестик (live .xbtn) */
.xbtn {
  background-color: #ea292e;
  width: 30px; height: 24px;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 5px;
  font-size: 11pt;
  color: #fff;
  text-align: center;
  line-height: 20px;
  box-sizing: border-box;
}
.xbtn:hover { background-color: #e26767; }
.cp { cursor: pointer; }
.p2-shuffle { display: inline-block; margin: 0 0 20px; font-size: 10pt; color: #000; }
.p2-shuffle:hover { text-decoration: none; }

.p2-noselect, .noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Мобильная адаптация: панель не шире экрана, клавиши чуть компактнее */
@media (max-width: 899px) {
  .p2-wrap { font-size: 9.5pt; }
  .p2-panel { min-width: 0; width: auto; max-width: calc(100vw - 16px); }
  .p2-center { padding: 0 8px; }
  .tbatonlste0 { width: 120pt; height: 28pt; font-size: 12.5pt; }
  .btnktp1 { height: 28pt; font-size: 15pt; }
  .btnktp2 { height: 28pt; font-size: 14pt; }
  .btnktp3 { height: 58pt; }
  .p2-panel .p2-body { padding: 4px; }
  .p2-h3 { font-size: 1.05em; }
}
@media (max-width: 360px) {
  .tbatonlste0 { width: 104pt; }
  .btnktp1 { height: 26pt; }
  .btnktp2 { height: 26pt; }
  .btnktp3 { height: 54pt; }
}

/* --- ввод кода двухфакторной защиты при входе (панель как у второго пароля) --- */
.g2fa-form input { box-sizing: border-box; max-width: 100%; }