body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f6f8;
}

.header {
  background: #111827;
  color: #fff;
  padding: 16px;
}

.content {
  padding: 20px;
}
/* Deal status badges */
.deal-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.deal-lead {
  background: #e5e7eb;
  color: #374151;
}

.deal-in-progress {
  background: #dbeafe;
  color: #1d4ed8;
}

.deal-invoice-sent {
  background: #ffedd5;
  color: #9a3412;
}

.deal-paid {
  background: #dcfce7;
  color: #166534;
}

.deal-lost {
  background: #fee2e2;
  color: #991b1b;
}
/* ===== WebZip Chat: Super Admin (SA) mobile cards ===== */

.sa-cards {
  margin-top: 12px;
}

.sa-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.sa-card__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.sa-card__title {
  font-weight: 800;
  font-size: 14px;
  color: #111;
  line-height: 1.2;
  word-break: break-word;
}

.sa-card__subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #555;
  word-break: break-word;
}

.sa-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sa-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #eee;
  color: #111;
}

.sa-chip--active {
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 700;
}

.sa-chip--overdue {
  background: #fdecea;
  color: #b00020;
  font-weight: 700;
}

.sa-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

.sa-box__title {
  font-size: 12px;
  color: #111;
  font-weight: 700;
  margin-bottom: 6px;
}

.sa-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #333;
}

.sa-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #555;
}

