/*
 * Спільні компоненти обох гілок інтерфейсу.
 *
 * Усе, що виглядає однаково і до авторизації, і в кабінеті: кнопки, поля,
 * іконки, перемикач мов, модальні вікна, значки стану, картки, повідомлення.
 * Гілкові файли (site/*, app/*) не мають перевизначати ці компоненти —
 * якщо щось відрізняється, це або новий модифікатор тут, або окремий компонент.
 *
 * Окремо описані модальні вікна: js/my_modal.js будує bootstrap-подібну
 * розмітку (.modal-dialog, .modal-content, .modal-header/body/footer)
 * і кнопки .btn/.btn-default/.btn-success. Оскільки bootstrap.min.css на
 * нових сторінках не підключається, ці класи оформлені тут — інакше
 * вікно входу та реєстрації лишилося б без стилів.
 */

/* ---------- кнопки ---------- */
.nbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  text-decoration:none; background:none; color:var(--ink);
}
.nbtn-primary{background:var(--brand); color:var(--brand-ink)}
.nbtn-primary:hover{filter:brightness(1.08); color:var(--brand-ink)}
.nbtn-ghost{border-color:var(--line-2); color:var(--ink)}
.nbtn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.nbtn-lg{padding:14px 26px; font-size:16px}
.nbtn-sm{padding:7px 14px; font-size:14px}

/* ---------- перемикач теми ----------
   Обидві іконки в розмітці, видно ту, що показує НАСТУПНИЙ стан: у світлій
   темі — місяць, у темній — сонце. Розмітка — templates/parts/theme.php. */
.theme-sw{border:0; background:none; cursor:pointer; font:inherit}
.theme-sw__sun{display:none}
:root[data-theme="dark"] .theme-sw__sun{display:inline-flex}
:root[data-theme="dark"] .theme-sw__moon{display:none}

/* ---------- вікно підтвердження ----------
   Маленький діалог для дій, які не хочеться робити випадково (вихід із
   кабінету, видалення). Розмітку створює js/new/app.js за атрибутом
   data-confirm, тексти приходять із шаблону — див. templates/parts/confirm.php.
   Своє вікно, а не bootstrap-модалка: воно потрібне й на сторінках, де
   bootstrap не підключений (вхід оператора, публічна частина). */
.gps-confirm{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:3000;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(15,23,42,.45);
}
.gps-confirm__box{
  width:100%; max-width:380px; padding:22px 24px 18px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
}
.gps-confirm__title{margin-bottom:8px; font-size:17px; font-weight:600; color:var(--ink)}
.gps-confirm__text{font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.gps-confirm__acts{display:flex; justify-content:flex-end; gap:10px; margin-top:20px}
.gps-confirm__acts .nbtn{padding:9px 18px; font-size:14.5px}
@media (max-width: 480px){
  .gps-confirm__acts{flex-direction:column-reverse}
  .gps-confirm__acts .nbtn{width:100%}
}

/* ---------- поля ----------
   .field — єдиний вигляд поля вводу для всього інтерфейсу: і форма звернення
   на сайті, і вікно входу, і форми кабінету. 16px на мобільному — щоб iOS не
   зумив сторінку при фокусі. */
.field{
  font:inherit; font-size:15px; width:100%; padding:10px 12px; text-align:left;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:2px;
}
.field:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
.field.is-invalid{border-color:var(--crit)}
@media (max-width: 700px){ .field{font-size:16px} }
textarea.field{min-height:104px; resize:vertical}
.form-stack{display:grid; gap:12px}

/* ---------- прапорці та перемикачі ----------
   Один вигляд на весь інтерфейс: і на публічній частині, і в кабінеті, і в
   старих вікнах. У старій розмітці на прапорці часто вішали .form-control —
   bootstrap робив із них блок на всю ширину заввишки 34px; це знімаємо. */
input[type="checkbox"],
input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; flex:none; margin:0; padding:0; vertical-align:-4px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:3px;
  cursor:pointer; box-shadow:none; transition:background-color .12s ease, border-color .12s ease;
}
input[type="radio"]{border-radius:50%}

input[type="checkbox"]:hover,
input[type="radio"]:hover{border-color:var(--brand)}

