/* Розкладка сторінки /v2/. Кольори й розміри — лише через змінні з tema.css. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--shryft); font-size: var(--rozmir); color: var(--tekst);
  background: var(--tlo); line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: var(--tekst); }
button { cursor: pointer; }
.pryhovano { display: none !important; }
[hidden] { display: none !important; }
.mono { font-family: var(--shryft-mono); }
.tykho { color: var(--tekst-2); font-size: var(--rozmir-malyj); }

/* ---------- кнопки й поля ---------- */
.knopka {
  min-height: var(--knopka); padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--mezha); background: var(--poverkhnia); color: var(--tekst);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.knopka:hover { background: var(--poverkhnia-2); }
.knopka-holovna {
  background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent);
  font-weight: 600;
}
.knopka-holovna:hover { filter: brightness(1.08); background: var(--akcent); }
.knopka-malyj {
  min-height: var(--knopka-malyj, 36px); padding: 0 12px; font-size: var(--rozmir-malyj);
  border-radius: var(--radius-malyj); gap: 6px;
}
.knopka-nebezpeka {
  background: var(--nebezpeka-tlo); color: var(--nebezpeka); border-color: var(--nebezpeka);
}
.knopka-nebezpeka:hover {
  background: var(--nebezpeka); color: #ffffff;
}
.knopka-posylannia {
  background: none; border: none; padding: 0; color: var(--akcent);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  font-size: var(--rozmir-malyj); font-weight: 500;
}
.knopka-posylannia:hover { filter: brightness(1.2); }
.knopka-novyj-sklad {
  background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent); font-weight: 600;
  white-space: nowrap;
}
.knopka-novyj-sklad:hover {
  background: var(--akcent); color: var(--akcent-tekst);
}
.pole {
  width: 100%; min-height: var(--knopka); padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--mezha); background: var(--poverkhnia); color: var(--tekst);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pole option {
  background-color: var(--poverkhnia);
  color: var(--tekst);
}
.pole::placeholder {
  color: var(--tekst-2);
  opacity: 0.7;
}
.pole:disabled, select.pole:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
}
.pole:focus, .knopka:focus-visible, .vuzol-riadok:focus-visible {
  outline: 2px solid var(--akcent); outline-offset: 2px;
}

/* ---------- екран входу ---------- */
#ekran-vkhodu { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.karta-vkhodu {
  width: 100%; max-width: 400px; background: var(--poverkhnia); border: 1px solid var(--mezha);
  border-radius: calc(var(--radius) * 1.5); padding: 28px; box-shadow: var(--tin);
}
.karta-vkhodu h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.karta-vkhodu label { display: block; margin: 14px 0 6px; font-size: var(--rozmir-malyj); font-weight: 500; color: var(--tekst-2); }
.karta-vkhodu .knopka { width: 100%; margin-top: 20px; }
.pomylka {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--nebezpeka-tlo); color: var(--nebezpeka); font-size: var(--rozmir-malyj);
  border: 1px solid var(--nebezpeka); font-weight: 500;
}
.demo-mitka {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 4px; font-size: 11px;
  background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; vertical-align: middle;
  border: 1px solid var(--akcent);
}