.sa-grid2 {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sa-btnlink {
  padding: 8px 10px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
}

.sa-btnlink--admin { background: #1976d2; }
.sa-btnlink--audit { background: #374151; }
.sa-btnlink--last  { background: #6a1b9a; }

.sa-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sa-btn {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}

.sa-btn--block   { background: #b00020; }
.sa-btn--archive { background: #374151; }
.sa-btn--restore { background: #2e7d32; }

.sa-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.sa-form-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sa-input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.sa-remind-last {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.9;
}

.sa-remind-err {
  margin-top: 4px;
  color: #b00020;
  word-break: break-word;
}
/* ===== WebZip Chat: Admin UI/UX (mobile-first helpers) ===== */

:root{
  /* Контраст для плохих мониторов */
  --wz-bg: #dfe6ef;              /* фон заметно темнее */
  --wz-card: #ffffff;            /* карточки белые */
  --wz-border: #9aa9bf;          /* границы темнее, читаются */
  --wz-divider: #c4cfde;

  --wz-text: #0b1220;
  --wz-muted: #334155;

  /* Акцент */
  --wz-primary: #1d4ed8;
  --wz-ring: 0 0 0 4px rgba(29,78,216,0.25);

  /* Тень усиленная, чтобы блоки не сливались */
  --wz-shadow: 0 2px 6px rgba(2,6,23,0.12), 0 10px 24px rgba(2,6,23,0.10);
}

/* Фон страницы + базовый текст */
body{
  background: var(--wz-bg);
  color: var(--wz-text);
}

/* Контентный контейнер */
.content{
  max-width: 1100px;
  margin: 0 auto;
}

/* Карточки/секции — сильнее отделяем от фона */
.card{
  background: var(--wz-card);
  border: 2px solid var(--wz-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
  box-shadow: var(--wz-shadow);
}

/* Заголовок секции как “шапка”, чтобы блоки различались */
.card h2{
  margin: -14px -16px 12px -16px;
  padding: 12px 16px;
  background: #eef2f7;
  border-bottom: 2px solid var(--wz-divider);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--wz-text);
}

.card h3{
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--wz-text);
}

.card p{
  margin: 6px 0;
  font-size: 13px;
  color: #0f172a;
}

a{
  color: var(--wz-primary);
}

/* Базовая типографика форм */
button, input, select, textarea{
  font: inherit;
}

/* Кнопка по умолчанию = контрастная secondary */
button{
  border: 2px solid #64748b;
  background: #e2e8f0;
  color: #0b1220;
  border-radius: 12px;
  cursor: pointer;
  padding: 9px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 1px 0 rgba(2,6,23,0.10);
  transition: background .12s ease, border-color .12s ease, transform .02s ease, box-shadow .12s ease;
}

button:hover{
  background: #cbd5e1;
  border-color: #475569;
}

button:active{
  transform: translateY(1px);
}

button:focus{
  outline: none;
  box-shadow: var(--wz-ring);
}


input, select, textarea{
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #111;
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,0.35);
}

table{
  width: 100%;
}

/* Alerts (safe defaults if templates use them) */
.alert{
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0 14px 0;
  font-size: 13px;
  border: 1px solid var(--wz-border);
  background: #fff;
}
.alert-error{
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

/* ===== Mobile ===== */
@media (max-width: 768px){
  .header{
    padding: 12px;
  }

  .header h1{
    font-size: 16px;
    line-height: 1.2;
  }

  .content{
    padding: 12px;
  }

  /* Make header layout stack (template uses inline flex; we override safely) */
  header.header{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  header.header > div{
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Tap targets */
  button, input, select, textarea{
    min-height: 44px;
    font-size: 14px;
  }

  /* Forms: one column */
  form[method]{
    width: 100%;
  }

  /* Most admin inputs in templates are inline-styled; force full width on mobile */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  textarea{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tables: keep readable with horizontal scroll */
  table{
    font-size: 12px;
  }

  /* Any wrapper with overflow-x:auto already exists in templates; reinforce */
  div[style*="overflow-x:auto"]{
    -webkit-overflow-scrolling: touch;
  }
  /* Admin: forms grid (contacts) -> 1 column on mobile */
  .adm-grid-2{
    grid-template-columns: 1fr !important;
  }

}
/* ===== Admin: desktop table / mobile cards switch ===== */

/* default: desktop */
.only-desktop { display: block; }
.only-mobile  { display: none; }

/* mobile cards (history payments) */
.adm-cards{
  margin-top: 10px;
}

.adm-card{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  margin: 10px 0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.adm-card__header{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.adm-card__title{
  font-weight: 700;
  font-size: 13px;
  color: #111;
  line-height: 1.2;
}

.adm-chips{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.adm-chip{
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #111;
  white-space: nowrap;
}

.adm-card__row{
  margin-top: 8px;
  font-size: 13px;
  color: #333;
  word-break: break-word;
}

/* mobile switch */
@media (max-width: 768px){
  .only-desktop { display: none; }
  .only-mobile  { display: block; }
}
/* ===== Admin: Pay request form (Продлить / оплатить) ===== */

.adm-label{
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.adm-help{
  font-size: 12px;
  color: #666;
}

.adm-btn-primary{
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  border-radius: 10px;
}

.adm-btn-primary:hover{
  background: #0b1220;
}

/* Mobile layout */
@media (max-width: 768px){
  .adm-payform{
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .adm-payform__field{
    width: 100%;
  }

  .adm-payform .adm-select{
    width: 100% !important;
    min-width: 0 !important;
  }

  .adm-payform .adm-btn-primary{
    width: 100%;
  }

  .adm-help{
    line-height: 1.35;
  }
}
/* ===== Admin: "Текущий тенант" box ===== */

.adm-tenantbox{
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  border-radius: 14px !important;
}

.adm-tenantbox a{
  text-decoration: none;
}

.adm-tenantbox a:hover{
  text-decoration: underline;
}

/* make the "Public ID" not break layout */
.adm-tenantbox span[style*="monospace"]{
  word-break: break-all;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .adm-tenantbox{
    margin: 10px 0 12px 0 !important;
    padding: 12px !important;
  }

  .adm-tenantbox div[style*="font-size:16px"]{
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .adm-tenantbox div[style*="margin-top:8px"]{
    margin-top: 10px !important;
  }
}
/* ===== Admin: Telegram bind block ===== */

#tg_bind_status{
  font-size: 12px;
  color: #6b7280;
  word-break: break-word;
}

#tg_bind_link_wrap{
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fafafa;
}

#tg_bind_link{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#tg_bind_link:focus{
  outline: none;
}

/* Mobile: make the button and help text stack nicely */
@media (max-width: 768px){
  /* the button inside the tg-bind flex row */
  #tg_bind_status{
    display: inline-block;
    margin-left: 6px;
  }

  #tg_bind_link_wrap{
    padding: 10px;
  }

  /* Make the bind button wide (only inside the tg-bind row) */
  button[onclick*="adminGenTgBindLink"]{
    width: 100%;
  }

  /* Help text under button becomes full width */
  button[onclick*="adminGenTgBindLink"] + span{
    display: block;
    width: 100%;
    line-height: 1.35;
  }
}
/* ===== Admin: status bar (paid_until / days_left / overdue) ===== */

.adm-statusbar{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px 12px;
  background: #ffffff;
  margin-top: 10px;
}

.adm-statusbar > div{
  line-height: 1.35;
}

/* Make "ПРОСРОЧЕНО" look like a badge */
.adm-statusbar span[style*="#b00020"]{
  display: inline-block;
  margin-left: 8px !important;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b !important;
  font-weight: 700 !important;
}

/* Mobile: tighter spacing */
@media (max-width: 768px){
  .adm-statusbar{
    padding: 10px;
  }
}
/* ===== Admin: stats (Domains / Staff) ===== */

.adm-stats{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.adm-stats > div{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  color: #111;
  white-space: nowrap;
}

/* Mobile: stack chips nicely */
@media (max-width: 768px){
  .adm-stats{
    gap: 6px;
  }
}
/* ===== Admin cards: neutral actions buttons (do not affect /sa) ===== */

.adm-card .sa-actions{
  gap: 8px;
}

.adm-card .sa-actions button{
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.adm-card .sa-actions button:hover{
  background: #f9fafb;
}

@media (max-width: 768px){
  .adm-card .sa-actions{
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .adm-card .sa-actions button{
    width: 100%;
  }
}
/* ===== WebZip Chat: Admin UI helpers (buttons / actions) ===== */

.adm-actions,
.adm-card__actions,
.adm-payform,
.sa-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Make “Action” buttons consistent across admin templates */
button,
.adm-btn,
.adm-btn-primary,
.sa-btn {
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #fff;
  color: #111827;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

button:hover,
.adm-btn:hover,
.adm-btn-primary:hover,
.sa-btn:hover {
  filter: brightness(0.98);
}

button[disabled],
.adm-btn[disabled],
.adm-btn-primary[disabled],
.sa-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary action */
.adm-btn-primary {
  background: #111827;
  color: #fff;
  border-color: rgba(17, 24, 39, 0.35);
}

/* Small helper text block */
.adm-help {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.25;
}

/* Mobile: tap targets + full width where needed */
@media (max-width: 768px) {
  .adm-actions > button,
  .adm-card__actions > button,
  .sa-actions > button,
  #btnCreateInvite,
  #btnCopyInvite,
  #btnCopyEmbed,
  #btnAddDomain,
  #btnCopyClientTelegramLink {
    min-height: 44px;
    width: 100%;
  }

  /* Inputs next to buttons should also stretch */
  #inviteLink,
  #newDomain,
  #clientTelegramLink,
  #embedCode {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* =========================
   FINAL POLISH (Admin UI)
   Добавлять в КОНЕЦ файла
   ========================= */
:root{
  /* HIGH CONTRAST THEME (финальный, чтобы не сливалось на плохих мониторах) */
  --adm-bg: #dfe6ef;              /* фон страницы заметно темнее белого */
  --adm-surface: #ffffff;         /* поверхности/карточки белые */
  --adm-border: #94a3b8;          /* границы темнее и читаемые */
  --adm-divider: #c4cfde;

  --adm-text: #0b1220;            /* почти чёрный */
  --adm-muted: #334155;

  --adm-primary: #1d4ed8;
  --adm-primary-hover: #153fbf;

  --adm-danger: #b91c1c;
  --adm-danger-hover: #991b1b;

  --adm-success: #047857;
  --adm-success-hover: #036a4d;

  --adm-shadow: 0 2px 6px rgba(2,6,23,0.12), 0 10px 24px rgba(2,6,23,0.10);
  --adm-radius: 14px;

  --adm-ring: 0 0 0 4px rgba(29,78,216,0.25);
}

/* Общая типографика/фон */
html, body{
  color: var(--adm-text);
  background: var(--adm-bg);
}

/* Карточки — контрастно отделены от фона */
.card{
  background: var(--adm-surface);
  border: 2px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
}

/* Заголовок секции как “шапка”, чтобы блоки не сливались в полотно */
.card h2{
  margin: -14px -16px 12px -16px;
  padding: 12px 16px;
  background: #eef2f7;
  border-bottom: 2px solid var(--adm-divider);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
}

.card h3{
  margin: 12px 0 8px 0;
  font-size: 14px;
  font-weight: 700;
}

.card hr{
  border: none !important;
  border-top: 2px solid var(--adm-divider) !important;
}

/* Мягкая “шапка тенанта” — но с контрастом */
.adm-tenantbox{
  border: 2px solid var(--adm-border) !important;
  border-radius: var(--adm-radius) !important;
  background: #f8fafc !important;
}

/* Статы/статус — читаемо */
.adm-stats,
.adm-statusbar{
  color: #1f2937 !important;
}
.adm-stats{
  padding-top: 6px;
}
.adm-statusbar{
  padding: 10px 12px;
  border: 2px solid var(--adm-divider);
  border-radius: 12px;
  background: #f1f5f9;
}

/* БАЗОВАЯ кнопка — контрастная secondary (НЕ белая) */
button,
input[type="button"],
input[type="submit"]{
  border: 2px solid #64748b;
  background: #e2e8f0;
  color: #0b1220;
  border-radius: 12px;
  padding: 9px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 1px 0 rgba(2,6,23,0.10);
  transition: transform .02s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
  background: #cbd5e1;
  border-color: #475569;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active{
  transform: translateY(1px);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Фокус для клавиатуры */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: var(--adm-ring);
  border-color: rgba(29,78,216,.65);
}

/* Primary-кнопка (в HTML ставили adm-btn-primary) */
.adm-btn-primary{
  background: var(--adm-primary) !important;
  border-color: #0b3aa8 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(29,78,216,.20);
}
.adm-btn-primary:hover{
  background: var(--adm-primary-hover) !important;
  border-color: var(--adm-primary-hover) !important;
}

/* SA-кнопки (опасные/архив/восстановить) — должны отличаться по смыслу */
.sa-btn{
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.14);
}
.sa-btn--block{
  background: var(--adm-danger) !important;
}
.sa-btn--block:hover{
  background: var(--adm-danger-hover) !important;
}
.sa-btn--archive{
  background: #334155 !important;
}
.sa-btn--archive:hover{
  background: #0f172a !important;
}
.sa-btn--restore{
  background: var(--adm-success) !important;
}
.sa-btn--restore:hover{
  background: var(--adm-success-hover) !important;
}

/* Чипсы — контрастнее */
.adm-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.adm-chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 2px solid var(--adm-divider);
  background: #f1f5f9;
  color: #1f2937;
}

/* Карточки (mobile lists) */
.adm-cards{ display:flex; flex-direction:column; gap:10px; }
.adm-card{
  border: 2px solid var(--adm-border);
  border-radius: var(--adm-radius);
  background: #fff;
  box-shadow: var(--adm-shadow);
  padding: 10px 12px;
}
.adm-card__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom: 8px;
}
.adm-card__title{
  font-weight: 800;
  color: #0b1220;
}
.adm-card__row{
  padding: 6px 0;
  border-top: 2px dashed var(--adm-divider);
}
.adm-card__row:first-of-type{
  border-top: none;
}

/* Экшены в карточках */
.adm-card__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.adm-card__actions button{
  flex: 1 1 auto;
  min-width: 120px;
}

/* Платёжная форма */
.adm-payform{
  gap: 12px !important;
}
.adm-payform__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.adm-label{
  font-size: 12px;
  color: var(--adm-muted);
  font-weight: 700;
}
.adm-select{
  min-height: 40px;
}

/* Грид 2 колонки */
.adm-grid-2{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* Мобайл — коллапс, отступы, кнопки */
@media (max-width: 768px){
  .card{ padding: 12px; }
  .adm-grid-2{ grid-template-columns: 1fr !important; }
  .adm-payform{ flex-direction: column !important; align-items: stretch !important; }
  .adm-payform__field select{ width: 100% !important; }
  .adm-payform .adm-btn-primary{ width: 100%; }
}

/* =========================
   SA desktop: wide tenants table (top+bottom horizontal scroll)
   ========================= */

.sa-table-wrap{
  width: 100%;
  max-width: 100%;
  border: 2px solid var(--adm-divider);
  border-radius: var(--adm-radius);
  background: #fff;
  padding: 10px;
}

.sa-xscroll{
  overflow-y: hidden;
}
/* Важно: inner должен расширяться по ширине контента (таблицы),
   иначе у #saXBottom может не возникнуть scrollWidth и ползунок не появится */
.sa-xscroll__inner{
  display: inline-block;
  min-width: 100%;
}
.sa-xscroll--bottom .sa-xscroll__inner{
  width: max-content;
}

/* TOP scrollbar: видимый “желобок” сверху */
.sa-xscroll--top{
  height: 18px;
  margin: 0 0 10px 0;
  overflow-x: scroll;              /* важно: scroll, не auto */
  scrollbar-gutter: stable both-edges;

  background: #f8fafc;
  border: 1px solid var(--adm-divider);
  border-radius: 10px;
}

/* “пустышка” для ширины верхнего скролла */
.sa-xscroll--top .sa-xscroll__inner{
  height: 1px;
}

/* Bottom: основной горизонтальный скролл таблицы */
.sa-xscroll--bottom{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 4px;
}

/* Высота полосы в Chrome */
.sa-xscroll--top::-webkit-scrollbar,
.sa-xscroll--bottom::-webkit-scrollbar{
  height: 12px;
}
/* Сделать скроллбары реально заметными (Chrome/Edge/Safari) */
.sa-xscroll--top::-webkit-scrollbar-thumb,
.sa-xscroll--bottom::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.35);
  border-radius: 999px;
  border: 3px solid rgba(248, 250, 252, 1);
}

.sa-xscroll--top::-webkit-scrollbar-track,
.sa-xscroll--bottom::-webkit-scrollbar-track{
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
}

/* Firefox */
.sa-xscroll--top,
.sa-xscroll--bottom{
  scrollbar-width: auto;
  scrollbar-color: rgba(15, 23, 42, 0.35) rgba(15, 23, 42, 0.08);
}

/* Таблица должна быть широкой, чтобы был горизонтальный overflow */
#saTenantsTable{
  width: max-content !important;
  min-width: 1600px !important;
  border-collapse: collapse;
}

/* Ячейки */
.sa-table-wrap th,
.sa-table-wrap td{
  border: 1px solid var(--adm-divider) !important;
  padding: 10px 10px !important;
  vertical-align: top;
  background: #fff;
}

/* Липкий заголовок */
.sa-table-wrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  font-weight: 800;
}

/* Зебра + hover */
.sa-table-wrap tbody tr:nth-child(even) td{
  background: #fbfdff;
}
.sa-table-wrap tbody tr:hover td{
  background: #f1f5f9;
}

/* ===== Admin: nice tables (dialogs) ===== */
.adm-table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.adm-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.adm-table th,
.adm-table td{
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  font-size: 13px;
}

.adm-table thead th{
  background: #f8fafc;
  text-align: left;
  font-weight: 700;
  color: #111827;
}

.adm-table tbody tr:hover{
  background: #f9fafb;
}

.adm-table tbody tr:last-child td{
  border-bottom: none;
}