input[type="checkbox"]:checked{
  background-color:var(--brand); border-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
input[type="radio"]:checked{background:var(--surface); border:5px solid var(--brand)}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled{opacity:.45; cursor:default}

/* .form-control на прапорці — спадок старої розмітки */
input.form-control[type="checkbox"],
input.form-control[type="radio"]{
  display:inline-block; width:18px; height:18px; min-height:0; padding:0; margin:0;
}

/* підпис поруч із прапорцем клікається разом із ним */
.check{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:14.5px}

/* У старій розмітці прапорець стоїть ПІСЛЯ підпису, кожен у своєму рядку.
   Ставимо їх в один рядок і прапорець першим — так читається як список
   опцій. :has() підтримують усі сучасні браузери; де немає — лишається
   попередній вигляд (підпис зверху, прапорець під ним). */
.modal-body .form-group:has(> input[type="checkbox"]):not(:has(> input ~ input)),
.modal-body .form-group:has(> input[type="radio"]):not(:has(> input ~ input)){
  display:flex; flex-direction:row-reverse; justify-content:flex-end;
  align-items:center; gap:10px;
}
.modal-body .form-group:has(> input[type="checkbox"]):not(:has(> input ~ input)) > label,
.modal-body .form-group:has(> input[type="radio"]):not(:has(> input ~ input)) > label{margin:0; font-weight:400}

/* Кілька прапорців підряд (налаштування датчика): підпис ліворуч, прапорець
   праворуч — підписи й контроли йдуть строго по черзі, тому проста сітка. */
.sensor-options{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center}
.sensor-options > label{margin:0; font-weight:400; font-size:13px; line-height:1.3}

/* ---------- картки датчиків (вікно «Датчики устройства») ---------- */
.sensor-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.sensor-card{
  padding:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
.sensor-card label{font-size:12.5px; font-weight:500; color:var(--ink-2); display:block; margin:0 0 4px}
.sensor-card .form-group{margin-bottom:10px}
.sensor-card .form-control{margin-bottom:8px}
.sensor-card__foot{margin-top:4px}
.sensor-card__foot .btn{width:100%; min-height:36px; font-size:14px}
.sensor-card--add{
  display:flex; align-items:center; justify-content:center;
  border-style:dashed; background:none; min-height:120px;
}

@media (max-width: 1100px){ .sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 760px){ .sensor-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- значки стану ---------- */
.chip{
  display:inline-block; padding:3px 8px; border-radius:2px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
}
.chip--ok{color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent)}
/* для довгих написів (дата, назва) CAPS зайвий — читається гірше */
.chip--text{text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500}
.chip--warn{color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent)}
.chip--crit{color:var(--crit); background:color-mix(in srgb, var(--crit) 14%, transparent)}

.dot{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; display:inline-block}
.dot--warn{background:var(--warn)}
.dot--crit{background:var(--crit)}

/* ---------- картка ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.card__body{padding:16px 18px 20px}

/* ---------- згортання (details/summary) ---------- */
.fold{border-bottom:1px solid var(--line)}
.fold>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:12px 0; font-size:12.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--brand); border-bottom:2px solid var(--brand);
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{
  content:""; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
}
.fold[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fold__count{font-size:11px; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ---------- іконки (templates/parts/icons.php) ---------- */
.ic{width:18px; height:18px; flex:none; display:inline-block; vertical-align:-3px}
.ic--lg{width:22px; height:22px}
.ic--sm{width:15px; height:15px; vertical-align:-2px}
.ic--ok{color:var(--ok)}
.ic--warn{color:var(--warn)}
.ic--crit{color:var(--crit)}
.ic--mute{color:var(--ink-3)}
.ic--info{color:var(--info)}

/* кнопка довідки біля заголовка сторінки (span.sys_help_box заповнює
   js/help.js, а js/new/app.js замінює її іконку на нашу) */
.help-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--info); cursor:pointer; vertical-align:middle;
}
.help-btn:hover{background:color-mix(in srgb, var(--info) 12%, transparent)}
.sys_help_box{display:inline-flex}


/* ---------- перемикач мов (templates/parts/lang.php) ----------
   Клас .langsw, а не .lang: .lang зайнятий старим перемикачем у css/x.css
   (position:absolute; width:40px) — назви зіткнулися б у кабінеті. */
.langsw{position:relative}
.langsw__btn{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 10px; border:1px solid transparent; border-radius:var(--radius);
  background:none; color:var(--ink-2); font:inherit; font-size:14px; cursor:pointer;
}
.langsw__btn .ic{width:17px; height:17px; color:var(--ink-3)}
.langsw__code{font-weight:600; letter-spacing:.04em}
.langsw__caret{
  width:0; height:0; margin-top:2px; border:4px solid transparent;
  border-top-color:currentColor; opacity:.6;
}
.langsw__btn:hover{background:var(--surface-2); color:var(--ink)}

