/**
 * Sticky form table: first 3 columns (sapid, země, společnost) and first 2 header rows
 * are fixed when scrolling. Use class "sticky-form-table" on the table.
 * Optional: set --sticky-col1-width, --sticky-col2-width, --sticky-col3-width on the table.
 * Header text is always dark for readability on light background.
 */
.sticky-form-table {
  --sticky-col1-width: 120px;
  --sticky-col2-width: 80px;
  --sticky-col3-width: 200px;
  --sticky-header-bg: #f1f1f1;
  --sticky-header-color: #212832;
  --sticky-body-bg: #fff;
}

/* First header row: sticky top – always visible when scrolling table down */
.sticky-form-table thead tr:nth-child(1) {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sticky-header-bg);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
}

/* Second header row: sticky below first row (~41px) – always visible when scrolling table down */
.sticky-form-table thead tr:nth-child(2) {
  position: sticky;
  top: 41px;
  z-index: 5;
  background: var(--sticky-header-bg);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
}

/* First 3 columns in header: sticky left + background */
.sticky-form-table thead tr th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--sticky-header-bg) !important;
  width: var(--sticky-col1-width);
  min-width: var(--sticky-col1-width);
}

.sticky-form-table thead tr th:nth-child(2) {
  position: sticky;
  left: var(--sticky-col1-width);
  z-index: 6;
  background: var(--sticky-header-bg) !important;
  width: var(--sticky-col2-width);
  min-width: var(--sticky-col2-width);
}

.sticky-form-table thead tr th:nth-child(3) {
  position: sticky;
  left: calc(var(--sticky-col1-width) + var(--sticky-col2-width));
  z-index: 6;
  background: var(--sticky-header-bg) !important;
  width: var(--sticky-col3-width);
  min-width: var(--sticky-col3-width);
}

/* First 3 columns in body: sticky left + background */
.sticky-form-table tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--sticky-body-bg) !important;
  width: var(--sticky-col1-width);
  min-width: var(--sticky-col1-width);
}

.sticky-form-table tbody td:nth-child(2) {
  position: sticky;
  left: var(--sticky-col1-width);
  z-index: 2;
  background: var(--sticky-body-bg) !important;
  width: var(--sticky-col2-width);
  min-width: var(--sticky-col2-width);
}

.sticky-form-table tbody td:nth-child(3) {
  position: sticky;
  left: calc(var(--sticky-col1-width) + var(--sticky-col2-width));
  z-index: 2;
  background: var(--sticky-body-bg) !important;
  width: var(--sticky-col3-width);
  min-width: var(--sticky-col3-width);
}

/* Locked row: keep sticky cells background when row has different bg */
.sticky-form-table tbody tr.locked-row td:nth-child(1),
.sticky-form-table tbody tr.locked-row td:nth-child(2),
.sticky-form-table tbody tr.locked-row td:nth-child(3) {
  background: var(--sticky-body-bg) !important;
}

/* Narrow column headers: max ~30 chars display, ellipsis, full text in title on hover */
/* Ensure readable dark text on light header background (override modern-facelift color: white) */
.sticky-form-table thead th {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sticky-header-color) !important;
}

/* All table-bordered form tables: dark text in header for readability when background is light */
.table.table-bordered thead th {
  color: #212832 !important;
}

/**
 * Sticky table block: the block under the page title sticks when scrolling.
 * Title scrolls away; top menu does NOT stick. Use on wrapper that contains only the table (and its scroll).
 */
.sticky-table-wrapper {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

/* Single table: fixed height container, scroll only inside tbody – header never scrolls away */
.sticky-table-wrapper .table-scroll-inner {
  height: calc(80vh - 120px);
  overflow: hidden;
}

/* Table as block so thead and tbody can be laid out separately */
.sticky-table-wrapper .table-scroll-inner table.sticky-form-table {
  display: block;
  height: 100%;
}

/* Header: rendered as table, stays on top – never inside scroll */
.sticky-table-wrapper .table-scroll-inner table.sticky-form-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: #f2f2f2;
}

/* Body: only this part scrolls – header stays fixed above */
.sticky-table-wrapper .table-scroll-inner table.sticky-form-table tbody {
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  max-height: calc(80vh - 120px - 82px); /* minus header ~2 rows */
  -webkit-overflow-scrolling: touch;
}

/* Each body row as table so columns align with header */
.sticky-table-wrapper .table-scroll-inner table.sticky-form-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* ==========================================================================
   Variant 2: 4 synchronized tables – looks like ONE table (bordered grid)
   Header fixed at top, body scrolls. JS syncs horizontal scroll and row heights.
   Light header background; Safari-friendly flex/overflow for scrolling.
   ========================================================================== */
.table-split-layout {
  display: flex;
  flex-direction: column;
  height: calc(80vh - 120px);
  min-height: 200px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background: #fff;
}

/* Header: light background, never scrolls */
.table-split-header {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  border-bottom: 1px solid #dee2e6;
  background: #f0f0f0;
}

.table-split-head-left {
  width: 250px;
  min-width: 250px;
  flex-shrink: 0;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.table-split-head-left th {
  background: #f0f0f0 !important;
  color: #212832 !important;
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 8px;
  font-weight: 600;
}
.table-split-head-left thead tr:first-child th {
  border-top: none;
}
.table-split-head-left th:first-child {
  border-left: none;
}

.table-split-head-right-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid #dee2e6;
  background: #f0f0f0;
}

.table-split-head-right {
  width: 100%;
  min-width: max-content;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.table-split-head-right th {
  background: #f0f0f0 !important;
  color: #212832 !important;
  border: 1px solid #dee2e6;
  border-top: none;
  border-left: none;
  padding: 8px;
  font-weight: 600;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-split-head-right thead tr:first-child th {
  border-top: none;
}
.table-split-head-right th:last-child {
  border-right: none;
}

/* Body: scrollable – Safari needs flex: 1 1 0 + min-height: 0 so flex child can shrink and scroll */
.table-split-body-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Force scroll layer on Safari */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.table-split-body {
  display: flex;
  min-height: min-content;
}

.table-split-body-left {
  width: 250px;
  min-width: 250px;
  flex-shrink: 0;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.table-split-body-left td {
  border: 1px solid #dee2e6;
  border-left: none;
  padding: 8px;
  background: #fff;
  vertical-align: top;
}
.table-split-body-left tbody tr:first-child td {
  border-top: none;
}

.table-split-body-right-wrap {
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid #dee2e6;
  /* Safari: allow horizontal scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.table-split-body-right {
  width: 100%;
  min-width: max-content;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.table-split-body-right td {
  border: 1px solid #dee2e6;
  border-left: none;
  padding: 8px;
  vertical-align: top;
}
.table-split-body-right tbody tr:first-child td {
  border-top: none;
}
.table-split-body-right td:last-child {
  border-right: none;
}
.table-split-body-left tbody tr:last-child td,
.table-split-body-right tbody tr:last-child td {
  border-bottom: none;
}

.table-split-body-right tr.locked-row td {
  background: #d4edda;
}