/* ---------- головний екран ---------- */
#holovnyj { height: 100%; display: flex; flex-direction: column; }
.shapka {
  display: flex; align-items: center; gap: var(--vidstup); padding: 8px var(--vidstup);
  background: var(--poverkhnia); border-bottom: 1px solid var(--mezha);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.logo { font-weight: 700; white-space: nowrap; font-size: 16px; letter-spacing: -0.01em; }
.poshuk-obhortka { position: relative; flex: 1; max-width: 640px; }
.khto { text-align: right; white-space: nowrap; font-size: var(--rozmir-malyj); }
.khto b { display: block; font-size: var(--rozmir); }
#knopka-derevo { display: none; }

.tilo { flex: 1; display: flex; min-height: 0; }
.derevo {
  width: var(--shyryna-dereva); flex-shrink: 0; overflow-y: auto; overflow-x: hidden; padding: 8px;
  background: var(--poverkhnia); border-right: 1px solid var(--mezha);
}
.vmist { flex: 1; overflow: auto; padding: var(--vidstup) calc(var(--vidstup) * 1.5); min-width: 0; }

/* ---------- дерево ---------- */
.derevo ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.derevo > ul { padding-left: 0; }
.vuzol-riadok {
  display: flex; align-items: center; gap: 8px; min-height: var(--knopka); padding: 0 8px;
  border-radius: var(--radius); cursor: pointer; user-select: none; border: 1px solid transparent; background: none; width: 100%; text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.vuzol-riadok:hover { background: var(--poverkhnia-2); }
.vuzol-riadok.vybranyj {
  background: var(--akcent-tlo); color: var(--akcent); font-weight: 600;
  border-color: var(--mezha);
}
.strilka { width: 18px; flex-shrink: 0; text-align: center; color: var(--tekst-2); font-size: 13px; font-weight: bold; }
.ikona { width: 18px; height: 18px; flex-shrink: 0; color: var(--tekst-2); }
.vybranyj .ikona { color: var(--akcent); }
.vuzol-nazva { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- вміст складу ---------- */
.zaholovok-vmistu {
  display: flex; align-items: center; gap: var(--vidstup); flex-wrap: wrap;
  margin-bottom: var(--vidstup); padding-bottom: 8px; border-bottom: 1px solid var(--mezha);
}
.zaholovok-vmistu h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.shliakh { font-size: var(--rozmir-malyj); color: var(--tekst-2); margin-bottom: 4px; font-weight: 500; }
.prapor {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--knopka);
  padding: 0 10px; border-radius: var(--radius); cursor: pointer; user-select: none;
  background: var(--poverkhnia); border: 1px solid var(--mezha);
}
.prapor:hover { background: var(--poverkhnia-2); }
.prapor input { width: 20px; height: 20px; accent-color: var(--akcent); cursor: pointer; }
.sklad-dii {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
.sklad-mvo-kartka {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--poverkhnia-2); border: 1px solid var(--mezha); border-radius: var(--radius-malyj);
  font-size: var(--rozmir-malyj); margin-bottom: var(--vidstup); flex-wrap: wrap;
}
.sklad-mvo-titul { color: var(--tekst-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.sklad-mvo-znachennia { font-weight: 600; color: var(--tekst); }
table.tablytsia {
  width: 100%; border-collapse: collapse; background: var(--poverkhnia);
  border: 1px solid var(--mezha); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--tin);
}
.tablytsia th, .tablytsia td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--mezha);
  vertical-align: middle;
}
.tablytsia th {
  font-size: var(--rozmir-malyj); color: var(--tekst-2); font-weight: 600;
  background: var(--poverkhnia-2); letter-spacing: 0.02em; border-bottom: 2px solid var(--mezha);
}
.tablytsia tbody tr:nth-child(even) td { background: var(--poverkhnia-2); }
.tablytsia tbody tr:hover td { background: var(--akcent-tlo); }
.tablytsia td.chyslo, .tablytsia th.chyslo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablytsia tr:last-child td { border-bottom: none; }
.tablytsia tr.pidsvitka td {
  background: var(--akcent-tlo) !important;
  font-weight: 600;
  border-top: 1px solid var(--akcent);
  border-bottom: 1px solid var(--akcent);
}
.tablytsia td.mono {
  white-space: nowrap; font-size: 14px; letter-spacing: 0.02em;
}
.tablytsia a {
  color: var(--akcent); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500; display: inline-block; padding: 4px 0;
}
.tablytsia a:hover { filter: brightness(1.2); }

/* Колонка дій та кнопка переміщення у таблиці складу (п-4d) */
.tablytsia th.koloda-dii,
.tablytsia td.koloda-dii {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.knopka-peremistyty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tablytsia tr.pidsvitka .knopka-peremistyty {
  background: var(--poverkhnia);
  border-color: var(--akcent);
  color: var(--tekst);
}
.tablytsia tr.pidsvitka .knopka-peremistyty:hover {
  background: var(--akcent-tlo);
  border-color: var(--akcent);
}

.porozhno {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 48px 24px; text-align: center; color: var(--tekst-2);
  background: var(--poverkhnia); border: 2px dashed var(--mezha); border-radius: var(--radius);
  font-size: 15px; font-weight: 500; line-height: 1.5;
}
.porozhno::before {
  content: ""; width: 44px; height: 44px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z' /%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z' /%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.6;
}
.shche { margin-top: var(--vidstup); }
button.shche { width: 100%; max-width: 320px; display: block; margin-left: auto; margin-right: auto; }

/* ---------- підказки пошуку ---------- */
.pidkazky {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 60vh; overflow: auto;
  background: var(--poverkhnia); border: 1px solid var(--mezha); border-radius: var(--radius); box-shadow: var(--tin-pidkazky);
}
.pidkazka {
  display: flex; align-items: center; gap: 12px; min-height: var(--knopka); padding: 8px 14px; cursor: pointer;
  border-bottom: 1px solid var(--mezha);
}
.pidkazka:last-child { border-bottom: none; }
.pidkazka.aktyvna, .pidkazka:hover { background: var(--poverkhnia-2); }
.pidkazka-tekst { flex: 1; min-width: 0; }
.pidkazka-nazva { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pidkazka-dod { font-size: var(--rozmir-malyj); color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mitka {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-malyj);
  border: 1px solid currentColor; white-space: nowrap;
}
.mitka-tochnyj { color: var(--mitka-tochnyj); background: var(--mitka-tochnyj-tlo); border-color: var(--mitka-tochnyj); }
.mitka-pochatok { color: var(--mitka-pochatok); background: var(--mitka-pochatok-tlo); border-color: var(--mitka-pochatok); }
.mitka-mistyt { color: var(--mitka-mistyt); background: var(--mitka-mistyt-tlo); border-color: var(--mitka-mistyt); }
.mitka-skhozhist { color: var(--mitka-skhozhist); background: var(--mitka-skhozhist-tlo); border-color: var(--mitka-skhozhist); }
/* п-6c (API_V2 1.9 «Таблиця залишків»): офіційне / неофіційне майно біля найменування */
.mitka-oficijne { color: var(--mitka-tochnyj); background: var(--mitka-tochnyj-tlo); border-color: var(--mitka-tochnyj); margin-left: 6px; vertical-align: middle; }
.mitka-neoficijne { color: var(--mitka-mistyt); background: var(--mitka-mistyt-tlo); border-color: var(--mitka-mistyt); margin-left: 6px; vertical-align: middle; }

/* ---------- перемикач умов та тем ---------- */
.bloki-keruvannia {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.vybir-obhortka {
  display: inline-flex; align-items: center; gap: 6px;
}
.vybir-pidpys {
  font-size: var(--rozmir-malyj); color: var(--tekst-2); font-weight: 500; white-space: nowrap;
}
.vybir-selekt {
  min-height: 38px; height: 38px; padding: 0 8px; border-radius: var(--radius-malyj);
  border: 1px solid var(--mezha); background: var(--poverkhnia); color: var(--tekst);
  font-size: var(--rozmir-malyj); font-weight: 500; cursor: pointer;
}
.vybir-selekt:focus {
  outline: 2px solid var(--akcent); outline-offset: 1px;
}
.blok-rezhymiv-vkhodu {
  display: flex; gap: 8px; margin: 16px 0 4px; padding-top: 14px;
  border-top: 1px solid var(--mezha);
}
.blok-rezhymiv-vkhodu .vybir-obhortka { flex: 1; flex-direction: column; align-items: stretch; gap: 4px; }
.blok-rezhymiv-vkhodu .vybir-selekt { width: 100%; min-height: 40px; }

/* ---------- модальні діалоги керування складами ---------- */
dialog.modal {
  border: none; padding: 0; background: transparent; color: var(--tekst);
  max-width: min(var(--modal-max-shyryna, 520px), calc(100vw - 32px));
  width: 100%; margin: auto; overflow: visible;
}
dialog.modal::backdrop {
  background: rgba(12, 18, 12, 0.65);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: vidkryttia-fonu 0.15s ease;
}
.modal-karta {
  background: var(--poverkhnia); color: var(--tekst); border: 1px solid var(--mezha);
  border-radius: calc(var(--radius) * 1.25); box-shadow: var(--tin-pidkazky);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
  animation: vidkryttia-modal 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vidkryttia-modal {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.modal-shapka {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--mezha); background: var(--poverkhnia-2);
}
.modal-shapka h3 {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--tekst); letter-spacing: -0.01em;
}
.modal-zakryty {
  background: none; border: 1px solid transparent; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-malyj); cursor: pointer; font-size: 18px;
  color: var(--tekst-2); line-height: 1; transition: background 0.15s ease, color 0.15s ease;
}
.modal-zakryty:hover {
  background: var(--poverkhnia); color: var(--tekst); border-color: var(--mezha);
}
.modal-forma {
  padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
}
.forma-riadok {
  display: flex; flex-direction: column; gap: 6px;
}
.forma-pidpys {
  font-size: var(--rozmir-malyj); font-weight: 600; color: var(--tekst);
}
.oboviazkove { color: var(--nebezpeka); margin-left: 2px; }
.forma-info {
  padding: 10px 12px; background: var(--poverkhnia-2); border: 1px solid var(--mezha);
  border-radius: var(--radius); font-size: var(--rozmir); font-weight: 500; color: var(--tekst);
}
.forma-pidkazka {
  font-size: 12px; color: var(--tekst-2); line-height: 1.35;
}
.modal-nyz {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--mezha);
}
.modal-nebezpeka .modal-shapka {
  background: var(--nebezpeka-tlo); border-bottom-color: var(--nebezpeka);
}
.modal-nebezpeka .modal-shapka h3 {
  color: var(--nebezpeka);
}
.modal-tekst-poperedzhennia {
  font-size: var(--rozmir); line-height: 1.5; color: var(--tekst);
}
.modal-tekst-poperedzhennia p { margin: 0 0 10px; }
.poperedzhennia-vyniatok {
  padding: 12px 14px; background: var(--nebezpeka-tlo); border: 1px solid var(--nebezpeka);
  border-radius: var(--radius); color: var(--nebezpeka); font-size: var(--rozmir-malyj); line-height: 1.4;
}

/* ---------- специфіка профілю: ПОЛЕ / СОНЦЕ ---------- */
:root[data-profil="pole"] .tablytsia {
  border: 2px solid var(--mezha);
}
:root[data-profil="pole"] .tablytsia th,
:root[data-profil="pole"] .tablytsia td {
  border: 1px solid var(--mezha);
}
:root[data-profil="pole"] .tablytsia th {
  border-bottom: 2px solid var(--mezha);
}
:root[data-profil="pole"] .pole,
:root[data-profil="pole"] .knopka {
  border-width: 2px;
}
:root[data-profil="pole"] .vuzol-riadok.vybranyj {
  border-width: 2px;
}
:root[data-profil="pole"] .modal-karta {
  border: 2px solid var(--mezha);
}
:root[data-profil="pole"] .modal-shapka {
  border-bottom: 2px solid var(--mezha);
}
:root[data-profil="pole"] .forma-info {
  border: 2px solid var(--mezha);
}
:root[data-profil="pole"] .sklad-mvo-kartka {
  border: 2px solid var(--mezha);
}

/* ---------- специфіка профілю: БЛІНДАЖ / РУКАВИЦІ ---------- */
:root[data-profil="blindazh"] .vuzol-riadok {
  min-height: 50px; font-size: 16px; padding: 0 10px;
}
:root[data-profil="blindazh"] .pidkazka {
  min-height: 52px; padding: 10px 14px;
}
:root[data-profil="blindazh"] .pidkazka-nazva {
  font-size: 16px;
}
:root[data-profil="blindazh"] .tablytsia td.chyslo {
  font-size: 16px; font-weight: 700;
}
:root[data-profil="blindazh"] .tablytsia td.mono {
  font-size: 15px; font-weight: 600;
}
:root[data-profil="blindazh"] .mitka {
  font-size: 12px; padding: 4px 10px; font-weight: 700;
}
:root[data-profil="blindazh"] .prapor {
  min-height: 50px; padding: 0 14px; font-size: 16px;
}
:root[data-profil="blindazh"] .prapor input {
  width: 22px; height: 22px;
}
:root[data-profil="blindazh"] .modal-shapka h3 {
  font-size: 19px;
}
:root[data-profil="blindazh"] .forma-pidpys {
  font-size: 15px;
}
:root[data-profil="blindazh"] .modal-nyz .knopka {
  min-height: 50px; font-size: 16px;
}
:root[data-profil="blindazh"] .sklad-dii .knopka {
  min-height: 46px; font-size: 14px;
}

/* ---------- перемикач екранів («Склади» / «Доступ») ---------- */
.nav-ekrany {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--poverkhnia-2);
  padding: 3px;
  border-radius: var(--radius);
  border: 1px solid var(--mezha);
}
.knopka-nav {
  min-height: 34px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.knopka-nav:hover {
  background: var(--poverkhnia);
  color: var(--tekst);
}
.knopka-nav.aktyvna {
  background: var(--poverkhnia);
  color: var(--akcent);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Коли активний екран доступу, приходу або переміщення — приховуємо складські елементи з шапки */
body:has(#ekran-dostup:not([hidden])) #knopka-derevo,
body:has(#ekran-dostup:not([hidden])) .poshuk-obhortka,
body:has(#ekran-dostup:not([hidden])) #knopka-novyj-sklad,
body:has(#ekran-prykhid:not([hidden])) #knopka-derevo,
body:has(#ekran-prykhid:not([hidden])) .poshuk-obhortka,
body:has(#ekran-prykhid:not([hidden])) #knopka-novyj-sklad,
body:has(#ekran-peremishchennia:not([hidden])) #knopka-derevo,
body:has(#ekran-peremishchennia:not([hidden])) .poshuk-obhortka,
body:has(#ekran-peremishchennia:not([hidden])) #knopka-novyj-sklad {
  display: none !important;
}

/* ---------- екран доступу ---------- */
.ekran-dostup {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--tlo);
}
.dostup-shapka {
  background: var(--poverkhnia);
  border-bottom: 1px solid var(--mezha);
  padding: 0 var(--vidstup);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.dostup-taby {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dostup-taby::-webkit-scrollbar {
  display: none;
}
.dostup-tab {
  min-height: 44px;
  padding: 0 16px;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  font-size: var(--rozmir);
  color: var(--tekst-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dostup-tab:hover {
  color: var(--tekst);
}
.dostup-tab.aktyvna {
  color: var(--akcent);
  border-bottom-color: var(--akcent);
  font-weight: 700;
}
.panel-dostupu {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: var(--vidstup) calc(var(--vidstup) * 1.5);
}
#panel-korystuvachi.panel-dostupu {
  padding: 0;
  overflow: hidden;
}

/* ---------- вкладка: користувачі ---------- */
.korystuvachi-paneli {
  flex: 1;
  display: flex;
  min-height: 0;
}
.korystuvachi-kolonka {
  width: 380px;
  flex-shrink: 0;
  background: var(--poverkhnia);
  border-right: 1px solid var(--mezha);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.korystuvachi-filtr {
  padding: 12px;
  border-bottom: 1px solid var(--mezha);
  background: var(--poverkhnia-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filtr-riadok-holovnyj {
  display: flex;
  gap: 8px;
  align-items: center;
}
.f-q-obhortka {
  flex: 1;
}
.knopka-novyj-korystuvach {
  white-space: nowrap;
}
.filtr-riadok-dodatkovyj {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.prapor-filtr {
  white-space: nowrap;
  font-size: var(--rozmir-malyj);
  cursor: pointer;
}
.spysok-korystuvachiv-obhortka {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.spysok-korystuvachiv {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.korystuvach-riadok {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  background: var(--poverkhnia);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
}
.korystuvach-riadok:hover {
  background: var(--poverkhnia-2);
  border-color: var(--tekst-2);
}
.korystuvach-riadok.vybranyj {
  background: var(--akcent-tlo);
  border-color: var(--akcent);
  box-shadow: 0 0 0 1px var(--akcent);
}
.korystuvach-riadok-verkh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.korystuvach-login {
  font-weight: 700;
  font-size: var(--rozmir);
  color: var(--tekst);
}
.korystuvach-riadok.vybranyj .korystuvach-login {
  color: var(--akcent);
}
.korystuvach-bejdzhiki {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.korystuvach-riadok-nyz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
}
.korystuvach-osoba-posada {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.korystuvach-pidrozdil {
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- бейджі ролей та статусу ---------- */
.bejdzh {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rol-bejdzh {
  border-radius: var(--radius-malyj);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rol-komandyr {
  background: var(--mitka-pochatok-tlo);
  color: var(--mitka-pochatok);
  border-color: var(--mitka-pochatok);
}
.rol-komirnyk {
  background: var(--akcent-tlo);
  color: var(--akcent);
  border-color: var(--akcent);
}
.rol-korystuvach {
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  border-color: var(--mezha);
}
.rol-admin {
  background: var(--mitka-mistyt-tlo);
  color: var(--mitka-mistyt);
  border-color: var(--mitka-mistyt);
}
.rol-ga {
  background: #f1e6f8;
  color: #6a1b9a;
  border-color: #ba68c8;
}
:root[data-tema="temna"] .rol-ga {
  background: #38124d;
  color: #e1bee7;
  border-color: #8e24aa;
}
.bejdzh-vymkneno {
  background: var(--nebezpeka-tlo);
  color: var(--nebezpeka);
  border-color: var(--nebezpeka);
}
.bejdzh-parol {
  background: var(--mitka-mistyt-tlo);
  color: var(--mitka-mistyt);
  border-color: var(--mitka-mistyt);
}
.bejdzh-popravky {
  background: var(--mitka-pochatok-tlo);
  color: var(--mitka-pochatok);
  border-color: var(--mitka-pochatok);
}

/* ---------- картка користувача ---------- */
.kartka-korystuvacha {
  flex: 1;
  overflow-y: auto;
  padding: var(--vidstup) calc(var(--vidstup) * 1.5);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kartka-nazad {
  display: none;
}
.kartka-shapka {
  padding: 16px 20px;
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--tin);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.kartka-login {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.kartka-pidzagolovok {
  font-size: var(--rozmir);
  color: var(--tekst-2);
}
.kartka-vkladky {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--mezha);
  padding-bottom: 8px;
}
.kt-tab {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--mezha);
  background: var(--poverkhnia);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.kt-tab:hover {
  background: var(--poverkhnia-2);
  color: var(--tekst);
}
.kt-tab.aktyvna {
  background: var(--akcent);
  color: var(--akcent-tekst);
  border-color: var(--akcent);
  font-weight: 600;
}
.kartka-polia {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--tin);
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kartka-polia .forma-riadok {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--poverkhnia-2);
}
.kartka-polia .forma-riadok:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.kartka-polia dt {
  color: var(--tekst-2);
  font-size: var(--rozmir-malyj);
  margin: 0;
}
.kartka-polia dd {
  font-weight: 600;
  margin: 0;
  text-align: right;
}
/* п-6b1: реквізити картки номенклатури — підпис ліворуч, значення праворуч
   (глобальне .forma-riadok — стовпчик для форм діалогів; тут перевизначаємо лише в картці номенклатури) */
.kartka-nomenklatury .kartka-polia .forma-riadok {
  flex-direction: row;
  align-items: baseline;
}
.kartka-dii {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kartka-dii .knopka {
  min-height: var(--knopka);
}

/* ---------- список прав у картці ---------- */
.kartka-prava-opys {
  margin-bottom: 14px;
}
.spysok-prav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pravo-hrupa {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  box-shadow: var(--tin);
  overflow: hidden;
}
.pravo-hrupa-zaholovok {
  padding: 10px 16px;
  background: var(--poverkhnia-2);
  border-bottom: 1px solid var(--mezha);
  font-weight: 700;
  font-size: var(--rozmir);
  color: var(--tekst);
}
.pravo-riadok {
  padding: 12px 16px;
  border-bottom: 1px solid var(--poverkhnia-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}
.pravo-riadok:last-child {
  border-bottom: none;
}
.pravo-info {
  flex: 1;
  min-width: 0;
}
.pravo-nazva {
  font-weight: 600;
  color: var(--tekst);
  font-size: var(--rozmir);
}
.pravo-opys {
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
  margin-top: 2px;
}
.pravo-status-dii {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pravo-bejdzh {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.pravo-shablon {
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  border-color: var(--mezha);
}
.pravo-dodano {
  background: var(--akcent-tlo);
  color: var(--akcent);
  border-color: var(--akcent);
}
.pravo-zabrano {
  background: var(--nebezpeka-tlo);
  color: var(--nebezpeka);
  border-color: var(--nebezpeka);
}
.pravo-nemaie {
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  opacity: 0.6;
}
.pravo-fiks {
  background: var(--poverkhnia-2);
  color: var(--tekst);
  border: 1px dashed var(--mezha);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pravo-dii {
  display: inline-flex;
  gap: 6px;
}
.knopka-pravo {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--radius-malyj);
}

/* ---------- бачить (видимість) ---------- */
.bachyt-tekst {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bachyt-kartka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--tin);
}
.bachyt-kartka h4 {
  margin: 0 0 8px;
  font-size: var(--rozmir);
  color: var(--tekst);
}
.bachyt-kartka p {
  margin: 0;
  color: var(--tekst-2);
  line-height: 1.5;
}
.bachyt-kartka b {
  color: var(--tekst);
}

/* ---------- шаблони ролей ---------- */
.poperedzhennia-blok {
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--mitka-mistyt-tlo);
  color: var(--mitka-mistyt);
  border: 1px solid var(--mitka-mistyt);
  margin-bottom: 16px;
  line-height: 1.4;
}
.tablytsia-obhortka-shablony {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  box-shadow: var(--tin);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.tablytsia-shablonyv {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
table.tablytsia-shablonyv th,
table.tablytsia-shablonyv td {
  padding: 10px 14px;
  border: 1px solid var(--mezha);
  vertical-align: middle;
}
table.tablytsia-shablonyv th {
  background: var(--poverkhnia-2);
  font-weight: 600;
  font-size: var(--rozmir-malyj);
}
table.tablytsia-shablonyv th.kolona-pravo,
table.tablytsia-shablonyv td.kolona-pravo {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--poverkhnia);
  z-index: 2;
  min-width: 250px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}
table.tablytsia-shablonyv th.kolona-pravo {
  background: var(--poverkhnia-2);
}
table.tablytsia-shablonyv th.kolona-ga {
  background: var(--poverkhnia-2);
  opacity: 0.85;
}
tr.shablon-hrupa-riadok td {
  background: var(--poverkhnia-2) !important;
  font-weight: 700;
  text-align: left;
  color: var(--akcent);
  padding: 8px 14px;
}
.shablon-chek {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: var(--akcent);
}
.shablon-chek:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- підрозділи (область складів) ---------- */
.panel-pidrozdily-shapka {
  margin-bottom: 14px;
}
.spysok-oblastej-obhortka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  box-shadow: var(--tin);
  overflow: hidden;
}
.spysok-oblastej {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spysok-oblastej li {
  padding: 14px 18px;
  border-bottom: 1px solid var(--poverkhnia-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.spysok-oblastej li:last-child {
  border-bottom: none;
}
.oblast-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oblast-pidrozdil {
  font-weight: 700;
  font-size: var(--rozmir);
  color: var(--tekst);
}
.oblast-sklad-tekst {
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oblast-bejdzh {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--akcent-tlo);
  color: var(--akcent);
  border: 1px solid var(--akcent);
}

/* ---------- паролі та режими в діалогах ---------- */
.rezhym-vyboru-osoby {
  display: flex;
  gap: 20px;
  margin-top: 6px;
}
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}
.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--akcent);
}
.modal-parol .parol-tekst {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--akcent);
  user-select: all;
  text-align: center;
}
.blok-paroliu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: var(--poverkhnia-2);
  border: 2px dashed var(--akcent);
  border-radius: var(--radius);
  margin: 16px 0;
}
.poperedzhennia-strohe {
  background: var(--nebezpeka-tlo) !important;
  color: var(--nebezpeka) !important;
  border-color: var(--nebezpeka) !important;
}
.forma-pidkazka-parol {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--poverkhnia-2);
  border-radius: var(--radius-malyj);
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
}
.forma-pidkazka-parol ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

/* Оверрайди для тактичних профілів Поле та Бліндаж */
:root[data-profil="pole"] .nav-ekrany,
:root[data-profil="pole"] .kartka-shapka,
:root[data-profil="pole"] .kartka-polia,
:root[data-profil="pole"] .pravo-hrupa,
:root[data-profil="pole"] .spysok-oblastej-obhortka,
:root[data-profil="pole"] .blok-paroliu {
  border-width: 2px;
}
:root[data-profil="blindazh"] .dostup-tab,
:root[data-profil="blindazh"] .kt-tab {
  min-height: 50px;
  font-size: 15px;
}
:root[data-profil="blindazh"] .korystuvach-riadok {
  min-height: 52px;
  padding: 12px 14px;
}
:root[data-profil="blindazh"] .modal-parol .parol-tekst {
  font-size: 30px;
}

/* ==========================================================================
   ЕКРАН «ПРИХІД» (ОПРИБУТКУВАННЯ ТМЦ) — Крок п-3c
   ========================================================================== */

/* ---------- загальний контейнер екрана ---------- */
.ekran-prykhid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--tlo);
  overflow-y: auto;
}

/* ---------- вигляд А: список приходів ---------- */
.prykhid-spysok {
  padding: var(--vidstup) calc(var(--vidstup) * 1.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.prykhid-spysok-shapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.prykhid-spysok-shapka h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.knopka-novyj-prykhid {
  white-space: nowrap;
  font-weight: 600;
  gap: 8px;
}
.prykhid-filtry {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--poverkhnia);
  padding: 12px 16px;
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  box-shadow: var(--tin);
}
.prykhid-filtry .f-pole-obhortka {
  min-width: 200px;
  flex: 1;
}
.prykhid-filtry .f-pole-obhortka label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}
.prykhid-tablytsia-obhortka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--tin);
}
.prykhid-tablytsia {
  width: 100%;
  border-collapse: collapse;
}
.prykhid-tablytsia th {
  text-align: left;
  padding: 10px 14px;
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  font-size: var(--rozmir-malyj);
  font-weight: 600;
  border-bottom: 1px solid var(--mezha);
}
.prykhid-tablytsia td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--poverkhnia-2);
  font-size: var(--rozmir);
}
.prykhid-tablytsia tr:last-child td {
  border-bottom: none;
}
.prykhid-riadok-spysku {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.prykhid-riadok-spysku:hover {
  background-color: var(--poverkhnia-2);
}
.prykhid-riadok-spysku:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: -2px;
}
.prykhid-shche-obhortka {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.prykhid-shche {
  min-width: 180px;
}

/* Бейджі статусів документа приходу */
.bejdzh-chernetka {
  background: var(--mitka-mistyt-tlo);
  color: var(--mitka-mistyt);
  border-color: var(--mitka-mistyt);
}
.bejdzh-provedeno {
  background: var(--mitka-tochnyj-tlo);
  color: var(--mitka-tochnyj);
  border-color: var(--mitka-tochnyj);
}
.bejdzh-inshyj {
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  border-color: var(--mezha);
}
.bejdzh-bez-sn {
  background: var(--mitka-mistyt-tlo);
  color: var(--mitka-mistyt);
  border-color: var(--mitka-mistyt);
}

/* ---------- вигляд Б: картка приходу ---------- */
.prykhid-kartka {
  padding: var(--vidstup) calc(var(--vidstup) * 1.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.prykhid-kartka-verkh {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prykhid-nazad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* Шапка документа */
.forma-prykhid-shapka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--tin);
}
.shapka-sluzhbova {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--poverkhnia-2);
  font-size: var(--rozmir-malyj);
}
.forma-prykhid-sitka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.forma-riadok-shyrokyj {
  grid-column: 1 / -1;
}
.shapka-dii {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

/* Секція рядків накладної */
.prykhid-riadky {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--tin);
}
.riadky-shapka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.riadky-shapka h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.riadky-lichylnyk {
  font-weight: 500;
}
.prykhid-poperedzhennia {
  background: var(--mitka-mistyt-tlo);
  border: 1px solid var(--mitka-mistyt);
  color: var(--mitka-mistyt);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: var(--rozmir-malyj);
  font-weight: 500;
}
.prykhid-poperedzhennia ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.riadky-tablytsia-obhortka {
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  overflow-x: auto;
}
.riadky-tablytsia {
  width: 100%;
  border-collapse: collapse;
}
.riadky-tablytsia th {
  text-align: left;
  padding: 8px 10px;
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  font-size: var(--rozmir-malyj);
  font-weight: 600;
  border-bottom: 1px solid var(--mezha);
}
.riadky-tablytsia td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--poverkhnia-2);
  font-size: var(--rozmir);
  vertical-align: middle;
}
.riadky-tablytsia tr:last-child td {
  border-bottom: none;
}
.kolona-nomer { width: 38px; text-align: center; }
.kolona-nazva { min-width: 160px; }
.kolona-chyslo { width: 72px; text-align: right; }
.kolona-kudy { min-width: 130px; max-width: 175px; word-break: break-word; white-space: normal; }
.kolona-kat { width: 78px; text-align: center; }
.kolona-dzherelo { min-width: 110px; }
.kolona-vartist { width: 95px; text-align: right; }
.kolona-sn { min-width: 130px; max-width: 170px; word-break: break-word; }
.kolona-dii { width: 150px; min-width: 150px; max-width: 150px; text-align: right; white-space: nowrap; padding-left: 4px; padding-right: 6px; }

.riadky-nazva-osnovna {
  font-weight: 600;
  color: var(--tekst);
}
.riadky-artykul-kod {
  font-size: 12px;
  color: var(--tekst-2);
  margin-top: 2px;
}
.riadky-kudy-mvo {
  font-size: 12px;
  color: var(--tekst-2);
  margin-top: 2px;
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
}

/* Кнопки дій у рядку накладної */
.kolona-dii .dii-hrupa {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.dia-redahuvaty, .dia-kopiiuvaty, .dia-vydalyty-riadok {
  min-height: 44px;
  height: 44px;
  min-width: 44px;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: var(--radius-malyj);
}
@media (max-width: 1440px) {
  .kolona-dii .knopka span:not(.ikona) {
    display: none;
  }
}
.dia-vydalyty-riadok:hover, .dia-vydalyty-riadok:focus-visible {
  background: var(--nebezpeka-tlo);
  color: var(--nebezpeka);
  border-color: var(--nebezpeka);
}
.riadky-nyzhni-dii {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}
.knopka-dodaty-riadok {
  min-height: 44px;
  font-weight: 600;
  gap: 8px;
  background: var(--akcent-tlo);
  color: var(--akcent);
  border-color: var(--akcent);
}
.knopka-dodaty-riadok:hover {
  background: var(--akcent);
  color: var(--akcent-tekst);
}

/* Підвал дій картки */
.prykhid-nyz {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--tin);
}
.prykhid-dii {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.knopka-provesty {
  min-height: 44px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 15px;
}
.knopka-vydalyty-chernetku {
  min-height: 44px;
  padding: 0 16px;
  margin-left: auto;
}
.provesty-pidkazka {
  width: 100%;
  font-size: 13px;
  margin-top: -4px;
}
.prykhid-provedeno-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--mitka-tochnyj-tlo);
  color: var(--mitka-tochnyj);
  border: 1px solid var(--mitka-tochnyj);
  font-size: 14px;
}
.prykhid-provedeno-banner b {
  font-weight: 700;
}
.banner-kudy {
  font-size: 13px;
  color: var(--tekst);
}
.knopka-do-skladu {
  white-space: nowrap;
  font-weight: 600;
}

/* Стан «Тільки читання» (проведений документ) */
.prykhid-kartka.tilky-chytannia .forma-prykhid-shapka input,
.prykhid-kartka.tilky-chytannia .forma-prykhid-shapka select,
.prykhid-kartka.tilky-chytannia .forma-prykhid-shapka textarea {
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
  pointer-events: none;
  color: var(--tekst);
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
}
.prykhid-kartka.tilky-chytannia #shapka-zberehty,
.prykhid-kartka.tilky-chytannia #knopka-dodaty-riadok,
.prykhid-kartka.tilky-chytannia .kolona-dii,
.prykhid-kartka.tilky-chytannia .dia-redahuvaty,
.prykhid-kartka.tilky-chytannia .dia-kopiiuvaty,
.prykhid-kartka.tilky-chytannia .dia-vydalyty-riadok,
.prykhid-kartka.tilky-chytannia .prykhid-dii {
  display: none !important;
}
.prykhid-kartka.tilky-chytannia #prykhid-provedeno-banner {
  display: flex !important;
}

/* ---------- діалоги приходу ---------- */
dialog.modal-shyrokyj {
  max-width: min(720px, calc(100vw - 32px));
}
.forma-sektsiia {
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--poverkhnia);
}
.forma-sektsiia-zaholovok {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-2);
  padding: 0 6px;
}
.forma-riadok-hrupa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pole-z-odynytseiu {
  position: relative;
  display: flex;
  align-items: center;
}
.pole-z-odynytseiu input {
  padding-right: 50px;
}
.pole-odynytsia {
  position: absolute;
  right: 14px;
  color: var(--tekst-2);
  font-weight: 600;
  font-size: 13px;
  pointer-events: none;
}
.riadok-novyj-artykul-obhortka {
  margin-top: 4px;
}
.riadok-artykul-kartka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--poverkhnia-2);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
}
.artykul-kartka-nazva {
  font-weight: 600;
  font-size: 15px;
  color: var(--tekst);
}
.artykul-kartka-detali {
  margin-top: 2px;
}
.prapor-velykyj {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
}
.prapor-velykyj input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--akcent);
}

/* Радіо-картки вибору типу обліку */
.radio-kartky-hrupa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.radio-karta {
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  background: var(--poverkhnia);
  transition: all 0.15s ease;
}
.radio-karta input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--akcent);
}
.radio-karta-vmist b {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.radio-karta:has(input:checked) {
  border-color: var(--akcent);
  background: var(--akcent-tlo);
}

/* Блок схожих артикулів */
.artykul-skhozhi-blok {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--mitka-mistyt-tlo);
  border: 1px solid var(--mitka-mistyt);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skhozhi-spysok {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skhozhyj-artykul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius-malyj);
  font-size: var(--rozmir-malyj);
}
.prapor-skhozhi {
  font-weight: 600;
  color: var(--tekst);
}

/* Поля характеристик групи */
.kharakterystyka-pole {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

/* Підсумок проведення */
.provesty-pidsumok-blok {
  background: var(--poverkhnia-2);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provesty-pidsumok-zahalom {
  border-top: 1px solid var(--mezha);
  padding-top: 6px;
  margin-top: 4px;
}

/* ---------- стани CSS (індикатори, помилки полів) ---------- */
/* Спінер завантаження в кнопці */
.knopka.zavantazhennia {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.knopka.zavantazhennia::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: zavantazhennia-obert 0.6s linear infinite;
  border-color: var(--tekst) transparent var(--tekst) var(--tekst);
}
.knopka-holovna.zavantazhennia::after {
  border-color: var(--akcent-tekst) transparent var(--akcent-tekst) var(--akcent-tekst);
}
@keyframes zavantazhennia-obert {
  to { transform: rotate(360deg); }
}

/* Поле з помилкою валідації */
.pole.pole-pomylka,
select.pole.pole-pomylka,
textarea.pole.pole-pomylka {
  border-color: var(--nebezpeka) !important;
  outline-color: var(--nebezpeka) !important;
  background-color: var(--nebezpeka-tlo);
}
.pole-pomylka-tekst {
  color: var(--nebezpeka);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

/* Довгі повідомлення про помилку */
.dialoh-pomylka,
.pomylka {
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.pomylka ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

/* Підтримка профілів для екрана Прихід */
:root[data-profil="pole"] .prykhid-filtry,
:root[data-profil="pole"] .prykhid-tablytsia-obhortka,
:root[data-profil="pole"] .forma-prykhid-shapka,
:root[data-profil="pole"] .prykhid-riadky,
:root[data-profil="pole"] .riadky-tablytsia-obhortka,
:root[data-profil="pole"] .prykhid-nyz,
:root[data-profil="pole"] .forma-sektsiia,
:root[data-profil="pole"] .radio-karta,
:root[data-profil="pole"] .riadok-artykul-kartka {
  border-width: 2px;
}
:root[data-profil="blindazh"] .dia-redahuvaty,
:root[data-profil="blindazh"] .dia-kopiiuvaty,
:root[data-profil="blindazh"] .dia-vydalyty-riadok {
  min-height: 48px;
  font-size: 14px;
  padding: 0 12px;
}
:root[data-profil="blindazh"] .knopka-novyj-prykhid,
:root[data-profil="blindazh"] .knopka-dodaty-riadok,
:root[data-profil="blindazh"] .knopka-provesty,
:root[data-profil="blindazh"] .knopka-vydalyty-chernetku {
  min-height: 50px;
  font-size: 16px;
}
:root[data-profil="blindazh"] .radio-karta {
  min-height: 52px;
  padding: 14px;
}

/* ==========================================================================
   ЕКРАН «ПЕРЕМІЩЕННЯ» (ВНУТРІШНЄ ПЕРЕМІЩЕННЯ ТА ПЕРЕДАЧА МВО) — Крок п-4b / п-4c
   ========================================================================== */

/* ---------- загальний контейнер екрана ---------- */
.ekran-peremishchennia {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--tlo);
  overflow-y: auto;
}

/* ---------- вигляд А: список переміщень ---------- */
.perem-spysok {
  padding: var(--vidstup) calc(var(--vidstup) * 1.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.perem-spysok-shapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.perem-spysok-shapka h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.knopka-nove-peremishchennia {
  white-space: nowrap;
  font-weight: 600;
  gap: 8px;
}
.perem-filtry {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--poverkhnia);
  padding: 12px 16px;
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  box-shadow: var(--tin);
}
.perem-filtry .f-pole-obhortka {
  min-width: 200px;
  flex: 1;
}
.perem-filtry .f-pole-obhortka label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}
.perem-tablytsia-obhortka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--tin);
}
.perem-tablytsia {
  width: 100%;
  border-collapse: collapse;
}
.perem-tablytsia th {
  text-align: left;
  padding: 10px 14px;
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  font-size: var(--rozmir-malyj);
  font-weight: 600;
  border-bottom: 1px solid var(--mezha);
}
.perem-tablytsia td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--poverkhnia-2);
  font-size: var(--rozmir);
}
.perem-tablytsia tr:last-child td {
  border-bottom: none;
}
.perem-riadok-spysku {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.perem-riadok-spysku:hover {
  background-color: var(--poverkhnia-2);
}
.perem-riadok-spysku:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: -2px;
}
.perem-shche-obhortka {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.perem-shche {
  min-width: 180px;
}

/* ---------- вигляд Б: картка переміщення ---------- */
.perem-kartka {
  padding: var(--vidstup) calc(var(--vidstup) * 1.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.perem-kartka-verkh {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.perem-nazad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* Шапка документа переміщення */
.forma-perem-shapka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--tin);
}

/* Секція рядків переміщення */
.perem-riadky {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--tin);
}
.perem-riadky-tablytsia-obhortka {
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  overflow-x: auto;
}
.perem-riadky-tablytsia {
  width: 100%;
  border-collapse: collapse;
}
.perem-riadky-tablytsia th {
  text-align: left;
  padding: 8px 10px;
  background: var(--poverkhnia-2);
  color: var(--tekst-2);
  font-size: var(--rozmir-malyj);
  font-weight: 600;
  border-bottom: 1px solid var(--mezha);
}
.perem-riadky-tablytsia td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--poverkhnia-2);
  font-size: var(--rozmir);
  vertical-align: middle;
}
.perem-riadky-tablytsia tr:last-child td {
  border-bottom: none;
}

/* Стовпці таблиці рядків переміщення */
.perem-riadky-tablytsia .kolona-nomer { width: 38px; text-align: center; }
.perem-riadky-tablytsia .kolona-nazva { min-width: 160px; max-width: 250px; word-break: break-word; }
.perem-riadky-tablytsia .kolona-chyslo { width: 68px; text-align: right; }
.perem-riadky-tablytsia .kolona-zvidky { min-width: 135px; max-width: 195px; word-break: break-word; white-space: normal; }
.perem-riadky-tablytsia .kolona-napriamok { width: 24px; min-width: 24px; text-align: center; color: var(--tekst-2); font-weight: 700; padding: 8px 2px; }
.perem-riadky-tablytsia .kolona-kudy { min-width: 135px; max-width: 195px; word-break: break-word; white-space: normal; }
.perem-riadky-tablytsia .kolona-prymitka { min-width: 105px; max-width: 170px; word-break: break-word; }
.perem-riadky-tablytsia .kolona-dii { width: 104px; min-width: 104px; max-width: 104px; text-align: right; white-space: nowrap; padding-left: 4px; padding-right: 6px; }

.riadky-zvidky-mvo,
.riadky-kudy-mvo {
  font-size: 12px;
  color: var(--tekst-2);
  margin-top: 2px;
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
}

/* Передача між МВО на тому самому складі */
.perem-riadky-tablytsia tr.perem-mizh-mvo {
  background: var(--poverkhnia-2);
}
.perem-riadky-tablytsia tr.perem-mizh-mvo .kolona-kudy .riadky-kudy-mvo {
  color: var(--akcent);
  font-weight: 600;
  background: var(--akcent-tlo);
  padding: 1px 6px;
  border-radius: var(--radius-malyj);
  display: inline-block;
  border: 1px solid var(--akcent);
}
.perem-riadky-tablytsia tr.perem-mizh-mvo .kolona-zvidky .riadky-zvidky-mvo {
  font-weight: 600;
}

/* Кнопки дій у рядку переміщення */
.perem-dia-redahuvaty,
.perem-dia-vydalyty {
  min-height: 44px;
  height: 44px;
  min-width: 44px;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: var(--radius-malyj);
}
.perem-dia-vydalyty:hover,
.perem-dia-vydalyty:focus-visible {
  background: var(--nebezpeka-tlo);
  color: var(--nebezpeka);
  border-color: var(--nebezpeka);
}

/* Підвал дій картки переміщення */
.perem-nyz {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--tin);
}
.perem-dii {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.perem-banner-marshruty {
  font-size: 13px;
  color: var(--tekst);
}

/* Стан «Тільки читання» для проведеного переміщення */
.perem-kartka.tilky-chytannia .forma-perem-shapka input,
.perem-kartka.tilky-chytannia .forma-perem-shapka select,
.perem-kartka.tilky-chytannia .forma-perem-shapka textarea {
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
  pointer-events: none;
  color: var(--tekst);
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
}
.perem-kartka.tilky-chytannia #perem-shapka-zberehty,
.perem-kartka.tilky-chytannia #perem-knopka-dodaty,
.perem-kartka.tilky-chytannia #perem-knopka-dodaty-porozhno,
.perem-kartka.tilky-chytannia .kolona-dii,
.perem-kartka.tilky-chytannia .perem-dia-redahuvaty,
.perem-kartka.tilky-chytannia .perem-dia-vydalyty,
.perem-kartka.tilky-chytannia .perem-dii {
  display: none !important;
}
.perem-kartka.tilky-chytannia #perem-provedeno-banner {
  display: flex !important;
}

/* Діалог 5.2 «Позиція переміщення»: вибір залишків, кількість, куди */
.perem-blok-vybir {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.perem-zalyshky {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  background: var(--poverkhnia);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.perem-zalyshok {
  padding: 8px 12px;
  border-radius: var(--radius-malyj);
  border: 1px solid var(--mezha);
  background: var(--poverkhnia);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  transition: background-color 0.15s, border-color 0.15s;
}
.perem-zalyshok:hover {
  background: var(--poverkhnia-2);
}
.perem-zalyshok[aria-selected="true"] {
  border-color: var(--akcent);
  background: var(--akcent-tlo);
  box-shadow: 0 0 0 1px var(--akcent);
}
.perem-zalyshok[aria-selected="true"] .perem-zalyshok-chyslo::before {
  content: "✓ ";
  font-weight: 700;
  color: var(--akcent);
  margin-right: 4px;
}
.perem-zalyshok-nedostupnyj {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--poverkhnia-2);
}
.perem-zalyshok-nedostupnyj:hover {
  background: var(--poverkhnia-2);
}
.perem-zalyshok-nedostupnyj .perem-zalyshok-rezerv {
  color: var(--nebezpeka);
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.perem-zalyshok-osnovne {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.perem-zalyshok-nazva {
  font-weight: 600;
  color: var(--tekst);
  font-size: 14px;
}
.perem-zalyshok-sn {
  font-size: 12px;
  color: var(--tekst-2);
}
.perem-zalyshok-mvo {
  font-size: 11px;
  color: var(--tekst-2);
}

.perem-zalyshok-pravo {
  text-align: right;
  flex-shrink: 0;
}
.perem-zalyshok-chyslo {
  font-size: 14px;
  color: var(--tekst);
}
.perem-zalyshok-chyslo b {
  font-size: 16px;
  color: var(--akcent);
}

.perem-zalyshky-shche-obhortka {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.perem-zalyshky.zavantazhennia {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
  min-height: 80px;
}

/* Картка обраної позиції (замість списку вибору) */
.perem-vybrano {
  background: var(--poverkhnia-2);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.perem-vybrano-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.perem-vybrano-nazva {
  font-weight: 700;
  font-size: 15px;
  color: var(--tekst);
}
.perem-vybrano-chyslo {
  color: var(--akcent);
}

/* Кількість у рядок з одиницею та кнопкою «Усе доступне» */
.perem-kilkist-riadok {
  display: flex;
  align-items: center;
  gap: 10px;
}
.perem-kilkist-riadok .pole-z-odynytseiu {
  flex: 1;
}
.perem-vse {
  min-height: 44px;
  white-space: nowrap;
  font-weight: 600;
}

/* Сітка призначення «Куди» (2 стовпці на ноутбуці) */
.perem-kudy-sitka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Попередження при співпадінні складу «звідки» і «куди» */
.poperedzhennia-zbih {
  background: var(--mitka-mistyt-tlo);
  border: 1px solid var(--mitka-mistyt);
  color: var(--mitka-mistyt);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}

/* Підсумок у модалі проведення */
.perem-provesty-pidsumok-blok {
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  overflow: hidden;
}
.perem-provesty-tablytsia {
  width: 100%;
  border-collapse: collapse;
}
.perem-provesty-tablytsia th {
  background: var(--poverkhnia-2);
  padding: 8px 12px;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid var(--mezha);
}
.perem-provesty-tablytsia td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--poverkhnia-2);
}
.perem-provesty-tablytsia th.kolona-chyslo,
.perem-provesty-tablytsia td.kolona-chyslo {
  text-align: right;
}
.perem-provesty-tablytsia tr:last-child td {
  border-bottom: none;
}
.perem-provesty-razom {
  padding: 10px 12px;
  background: var(--poverkhnia);
  border-top: 1px solid var(--mezha);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

/* ---------- Діалог вибору чернетки «Перемістити» (п-4d) ---------- */
.perem-vybir-opys {
  background: var(--poverkhnia-2);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.perem-vybir-nazva {
  font-weight: 700;
  font-size: 15px;
  color: var(--tekst);
}
.perem-vybir-detali {
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.perem-vybir-dostupno {
  font-size: var(--rozmir-malyj);
  color: var(--tekst);
  margin-top: 2px;
}
.perem-vybir-dostupno b,
.perem-vybir-dostupno strong {
  color: var(--akcent);
  font-weight: 700;
}
.perem-vybir-spysok {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  background: var(--poverkhnia);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.perem-vybir-spysok.zavantazhennia {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
  min-height: 90px;
}
.perem-vybir-variant {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--mezha);
  border-radius: var(--radius-malyj);
  background: var(--poverkhnia);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}
.perem-vybir-variant:hover {
  background: var(--akcent-tlo);
  border-color: var(--akcent);
}
.perem-vybir-variant input[type="radio"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--akcent);
  flex-shrink: 0;
  cursor: pointer;
}
.perem-vybir-variant-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.perem-vybir-variant-nazva {
  font-weight: 700;
  font-size: 14px;
  color: var(--tekst);
}
.perem-vybir-variant-detali {
  font-size: var(--rozmir-malyj);
  color: var(--tekst-2);
}
.perem-vybir-variant:has(input[type="radio"]:checked) {
  border-color: var(--akcent);
  border-width: 2px;
  padding: 9px 11px;
  background: var(--akcent-tlo);
  box-shadow: 0 0 0 1px var(--akcent);
}
.perem-vybir-variant:has(input[type="radio"]:checked) .perem-vybir-variant-nazva {
  color: var(--akcent);
}
.perem-vybir-variant:has(input[type="radio"]:checked)::after {
  content: "✓";
  font-weight: 700;
  font-size: 15px;
  color: var(--akcent);
  margin-left: auto;
  align-self: center;
  padding-left: 8px;
}

/* Тактичні профілі для переміщення */
:root[data-profil="pole"] .perem-zalyshok,
:root[data-profil="pole"] .perem-vybrano,
:root[data-profil="pole"] .perem-nyz,
:root[data-profil="pole"] .perem-filtry,
:root[data-profil="pole"] .perem-tablytsia-obhortka,
:root[data-profil="pole"] .perem-riadky-tablytsia-obhortka,
:root[data-profil="pole"] .perem-vybir-opys,
:root[data-profil="pole"] .perem-vybir-spysok,
:root[data-profil="pole"] .perem-vybir-variant,
:root[data-profil="pole"] .knopka-peremistyty,
:root[data-profil="pole"] table.perem-tablytsia tbody tr,
:root[data-profil="pole"] table.perem-riadky-tablytsia tbody tr {
  border-width: 2px;
}
:root[data-profil="blindazh"] .knopka-nove-peremishchennia,
:root[data-profil="blindazh"] .perem-dia-redahuvaty,
:root[data-profil="blindazh"] .perem-dia-vydalyty,
:root[data-profil="blindazh"] .perem-zalyshok,
:root[data-profil="blindazh"] .knopka-peremistyty {
  min-height: 50px;
}
:root[data-profil="blindazh"] .knopka-peremistyty {
  font-size: 15px;
}
:root[data-profil="blindazh"] .perem-vybir-variant {
  min-height: 52px;
  padding: 12px 14px;
}
:root[data-profil="blindazh"] .perem-vybir-variant input[type="radio"] {
  width: 22px;
  height: 22px;
}
:root[data-profil="blindazh"] .perem-vybir-variant-nazva {
  font-size: 16px;
}
:root[data-profil="blindazh"] .perem-vybir-variant-detali {
  font-size: 14px;
}
:root[data-profil="blindazh"] #perem-knopka-provesty,
:root[data-profil="blindazh"] #perem-knopka-vydalyty-chernetku {
  min-height: 50px;
  font-size: 16px;
}

/* ---------- телефон (≤ 760px) ---------- */
@media (max-width: 760px) {
  .shapka { flex-wrap: wrap; padding: 10px var(--vidstup); gap: 8px 10px; }
  .logo { font-size: 16px; white-space: nowrap; }
  .khto {
    display: inline-flex; align-items: center; max-width: 130px;
    overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--tekst-2);
  }
  .khto b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .khto span { display: none; }
  .bloki-keruvannia { order: 2; margin-left: auto; gap: 4px; }
  .vybir-pidpys { display: none; }
  .vybir-selekt { min-height: 38px; height: 38px; font-size: 12px; padding: 0 4px; }
  .poshuk-obhortka { order: 4; flex-basis: 100%; max-width: none; margin-top: 4px; }
  #knopka-derevo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

  /* Бічна панель складів (висувний ящик) */
  .derevo {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(88vw, 340px);
    transform: translateX(-100%); transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--tin-pidkazky); border-right: 2px solid var(--mezha);
  }
  .derevo.vidkryte { transform: none; }

  /* Затемнення оверлею при відкритому дереві складів */
  .tilo:has(.derevo.vidkryte) .vmist::before {
    content: ""; position: fixed; inset: 0; z-index: 25;
    background: rgba(10, 16, 10, 0.6);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    animation: vidkryttia-fonu 0.2s ease;
  }
  @keyframes vidkryttia-fonu {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .vmist { padding: var(--vidstup); }

  /* Мобільний тактичний картковий режим замість стисненої таблиці */
  table.tablytsia:not(.tablytsia-shablonyv) {
    display: block; border: none; background: none; box-shadow: none; border-radius: 0;
  }
  table.tablytsia:not(.tablytsia-shablonyv) thead {
    display: none;
  }
  table.tablytsia:not(.tablytsia-shablonyv) tbody {
    display: flex; flex-direction: column; gap: 8px;
  }
  table.tablytsia:not(.tablytsia-shablonyv) tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nazva nazva"
      "sklad sklad"
      "nomer chyslo";
    gap: 8px 10px;
    align-items: center;
    background: var(--poverkhnia);
    border: 1px solid var(--mezha);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--tin);
  }
  :root[data-profil="pole"] table.tablytsia tbody tr {
    border-width: 2px;
  }
  :root[data-profil="blindazh"] table.tablytsia tbody tr {
    padding: 14px 16px;
  }
  table.tablytsia tbody tr td:first-child {
    grid-area: nazva;
    padding: 0;
    border: none;
    background: none !important;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--tekst);
  }
  table.tablytsia tbody tr td.koloda-dod {
    display: none;
  }
  table.tablytsia tbody tr td.mono:not(.koloda-dod) {
    grid-area: nomer;
    padding: 4px 8px;
    border: 1px solid var(--mezha);
    border-radius: var(--radius-malyj);
    background: var(--poverkhnia-2) !important;
    font-size: 13px;
    color: var(--tekst-2);
    display: inline-flex;
    align-items: center;
    width: fit-content;
    letter-spacing: 0.02em;
  }
  table.tablytsia tbody tr td.mono:not(.koloda-dod)::before {
    content: "№ ";
    font-weight: 700;
    opacity: 0.7;
    margin-right: 2px;
  }
  table.tablytsia:not(.tablytsia-shablonyv) tbody tr td.chyslo {
    grid-area: chyslo;
    padding: 4px 10px;
    border: 1px solid var(--akcent);
    border-radius: var(--radius-malyj);
    background: var(--akcent-tlo) !important;
    color: var(--akcent);
    font-weight: 700;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
    justify-self: end;
  }
  table.tablytsia:not(.tablytsia-shablonyv) tbody tr.pidsvitka {
    border: 2px solid var(--akcent) !important;
    background: var(--akcent-tlo);
    box-shadow: 0 0 0 2px var(--akcent-tlo);
  }
  table.tablytsia:not(.tablytsia-shablonyv) tbody tr.pidsvitka td:first-child {
    color: var(--akcent);
  }
  table.tablytsia:not(.tablytsia-shablonyv) tbody tr:has(.koloda-dii) {
    grid-template-areas:
      "nazva nazva"
      "sklad sklad"
      "nomer chyslo"
      "dii dii";
  }
  /* п-6c: повний шлях складу в картці телефону — на всю ширину, дрібно */
  table.tablytsia tbody tr td.koloda-sklad {
    grid-area: sklad;
    grid-column: 1 / -1;
    padding: 0;
    border: none;
    background: none !important;
    font-size: var(--rozmir-malyj);
    color: var(--tekst-2);
  }
  table.tablytsia tbody tr td.koloda-dii {
    grid-area: dii;
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 0 0;
    border: none;
    background: none !important;
  }
  table.tablytsia .knopka-peremistyty span {
    display: none;
  }
  table.tablytsia .knopka-peremistyty {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    justify-content: center;
  }

  /* Дії над складом та МВО на телефоні */
  .sklad-dii {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: 100%; margin-left: 0; margin-top: 8px;
  }
  .sklad-dii .knopka {
    width: 100%; min-height: 44px;
  }
  .sklad-mvo-kartka {
    flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  }
  .sklad-mvo-kartka .knopka-posylannia {
    margin-left: auto;
  }
  /* Модальні вікна на телефоні */
  dialog.modal {
    max-width: calc(100vw - 16px); width: calc(100vw - 16px);
  }
  .modal-karta {
    max-height: calc(100vh - 24px);
  }
  .modal-nyz {
    flex-direction: column-reverse; align-items: stretch; gap: 8px;
  }
  .modal-nyz .knopka {
    width: 100%; min-height: 46px;
  }

  /* Перемикач екранів у шапці на телефоні */
  .nav-ekrany {
    padding: 2px;
  }
  .knopka-nav {
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  /* Телефон: Master-Detail для користувачів */
  .korystuvachi-paneli {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .korystuvachi-kolonka {
    width: 100%;
    height: 100%;
    border-right: none;
  }
  .kartka-korystuvacha {
    display: none;
  }
  .korystuvachi-paneli.kartka-vidkryta .korystuvachi-kolonka {
    display: none;
  }
  .korystuvachi-paneli.kartka-vidkryta .kartka-korystuvacha {
    display: flex;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--tlo);
    z-index: 10;
    padding: 12px;
  }
  .kartka-nazad {
    display: inline-flex !important;
    width: fit-content;
    margin-bottom: 12px;
  }
  .kartka-shapka {
    flex-direction: column;
    padding: 12px 14px;
    gap: 10px;
  }
  .kartka-dii {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .kartka-dii .knopka {
    width: 100%;
    min-height: 44px;
  }

  /* Таблиця шаблонів на телефоні (горизонтальний скрол та липка перша колонка) */
  table.tablytsia-shablonyv {
    display: table !important;
    min-width: 650px;
  }
  table.tablytsia-shablonyv thead {
    display: table-header-group !important;
  }
  table.tablytsia-shablonyv tbody {
    display: table-row-group !important;
  }
  table.tablytsia-shablonyv tr {
    display: table-row !important;
    padding: 0 !important;
    border: none !important;
  }
  table.tablytsia-shablonyv th,
  table.tablytsia-shablonyv td {
    display: table-cell !important;
  }
  table.tablytsia-shablonyv th.kolona-pravo,
  table.tablytsia-shablonyv td.kolona-pravo {
    position: sticky !important;
    left: 0 !important;
    background: var(--poverkhnia) !important;
    z-index: 3 !important;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08) !important;
  }

  /* Телефон: екран «Прихід» */
  .prykhid-spysok, .prykhid-kartka {
    padding: var(--vidstup);
  }
  .prykhid-spysok-shapka {
    flex-wrap: wrap;
    gap: 10px;
  }
  .knopka-novyj-prykhid {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  .forma-prykhid-sitka {
    grid-template-columns: 1fr;
  }
  .forma-riadok-hrupa {
    grid-template-columns: 1fr;
  }
  .radio-kartky-hrupa {
    grid-template-columns: 1fr;
  }

  /* Трансформація таблиці приходів у мобільні картки */
  table.prykhid-tablytsia {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
  }
  table.prykhid-tablytsia thead {
    display: none !important;
  }
  table.prykhid-tablytsia tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  table.prykhid-tablytsia tbody tr.prykhid-riadok-spysku {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    background: var(--poverkhnia) !important;
    border: 1px solid var(--mezha) !important;
    border-radius: var(--radius) !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    box-shadow: var(--tin) !important;
  }
  table.prykhid-tablytsia tbody tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    border: none !important;
    font-size: var(--rozmir-malyj) !important;
    background: none !important;
  }
  table.prykhid-tablytsia tbody tr td:first-child {
    font-weight: 700 !important;
    font-size: var(--rozmir) !important;
    color: var(--tekst) !important;
    grid-area: auto !important;
  }

  /* Трансформація таблиці рядків накладної у мобільні картки */
  table.riadky-tablytsia {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
  }
  table.riadky-tablytsia thead {
    display: none !important;
  }
  table.riadky-tablytsia tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  table.riadky-tablytsia tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px !important;
    background: var(--poverkhnia) !important;
    border: 1px solid var(--mezha) !important;
    border-radius: var(--radius) !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    box-shadow: var(--tin) !important;
  }
  table.riadky-tablytsia tbody tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    border: none !important;
    background: none !important;
  }
  table.riadky-tablytsia tbody tr td:first-child {
    grid-area: auto !important;
  }
  table.riadky-tablytsia tbody tr td.kolona-dii {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--mezha) !important;
    width: 100% !important;
  }
  table.riadky-tablytsia tbody tr td.kolona-dii .dii-hrupa {
    display: contents !important;
  }
  table.riadky-tablytsia tbody tr td.kolona-dii .knopka {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Липкий підвал дій на телефоні */
  .prykhid-nyz {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: 0 -12px -12px;
    border-radius: 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    background: var(--poverkhnia);
  }
  .prykhid-dii {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .prykhid-dii .knopka {
    width: 100%;
    min-height: 48px;
  }
  .knopka-vydalyty-chernetku {
    margin-left: 0;
  }
  .prykhid-provedeno-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .prykhid-provedeno-banner .knopka {
    width: 100%;
    min-height: 44px;
  }

  /* Повноекранний діалог позиції та артикула на телефоні зі скролом */
  dialog#modal-riadok,
  dialog#modal-artykul {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }
  dialog#modal-riadok .modal-karta,
  dialog#modal-artykul .modal-karta {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  dialog#modal-riadok .modal-nyz,
  dialog#modal-artykul .modal-nyz {
    position: sticky;
    bottom: 0;
    background: var(--poverkhnia);
    padding: 12px 18px;
    z-index: 10;
    margin: 0 -18px -18px;
    border-top: 1px solid var(--mezha);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }

  /* Телефон: екран «Переміщення» */
  .perem-spysok, .perem-kartka {
    padding: var(--vidstup);
  }
  .perem-spysok-shapka {
    flex-wrap: wrap;
    gap: 10px;
  }
  .knopka-nove-peremishchennia {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  .perem-kudy-sitka {
    grid-template-columns: 1fr;
  }

  /* Трансформація таблиці переміщень у мобільні картки */
  table.perem-tablytsia {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
  }
  table.perem-tablytsia thead {
    display: none !important;
  }
  table.perem-tablytsia tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  table.perem-tablytsia tbody tr.perem-riadok-spysku {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    background: var(--poverkhnia) !important;
    border: 1px solid var(--mezha) !important;
    border-radius: var(--radius) !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    box-shadow: var(--tin) !important;
  }
  table.perem-tablytsia tbody tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    border: none !important;
    font-size: var(--rozmir-malyj) !important;
    background: none !important;
  }
  table.perem-tablytsia tbody tr td:first-child {
    font-weight: 700 !important;
    font-size: var(--rozmir) !important;
    color: var(--tekst) !important;
    grid-area: auto !important;
  }

  /* Трансформація таблиці рядків переміщення у мобільні картки */
  table.perem-riadky-tablytsia {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
  }
  table.perem-riadky-tablytsia thead {
    display: none !important;
  }
  table.perem-riadky-tablytsia tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  table.perem-riadky-tablytsia tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px !important;
    background: var(--poverkhnia) !important;
    border: 1px solid var(--mezha) !important;
    border-radius: var(--radius) !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    box-shadow: var(--tin) !important;
  }
  table.perem-riadky-tablytsia tbody tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    border: none !important;
    background: none !important;
  }
  table.perem-riadky-tablytsia tbody tr td:first-child {
    grid-area: auto !important;
  }
  table.perem-riadky-tablytsia tbody tr td.kolona-napriamok {
    display: none !important;
  }
  table.perem-riadky-tablytsia tbody tr td.kolona-dii {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--mezha) !important;
    width: 100% !important;
  }
  table.perem-riadky-tablytsia tbody tr td.kolona-dii .knopka {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Липкий підвал дій переміщення на телефоні */
  .perem-nyz {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: 0 -12px -12px;
    border-radius: 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    background: var(--poverkhnia);
  }
  .perem-dii {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .perem-dii .knopka {
    width: 100%;
    min-height: 48px;
  }
  #perem-knopka-vydalyty-chernetku {
    margin-left: 0;
  }
  .perem-provedeno-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .perem-provedeno-banner .knopka {
    width: 100%;
    min-height: 44px;
  }

  /* Повноекранний діалог позиції переміщення на телефоні */
  dialog#modal-perem-riadok {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }
  dialog#modal-perem-riadok .modal-karta {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  dialog#modal-perem-riadok .modal-nyz {
    position: sticky;
    bottom: 0;
    background: var(--poverkhnia);
    padding: 12px 18px;
    z-index: 10;
    margin: 0 -18px -18px;
    border-top: 1px solid var(--mezha);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }
}