.langsw__drop{
  position:absolute; z-index:1100; top:100%; right:0; min-width:190px;
  margin-top:4px; padding:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-2); text-align:left;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
}
.langsw:hover > .langsw__drop,
.langsw:focus-within > .langsw__drop{opacity:1; visibility:visible; transform:none}

.langsw__item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:7px;
  font-size:14.5px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.langsw__item b{
  min-width:26px; font-size:11.5px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-3);
}
.langsw__item:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.langsw__item.is-active{background:var(--brand-soft); color:var(--ink)}
.langsw__item.is-active b{color:var(--brand)}

/* ---------- модальні вікна (js/my_modal.js) ---------- */
.modal{
  position:fixed; inset:0; z-index:1050; display:none; overflow:auto;
  background:rgba(8,14,10,.55);
}
.modal.in,.modal.show{display:block}
/* Один стандартний розмір вікна на весь інтерфейс.
   У старому коді половина вікон відкривалася як modal-lg без потреби (фільтри
   історії та статистики, додавання пристрою, водія), а частина — як modal-sm
   (фільтр звітів), через що вікна стрибали від 420 до 880px. Тепер і те, і те
   зводиться до стандарту; ширше — тільки за явним класом .modal-wide, вужче —
   .modal-narrow (короткі підтвердження). */
.modal-dialog{max-width:520px; margin:48px auto; padding:0 16px}
/* bootstrap задає цим класам width (900px і 300px), а не max-width, тому
   самого max-width замало — знімаємо ширину явно */
.modal-dialog.modal-lg,
.modal-dialog.modal-sm{width:auto; max-width:520px}
.modal-dialog.modal-wide{width:auto; max-width:760px}
/* найширше вікно — там, де вміст сам по собі сітка (датчики) */
.modal-dialog.modal-xwide{width:auto; max-width:1160px}
.modal-dialog.modal-narrow{width:auto; max-width:400px}
.modal-content{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2);
}
/* bootstrap додає до .modal-header, .modal-footer і .nav clearfix-псевдо-
   елементи (:before/:after з content:" "). У flex-контейнері вони стають
   повноцінними flex-items і з'їдають по одному gap: заголовок відступав від
   лівого краю на 24px далі, ніж хрестик від правого, а права кнопка в підвалі
   не доходила до краю на 10px. Прибираємо їх там, де розкладка flex. */
.modal-header::before,.modal-header::after,
.modal-footer::before,.modal-footer::after,
.auth-tabs::before,.auth-tabs::after{content:none}

.modal-header{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.modal-header .modal-title,.modal-header h4{
  font-family:"Roboto Slab",Georgia,serif; font-size:19px; margin:0;
}
/* bootstrap кладе кнопку закриття перед заголовком і покладається на float;
   у flex-контейнері повертаємо звичний порядок: заголовок ліворуч, хрестик праворуч */
.modal-header .close{
  order:2; margin-left:auto; border:0; background:none;
  font-size:24px; line-height:1; color:var(--ink-3); cursor:pointer;
  opacity:1; text-shadow:none;
  /* css/10-style.css:816 фарбує хрестик у червоний через !important */
  color:var(--ink-3) !important;
}
.modal-header .modal-title,.modal-header h4{order:1}
.modal-header .close:hover{color:var(--ink)}
.modal-body{padding:20px}
/* старий css скидає маркери списків (10-style.css), а тексти довідки
   написані списками — повертаємо */
.modal-body ul{list-style:disc; margin:0 0 12px; padding-left:20px}
.modal-body ul li{margin-bottom:6px}
.modal-body p{margin:0 0 10px}
.modal-body a{color:var(--brand)}
/* приклади значень у довідці; bootstrap малює code рожевим на рожевому */
.modal-body code{
  padding:1px 5px; font-size:12.5px;
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  color:var(--ink); background:var(--surface-2); border-radius:3px;
}
.modal-body input:not([type="checkbox"]):not([type="radio"]),
.modal-body select,.modal-body textarea{
  font:inherit; font-size:15px; padding:9px 11px; text-align:left; margin:0;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:2px;
}
/* bootstrap-поля тягнуться на всю ширину, а поодинокі (дати, години у фільтрах)
   лишаються по вмісту — інакше вікно фільтра розсипається на стовпчик */
/* bootstrap тримає .form-control рівно 34px заввишки — з нашим кеглем
   текст у списках обрізався зверху */
.modal-body .form-control:not([type="checkbox"]):not([type="radio"]){width:100%; height:auto; min-height:40px; margin-bottom:12px}
/* .field — наша власна розмітка (вікно входу), її ширину не чіпаємо */
.modal-body input:not(.form-control):not(.field):not([type="checkbox"]):not([type="radio"]),
.modal-body select:not(.form-control):not(.field){width:auto; display:inline-block; margin:0 6px 10px 0}
.modal-body textarea{width:100%; margin-bottom:12px}
/* фокус однаковий для всіх полів — і наших, і успадкованих */
.modal-body input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-body select:focus,.modal-body textarea:focus{
  outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);
}
.modal-body label{display:block; margin:0 0 6px; font-size:13px; font-weight:600; color:var(--ink-2)}
.modal-body .row{margin-bottom:4px}
.modal-body .group-inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}

