/* =========================
   Base / Reset
========================= */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

:root{
  --bg: #f5f7fb;
  --text: #1f2328;
  --muted: #6b7280;
  --border: #e6e9ef;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(24,39,75,.04), 0 2px 4px rgba(24,39,75,.08);
  --tap: 44px;

  /* header */
  --header-h: 76px;
}

body{
  font: 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
  padding-top: var(--header-h); /* компенсація fixed-хедера */
}

/* =========================
   Header (fixed, centered)
========================= */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid #e3e7ee;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  z-index: 100;
  display: flex; align-items: center;
}

.logo-row.centered{
  display: flex; align-items: center; gap: 12px;
  width: max-content; margin: 0 auto; padding: 0 16px;
}
.logo{ height: 60px; width: auto; display: block; }
.title{
  margin: 0; line-height: 1.1; font-weight: 700;
  font-size: 24px; color: var(--text);
  display: flex; align-items: center;
}

/* =========================
   Layout / Cards / Typography
========================= */
.container{ max-width: 1000px; margin: 24px auto; padding: 0 16px; }
.center-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }

.card{
  background:#fff; border:1px solid var(--border);
  border-radius: var(--radius); padding:20px; box-shadow: var(--shadow);
}
.card + .card{ margin-top:16px; }

h1,h2,h3{ margin:0 0 10px; line-height:1.2; }
h1{ font-size:28px; } h2{ font-size:22px; } h3{ font-size:18px; }
.muted{ color:#6b7280; }

.md-title{ font-size:1.75rem; font-weight:800; margin:0 0 .4rem; color:#111; }
.md-desc{ margin:0 0 .75rem; color:#333; line-height:1.6; white-space:pre-wrap; }
.md-sep{ margin:.75rem 0; border:0; border-top:1px solid #e5e7eb; }
.md-meta{ margin:.25rem 0; color:#374151; font-size:.98rem; }

/* =========================
   Forms
========================= */
.form{ display:grid; gap:12px; }
.form-row{ display:grid; gap:8px; }
label{ font-weight:600; color:#374151; }
input,textarea,select{
  width:100%; padding:10px 12px; border:1px solid #d1d5db;
  border-radius:10px; background:#fff;
}
textarea{ resize:vertical; min-height:100px; }

/* =========================
   Buttons (single source of truth)
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 16px; min-height: var(--tap);
  font-weight:600; font-size:15px; border-radius:10px;
  border:1px solid #d4d7dd; background:#f8fafc; color:#1f2328;
  text-decoration:none; cursor:pointer; transition:background .2s, box-shadow .2s;
}
.btn:hover{ background:#e9edf2; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.btn:active{ background:#e2e8f0; }
a.btn, a.btn:visited{ color:inherit; text-decoration:none; }

.btn-primary{ background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-green  { background:#16a34a; color:#fff; border-color:#16a34a; }
.btn-red    { background:#dc2626; color:#fff; border-color:#dc2626; }
.btn-amber  { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.btn-light  { background:#f8fafc; border-color:#d4d7dd; color:#1f2328; }

.btn.btn-danger{
  background:#ef4444; border-color:#ef4444; color:#fff;
}
.btn.btn-danger:hover{ background:#dc2626; }
.btn.btn-danger:active{ background:#b91c1c; }
a.btn.btn-danger, a.btn.btn-danger:visited{ color:#fff; }

/* “чип-кнопка” для сіреньких внутрішніх дій (на cards) */
.btn-chip{ background:#eef2f7; border-color:#e3e7ee; color:#1f2328; }

/* позиціювання кнопки-навігації */
.back-wrap{ text-align:center; margin:24px 0 40px; }
.logout-wrap{ text-align:right; margin-top:16px; }

.btn-block{ width:100%; }

/* =========================
   Tables
========================= */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid #e5e7eb; text-align:left; }
.table thead th{ background:#f3f4f6; font-weight:700; }
.table tr:hover td{ background:#fafafa; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
.table-wrap table{ min-width:600px; }

/* =========================
   Chips / Small UI
========================= */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; }
.badge.gray { background:#eef2f7; color:#334155; }
.badge.green{ background:#dcfce7; color:#166534; }
.badge.red  { background:#fee2e2; color:#991b1b; }

/* =========================
   Utilities
========================= */
.stack{ display:grid; gap:12px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; }
.space-between{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hidden{ display:none !important; }
.center{ text-align:center; }
.timer{ font-size:40px; font-weight:800; letter-spacing:.5px; }

/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .container{ padding:0 12px; }
}
@media (max-width: 720px){
  h1{ font-size:1.4rem; }
  h2{ font-size:1.2rem; }
  .card{ padding:14px; }
  .row{ gap:6px; }
  .badge{ font-size:.85rem; }
  /* коли кілька кнопок поруч — дозволяємо перенос */
  .row .btn, .row button, .row a.btn{ flex:1 1 100%; }
  .logo{ height:54px; }
  :root{ --header-h: 72px; }
}
@media (max-width: 480px){
  .space-between{ flex-direction:column; align-items:flex-start; }
  .vote-actions .btn{ width:100%; }
  table{ font-size:.95rem; }
  thead th, tbody td{ padding:8px; }
}

/* компактна версія кнопки */
.btn-sm{
  padding: 8px 12px;
  font-size: 14px;
  min-height: 36px;      /* менше за --tap, бо це не основна дія */
  border-radius: 8px;
}

/* рядок виходу праворуч */
.logout-row{
  display: flex;
  justify-content: flex-end;   /* вправо */
  margin-top: 16px;
}

/* на мобільному — на всю ширину і по центру */
@media (max-width: 480px){
  .logout-row{ justify-content: center; }
  .logout-row .btn{ width: 100%; max-width: 220px; }
}

/* ---- SPEAKER BANNER: центрована картка ---- */
.speaker-banner{
  max-width: 1000px;              /* така ж ширина як .container */
  margin: 12px auto 16px;         /* по центру, відступи зверху/знизу */
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(24,39,75,.04), 0 2px 4px rgba(24,39,75,.08);
  display: flex; align-items: center; gap: 16px;
}
.speaker-banner .photo{
  width: 96px; height: 96px; border-radius: 12px;
  object-fit: cover; background:#eef2f7;
}
.speaker-banner .name{ font-size: 20px; font-weight: 800; color:#166534; }
.speaker-banner .pos{ color:#6b7280; margin-top:4px; }
.speaker-banner .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px; background:#f3f4f6; color:#374151;
  font-weight:600;
}
/* прихований стан, якщо режим неактивний */
.speaker-banner.hidden{ display:none; }

@media (max-width: 720px){
  .speaker-banner{ margin: 8px 12px 14px; max-width: calc(100% - 24px); }
  .speaker-banner .photo{ width: 72px; height: 72px; }
  .speaker-banner .name{ font-size: 18px; }
}

/* ---- Кнопка виходу справа внизу адмінки ---- */
.logout-row{
  display:flex; justify-content:flex-end;
  margin: 20px 0 56px;            /* “повітря” від низу */
}
.btn-sm{ padding: 10px 14px; font-size: 14px; border-radius: 10px; }

/* акуратний hover без спалахів для кольорових кнопок */
.btn-primary:hover{ background:#1d4ed8; box-shadow:none; }
.btn-danger:hover { background:#dc2626; box-shadow:none; }
.btn-amber:hover  { background:#d97706; box-shadow:none; }
.btn-green:hover  { background:#15803d; box-shadow:none; }

/* Посилання-кнопки з кольоровим фоном — завжди білий текст */
a.btn-primary, a.btn-primary:visited,
a.btn-danger,  a.btn-danger:visited,
a.btn-amber,   a.btn-amber:visited,
a.btn-green,   a.btn-green:visited,
a.btn-red,     a.btn-red:visited,
a.btn-ok,      a.btn-ok:visited {
  color:#fff !important;
  text-decoration:none;
}

/* Якщо хочеш темний колір лише для звичайних посилань, а не кнопок: */
a:not(.btn) { color:#1f2328; }

/* =========================
   МОБІЛЬНІ ПРАВКИ (≤ 768px)
   ========================= */
@media (max-width: 768px){
  /* Базові відступи/шрифти */
  .container{ padding: 0 12px; }
  .card{ padding: 12px; border-radius: 12px; }
  h1{ font-size: 1.6rem; }
  h2{ font-size: 1.25rem; }
  .row{ gap: 6px; }

  /* Шапка: логотип і заголовок, щоб не “зʼїдало” місце */
  .site-header .logo{ width: 44px; height: 44px; }
  .site-header .title{ font-size: 1.1rem; line-height: 1.2; }

  /* Кнопки: великі tappable-зони, але компактніші по висоті */
  .btn{ padding: 12px 14px; font-size: 1rem; border-radius: 10px; }
  .btn.btn-sm{ padding: 9px 12px; font-size: .95rem; }

  /* Бейджі/таймери — компактніше, рівні цифри на Android */
  .badge{ padding: 6px 10px; font-size: .95rem; }
  .badge, .timer, #adminVoteTimer{
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
  }

  /* Форми/селекти — на всю ширину, без перепливів тексту */
  select, input[type="text"], input[type="date"], textarea{
    font-size: 16px;             /* щоб Safari/Chrome не зумив */
    padding: 10px 12px;
  }

  /* СЕКЦІЇ інфо/резалт/вот — трішки щільніші */
  .motion-card h3,
  .results-card h3{ font-size: 1.15rem; }
  .motion-card .desc,
  .results-card .desc{ font-size: .98rem; }

  /* Кнопки дій у списках — по 1 в ряд або 2 в ряд (де є .actions) */
  .actions{ gap: 8px; }
  .actions .btn{ flex: 1 1 100%; }           /* за замовчуванням одна в ряд */
  .actions .btn:nth-child(1),
  .actions .btn:nth-child(2){ flex: 1 1 calc(50% - 4px); } /* перші дві — по 2 в ряд */
  .actions .btn:last-child{ flex-basis: 100%; }            /* “Зупинити” нижче окремо */

  /* Таблички, щоб нічого не лізло за межі екрана */
  .table-wrap{ border-radius: 10px; }
  table{ table-layout: auto; font-size: .97rem; }
  th, td{ padding: 10px; }
  td, th{ word-break: break-word; overflow-wrap: anywhere; }

  /* Блок доповідача — акуратніший */
  #sp-preview{ padding: 12px; }
  #sp-prev-photo{ width: 72px; height: 72px; border-radius: 10px; }
  #sp-prev-name{ font-size: 1.05rem; }
  #sp-prev-left{ font-size: 1rem; }

  /* Картки “Питання на сьогодні” — ущільнюємо внутрішні елементи */
  .day-controls{ gap: 8px; }
  .day-controls .btn,
  .day-controls .badge{ height: auto; }

  /* Великі кнопки голосування — повна ширина, рівні відступи */
  .vote-actions .btn{ width: 100%; margin: 8px 0; }

  /* Аккордеони (регламент/положення) — трохи щільніше */
  details > summary{ padding: 12px 14px; font-size: 1rem; }
  details .card{ margin-top: 10px; }
}

/* Дуже вузькі екрани (≤ 360px): ще трішки компактності */
@media (max-width: 360px){
  h1{ font-size: 1.45rem; }
  h2{ font-size: 1.15rem; }
  .btn{ padding: 10px 12px; }
  .badge{ padding: 5px 8px; }
}

/* ===== Mobile polish ===== */

/* планшети і нижче */
@media (max-width: 768px){
  .container{ padding: 0 12px; }
  h2{ font-size: 1.15rem; }
  .row{ gap: 6px; }
  .btn{ padding: 10px 12px; font-size: .95rem; }
  
  /* більше повітря селектам */
  select{ font-size: 16px; } /* щоб не було авто-зуму на iOS/Android */

  /* таблиці — менше жорсткості */
  #tbl-motions, #membersTable, #tbl-codes{ table-layout: auto; }
  /* дозволяємо перенос тексту всюди */
  table td, table th{
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* колонки дата/статус більше не фіксуємо по центру */
  #tbl-motions td:nth-child(3), #tbl-motions th:nth-child(3),
  #tbl-motions td:nth-child(4), #tbl-motions th:nth-child(4){
    text-align: left;
  }

  /* блок з діями стає колонкою на всю ширину */
  .actions{
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .actions .btn{ flex: 1 1 auto; width: 100%; }

  /* у списку кодів кнопка "Видалити" не прилипає — теж на всю ширину */
  #tbl-codes td:last-child .btn{ width: 100%; }

  /* в «Кодах входу» робимо шапку трохи компактнішою */
  #codesCaption{ font-size: .95rem; }
}

/* вузькі телефони */
@media (max-width: 480px){
  /* прибираємо фіксовані ширини колонок таблиці питань */
  #tbl-motions colgroup{ display: none; }

  /* трохи менші кнопки-теги (дата/бейджі) */
  .badge{ padding: 4px 8px; font-size: .9rem; }

  /* великі кнопки — повна ширина */
  .btn{ width: 100%; }

  /* поля вводу компактніше */
  input, select, textarea{ padding: 10px; }

  /* логотип/заголовок не розтягують хедер */
  .logo-row{ gap: 8px; }
  .logo{ width: 36px; height: 36px; }
}

/* дрібні утиліти щоб текст не «тріснув» на емейлах/ПІБ */
#membersTable td:nth-child(2),
#tbl-codes td:nth-child(3){
  word-break: break-all;    /* емейли можна ламати де завгодно */
}

/* ===== Mobile fixes (≤ 480px) ===== */
@media (max-width: 480px){
  /* Трохи щільніший інтерфейс */
  .container{padding:0 12px}
  table{font-size:15px}
  thead th, tbody td{padding:8px}

  /* Кнопки в таблиці дій: по одній у рядок */
  .actions{
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
    justify-items:stretch;
  }
  .actions .btn{
    width:100%;
    min-width:0;
    white-space:nowrap;       /* не ламай слова на кожну літеру */
    padding:12px 14px;
  }

  /* Таблиця "Поточні питання": не фіксувати ширини колонок на мобільному */
  #tbl-motions{table-layout:auto}
  #tbl-motions col{width:auto !important}

  /* Переноси для довгих рядків (імена, email тощо) */
  td, th{
    word-break:break-word;    /* дозволяє переносити довгі слова */
    overflow-wrap:anywhere;
  }
  /* Дати/коди нехай лишаються в одному рядку */
  time, code{white-space:nowrap}

  /* Таблиця членів та коди входу — оптимізуємо перенос email */
  #membersTable td:nth-child(2),
  #tbl-codes   td:nth-child(3){
    word-break:break-all;     /* email може рватись після будь-якого символу */
  }

  /* Верхній ряд керування кодами — кнопки не тиснутись */
  .card .row{gap:10px}
  #btn-refresh-codes,
  #btn-clear-codes,
  #btn-delete-used,
  #btn-delete-all,
  #sendCodesBtn{flex:1 1 160px}
}

/* Дрібні покращення для всіх розмірів */
.actions .btn{white-space:nowrap}      /* щоб ґаджети не ламали слово вертикально */
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

/* === MOBILE PATCH (став у кінець файлу) === */

/* 1) Список питань: прибираємо фіксовані ширини колонок на мобільних */
@media (max-width: 768px){
  #tbl-motions{ table-layout: auto; }
  #tbl-motions col{ width: auto !important; }  /* перекриває колишні 34%/22%/… */
  /* дата/статус не по центру, щоб було більше місця */
  #tbl-motions td:nth-child(3), #tbl-motions th:nth-child(3),
  #tbl-motions td:nth-child(4), #tbl-motions th:nth-child(4){ text-align: left; }
  /* дата не рветься */
  #tbl-motions time{ white-space: nowrap; }
}

/* 2) Кнопки дій у таблицях — завжди стовпчиком на телефонах */
@media (max-width: 640px){
  .actions{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
  }
  .actions .btn{
    width: 100%;
    white-space: nowrap;        /* не ламати слово "Результати" по літерах */
    overflow-wrap: normal;
    word-break: normal;
    min-width: 0;
  }
}

/* 3) Забороняємо “кроїти” текст у кнопках, навіть якщо в таблицях дозволено перенос */
.actions .btn{ white-space: nowrap; overflow-wrap: normal; word-break: normal; }

/* 4) Таблиці — переносимо довгі рядки, але не в клітинці з діями */
table td, table th{ word-break: break-word; overflow-wrap: anywhere; }
td.actions *{ word-break: normal; overflow-wrap: normal; }

/* 5) У списку членів та кодів робимо email переносним, щоб не тягнув таблицю */
@media (max-width: 768px){
  #membersTable td:nth-child(2),
  #tbl-codes    td:nth-child(3){ word-break: break-all; }
}

/* 6) Якщо залишилось це правило — ВИЛУЧИ його або обмеж нижче,
   бо воно робить перші дві кнопки занадто вузькими: 
   .actions .btn:nth-child(1),
   .actions .btn:nth-child(2){ flex: 1 1 calc(50% - 4px); }
   Краще так: */
@media (min-width: 641px) and (max-width: 768px){
  .actions .btn:nth-child(1),
  .actions .btn:nth-child(2){ flex: 1 1 calc(50% - 4px); }
  .actions .btn:last-child{ flex-basis: 100%; }
}

/* === FIX: кнопки в таблицях не рвемо по літерах === */
table td .btn,
table th .btn,
.actions .btn,
#tbl-codes td:last-child .btn {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* на телефонах: блок дій у рядку «Поточні питання» = стовпчик */
@media (max-width: 768px){
  #tbl-motions td.actions{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #tbl-motions td.actions .btn{
    width: 100%;
    min-width: 0;
  }
}

/* прибираємо жорсткі ширини колонок у «Поточних питаннях» на мобілках */
@media (max-width: 768px){
  #tbl-motions{ table-layout:auto; }
  #tbl-motions col{ width:auto !important; }
  #tbl-motions td:nth-child(3),
  #tbl-motions th:nth-child(3),
  #tbl-motions td:nth-child(4),
  #tbl-motions th:nth-child(4){ text-align:left; }
  #tbl-motions time{ white-space:nowrap; }
}

/* у таблицях дозволяємо перенос ТЕКСТУ, але не кнопок */
table td, table th { word-break: break-word; overflow-wrap: anywhere; }
td.actions *       { word-break: normal; overflow-wrap: normal; }
#tbl-codes td:last-child * { word-break: normal; overflow-wrap: normal; }

/* на дуже вузьких екранах даємо кнопкам мінімальну ширину,
   щоб “Результати” не злипалось */
@media (max-width: 420px){
  table td .btn{ min-width: 140px; }
}

/* === КОДИ ВХОДУ: не ламати текст, робити горизонтальний скрол === */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

#tbl-codes{
  table-layout:auto;          /* нехай колонки самі беруть ширину */
  min-width: 820px;           /* робимо ширше за екран — тоді з’явиться скрол */
}

#tbl-codes th,
#tbl-codes td{
  white-space: nowrap !important;   /* не переносити */
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: middle;
}

/* ім’я учасника можна переносити (довгі ПІБ не розтягують таблицю) */
#tbl-codes td:nth-child(2){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* стовпчик з кнопкою — компактний, але без розривів тексту */
#tbl-codes td:last-child,
#tbl-codes td:last-child .btn{
  white-space: nowrap !important;
}

/* загальні мобільні правила для таблиць НЕ застосовувати до #tbl-codes */
@media (max-width: 768px){
  #tbl-codes th, #tbl-codes td{
    font-size: 15px;
    padding: 10px;
  }
}

/* =========================
   АДМІН-ТАБЛИЦІ: ГОРИЗОНТАЛЬНИЙ СКРОЛ + АКУРАТНІ ПЕРЕНОСИ
   ========================= */

/* контейнер уже є у верстці; гарантуємо скрол */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 1) КОДИ ВХОДУ --- */
#tbl-codes{
  table-layout: auto;
  min-width: 820px;                 /* ширше за мобільний екран => скрол */
}
#tbl-codes th, #tbl-codes td{
  white-space: nowrap !important;   /* не ламати рядки */
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: middle;
}
/* ПІБ можна переносити */
#tbl-codes td:nth-child(2){         
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* Кнопка в дії — не ламати */
#tbl-codes td:last-child .btn{
  white-space: nowrap !important;
}

/* --- 2) ПОТОЧНІ ПИТАННЯ --- */
#tbl-motions{
  table-layout: auto;
  min-width: 940px;                 /* є колонка з діями — дайте більше місця */
}
#tbl-motions th, #tbl-motions td{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Назва та Автор можуть переноситися */
#tbl-motions td:nth-child(1),
#tbl-motions td:nth-child(2){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* Дата/Статус/Дії — в один рядок */
#tbl-motions td:nth-child(3),
#tbl-motions td:nth-child(4),
#tbl-motions td:nth-child(5){
  white-space: nowrap !important;
}
/* Кнопки дій — в ряд, без переломів */
#tbl-motions .actions{
  display: flex;
  flex-wrap: nowrap !important;     /* переїдає мобільне правило з колонкою */
  gap: 8px;
  justify-content: flex-end;
}
#tbl-motions .actions .btn{
  flex: 0 0 auto;
  white-space: nowrap !important;
  min-width: 120px;                 /* щоб текст не стискався по літерах */
}

/* --- 3) ЧЛЕНИ РАДИ --- */
#membersTable{
  table-layout: auto;
  min-width: 780px;
}
#membersTable th, #membersTable td{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: middle;
}
/* Ім’я та Посада можна переносити */
#membersTable td:nth-child(1),
#membersTable td:nth-child(4){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* Email / № пропуску / Дія — без переносу */
#membersTable td:nth-child(2),
#membersTable td:nth-child(3),
#membersTable td:last-child{
  white-space: nowrap !important;
}
#membersTable td:last-child .btn{
  white-space: nowrap !important;
}

/* Легкий піджім на мобільних: трохи менші паддінги, але БЕЗ переносу */
@media (max-width: 768px){
  #tbl-codes th, #tbl-codes td,
  #tbl-motions th, #tbl-motions td,
  #membersTable th, #membersTable td{
    padding: 10px;
    font-size: 15px;
  }
}