/* ---------- допоміжні стилі для статичного макета (maket_prykhid.html) ---------- */
.maket-kontejner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.maket-shapka {
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--tin);
}
.maket-shapka h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--tekst);
}
.maket-shapka p {
  margin: 0;
  color: var(--tekst-2);
  font-size: var(--rozmir);
}
.maket-sektsiia {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--poverkhnia);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--tin);
}
.maket-sektsiia-zaholovok {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--poverkhnia-2);
  padding-bottom: 12px;
}
.maket-sektsiia-zaholovok h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--tekst);
}
.maket-sektsiia-opys {
  color: var(--tekst-2);
  font-size: var(--rozmir-malyj);
}
.maket-dialohy-sitka,
.maket-dialohy-spysok {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.maket-dialog,
.maket-dialoh-karta {
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  background: var(--tlo);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.maket-dialog h3,
.maket-dialoh-karta h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tekst);
}
.maket-dialog > dialog.modal,
.maket-dialoh-karta > dialog.modal {
  position: static;
  transform: none;
  margin: 0 auto 24px;
  max-height: none;
  width: 100%;
}
.maket-dialog > dialog.modal .modal-karta,
.maket-dialoh-karta > dialog.modal .modal-karta {
  max-height: none;
  animation: none;
  overflow: visible;
}
.maket-dialog > dialog.modal .modal-forma,
.maket-dialoh-karta > dialog.modal .modal-forma {
  overflow: visible;
}


/* п-9d1 (Ш-4): кнопка «← Назад» у шапці; на вузькому екрані (360 px) — лише іконка */
.knopka-nazad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 480px) {
  .knopka-nazad .knopka-nazad-tekst {
    display: none;
  }
}

/* п-9d2 (Ш-4): кнопка-крихта в рядку .shliakh — вигляд посилання, фокус видимий */
.kryhta {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--akcent);
  cursor: pointer;
  text-decoration: underline;
}
.kryhta:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}