/*
 * Пара полів періоду — два звичайних поля поруч під спільним підписом
 * «Період». Окремих підписів «З» і «По» немає: порядок і так зрозумілий,
 * а зміст меж лишився в title/aria-label для підказки й скрінрідера.
 *
 * .date-range--stack — коли в кожній межі більше двох контролів (дата,
 * година, хвилина у фільтрі статистики): тоді межі стають рядками.
 */
.date-range{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px}
.date-range--stack{grid-template-columns:minmax(0,1fr)}

.date-field{display:block; min-width:0; margin:0}
.date-field > span{font-size:13px; font-weight:600; color:var(--ink-2); display:block; margin-bottom:5px}

/* дата + година (+ хвилина) в один рядок: поле тягнеться, списки по вмісту */
.date-row{display:flex; gap:8px; min-width:0}
.date-row input{flex:1 1 auto; min-width:0}
.date-row .date-hour{flex:0 0 auto; width:84px; padding-right:6px}
.date-row .date-hour ~ .date-hour{width:74px}

.modal-note{margin:12px 0 0; font-size:13.5px; color:var(--ink-3)}
.modal-body > .modal-note:first-child{margin:0 0 14px}

/* Поле телефону з прапорцем (intl-tel-input) — на всю ширину, як решта полів.
   У старій розмітці воно загорнуте в .form-inline + .input-group з інлайновим
   float:right, через що підпис лишався ліворуч, а саме поле «відлітало»
   праворуч і накладалося на сусідній рядок. Інлайновий стиль інакше не
   перебити, тому тут !important — рівно на цих трьох правилах. */
.modal-body .intl-tel-input{display:block; width:100%; margin-bottom:12px}
.modal-body .intl-tel-input input{width:100%}
.modal-body .form-inline{display:block}
.modal-body .input-group{float:none !important; width:100%}
.modal-body .pull-right{float:none !important}
.modal-footer{
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
  padding:14px 20px; border-top:1px solid var(--line);
}
.modal-backdrop{display:none}

/* кнопки, які малює my_modal.js у bootstrap-стилі */
.modal .btn,.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 20px; border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-size:15px; font-weight:600; line-height:1.2;
  cursor:pointer; text-decoration:none;
}
.btn-success{background:var(--brand); color:var(--brand-ink)}
.btn-success:hover{filter:brightness(1.08)}
.btn-default{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-default:hover{border-color:var(--brand); color:var(--brand)}
/* решта bootstrap-кнопок теж на токенах — інакше у вікнах співіснують
   два зелених і два червоних */
.btn-primary{background:var(--brand); color:var(--brand-ink)}
.btn-danger{background:var(--crit); color:#fff}
.btn-warning{background:var(--warn); color:#fff}
.btn-info{background:var(--surface-2); color:var(--ink)}
.btn-primary:hover,.btn-danger:hover,.btn-warning:hover,.btn-info:hover{filter:brightness(1.08)}
/* усередині вікна діє селектор .modal .btn — він задає border цілком і за
   специфічністю перебиває .btn-default, тому рамку повторюємо тут */
.modal .btn-default{border-color:var(--line-2)}
.modal .btn-default:hover{border-color:var(--brand)}
.modal .btn-warning,.modal .btn-info,.modal .btn-success{border-color:transparent}

/* повідомлення ядра (msg->print_msg) */
.alert{padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:16px}
.alert-success{border-color:var(--ok); color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, transparent)}
.alert-danger{border-color:var(--crit); color:var(--crit); background:color-mix(in srgb, var(--crit) 8%, transparent)}
.text-danger{color:var(--crit)}


/* ---------- bootstrap-розмітка всередині вікон ----------
 * js/reg_user_modals.js будує форми входу, реєстрації та відновлення пароля
 * класами bootstrap 3 (.row, .col-lg-12, .form-control, .nav-tabs, .tab-pane,
 * .btn-warning/.btn-info). Сам bootstrap.min.css на нових сторінках не
 * підключається, тому потрібні класи описані тут — і лише в межах .modal,
 * щоб не тягнути чужу сітку на всю сторінку.
 * Перемикання вкладок і показ вікна лишаються на bootstrap JS. */
/* Колонки всередині вікна робимо простими блоками на всю ширину. Разом із
   padding колонок обов'язково знімаємо й негативні margin рядка (bootstrap
   .row{margin:0 -15px}) — інакше вміст вікна вилазив на 15px за поле
   .modal-body і відступ зліва/справа ставав 5px замість 20px. */
.modal .row{display:block; margin-left:0; margin-right:0}
/* Широке вікно (.modal-wide) — там, де полів справді багато: головний .row
   ділиться на дві колонки. Усередині колонок поля лишаються один під одним.
   .row::before/::after — clearfix bootstrap; у grid-контейнері вони стають
   повноцінними комірками, і колонки з'їжджають (перша лишається порожньою). */
.modal-wide .modal-body > .row::before,
.modal-wide .modal-body > .row::after{content:none}
.modal-wide .modal-body > .row{display:grid; grid-template-columns:1fr 1fr; gap:0 22px}
.modal-wide .modal-body > .row > [class*="col-"]{width:auto; min-width:0}
/* блок на всю ширину (у старій розмітці — col-lg-12) не ділить сітку навпіл */
.modal-wide .modal-body > .row > .col-lg-12,
.modal-wide .modal-body > .row > .col-md-12,
.modal-wide .modal-body > .row > .col-xs-12{grid-column:1/-1}
.modal [class^="col-"],.modal [class*=" col-"]{width:100%; padding:0}
.modal .form-group{margin-bottom:12px}
.modal .form-control{
  font:inherit; font-size:15px; width:100%; padding:11px 13px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:2px;
}
.modal .form-control:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
.modal label{display:block; margin-bottom:6px; font-size:14px}

.modal .nav-tabs{
  display:flex; gap:4px; list-style:none; margin:0 0 4px; padding:0;
  border-bottom:1px solid var(--line);
}
.modal .nav-tabs>li>a{
  display:block; padding:9px 14px; font-size:14.5px; color:var(--ink-2);
  border:1px solid transparent; border-bottom:0; border-radius:2px 2px 0 0;
}
.modal .nav-tabs>li>a:hover{color:var(--brand)}
.modal .nav-tabs>li.active>a{
  color:var(--ink); background:var(--surface);
  border-color:var(--line); margin-bottom:-1px; font-weight:600;
}
.modal .tab-content>.tab-pane{display:none}
.modal .tab-content>.tab-pane.active{display:block}
.modal .fade{opacity:0; transition:opacity .15s linear}
.modal .fade.in,.modal .fade.active{opacity:1}

/* Кнопки вікна.
   reg_user_modals.js вішає на них bootstrap-класи сітки (.col-sm-5, .col-sm-12)
   і власні .pos-left / .pos-right з x.css. Ані сітки, ані x.css на нових
   сторінках немає, тому кнопки або розтягувалися на всю ширину, або злипалися.
   Тут вони приведені до вигляду решти кнопок сайту. */
.modal .modal-footer{
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:flex-end; gap:10px;
}
.modal .modal-footer .btn{
  width:auto; min-height:42px; padding:0 20px;
  font-size:15px; line-height:1.2;
}
.modal .modal-footer [class*="col-"]{width:auto; flex:0 0 auto; max-width:none}
.modal .pos-left{margin-right:auto}
.modal .pos-right{margin-left:0}

/* підпис над полем — такий самий, як у вікні входу */
.modal .modal-body label{
  display:block; margin-bottom:5px; text-align:left;
  font-size:14px; font-weight:500; color:var(--ink-2);
}
.btn-warning{background:var(--warn); color:#fff; border-color:var(--warn)}
.btn-warning:hover{filter:brightness(1.08); color:#fff}
.btn-info{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.btn-info:hover{border-color:var(--brand); color:var(--brand)}
.modal-sm .modal-dialog,.modal-dialog.modal-sm{max-width:420px}