/* Responsive + touch layer for a Tabler 1.x / Bootstrap 5 admin (RTL-safe).
   Paste into the shell's global <style>, after the Tabler stylesheet.
   Pair it with: <aside class="navbar navbar-vertical navbar-expand-xl ...">
   and <ul class="navbar-nav pt-xl-3"> so the sidebar folds below 1200px. */

/* ── Tablet (768-1199px): the opened hamburger menu in three columns, so a
   long nav fits a landscape screen without scrolling. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar-vertical .navbar-collapse .navbar-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Column priority ─────────────────────────────────────────────────────
   .nowrap-lg     nowrap only where there is room; below 992px the cell may
                  break (a date and its time onto two lines).
   .col-lg-only   secondary columns a portrait tablet has no room for. They
                  return from 992px up (a tablet turned to landscape).
   .col-not-phone columns hidden under 576px only.
   Both go on the th AND every td, and both are "screen" only, so print keeps
   every column (Bootstrap's d-none d-*-table-cell follows the paper width). */
@media (min-width: 992px) { .nowrap-lg { white-space: nowrap; } }
@media screen and (max-width: 991.98px) { .col-lg-only { display: none !important; } }
@media screen and (max-width: 575.98px) { .col-not-phone { display: none !important; } }

/* ── Compact tables up to 1200px (phones and both tablet orientations). */
@media (max-width: 1199.98px) {
  .table { font-size: 12.5px; }
  .table thead th { font-size: 11.5px; }
  .table td, .table th { padding: 6px 8px; }
}

/* ── Touch devices: Tabler's small controls are 18-24px high. On a coarse
   pointer every control gets a finger-sized hit area; mouse layouts keep the
   compact sizes because nothing here applies to them. */
@media (pointer: coarse) {
  .btn, .form-control, .form-select { min-height: 40px; }
  .btn-sm, .btn-group-sm > .btn, .form-control-sm, .form-select-sm { min-height: 36px; }
  .btn-sm, .btn-icon { min-width: 36px; }
  label.form-check { padding-block: 7px; margin-bottom: 0; }
  input[type=checkbox]:not(.form-check-input), input[type=radio]:not(.form-check-input) { width: 20px; height: 20px; }
  /* a row-selection checkbox has no label to enlarge its hit area */
  .form-check-input:not(.form-check .form-check-input) { width: 24px; height: 24px; }
  details > summary:not(.btn) { padding-block: 10px; }
  .dropdown-item { padding-block: 10px; }
  .page-link { min-width: 36px; min-height: 36px; }
}
/* iPhone Safari zooms the page when a focused field has text under 16px. */
@media (pointer: coarse) and (max-width: 767.98px) {
  .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; }
}

/* ── Row editor (inside a table cell, or in its own full-width row): fields
   that reflow instead of fixed widths. One short fixed field (an amount), the
   rest flexible with a basis; whatever does not fit wraps to the next line
   and fills it. */
.led-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.led-fixed { flex: 0 0 96px; width: 96px; }
.led-flex { flex: 1 1 120px; min-width: 0; }
.led-flex-wide { flex: 2 1 150px; min-width: 0; }

/* ── One line per part (split amounts, line items): label cell + aligned
   amount column. Two columns only; a third 1fr column collapses to zero
   inside a narrow table cell and prints its text one letter per line. */
.split-lines { display: grid; grid-template-columns: minmax(0, max-content) max-content; justify-content: start; gap: 4px 12px; align-items: center; }
.split-line { display: contents; }
.split-line .badge { white-space: normal; text-align: start; margin: 0; }
.split-line .split-amount { font-weight: 600; font-variant-numeric: tabular-nums; justify-self: start; }

/* ── A visually hidden honeypot field. width needs !important: a generic
   input[type=text]{width:100%} rule is more specific than .hp and makes the
   field viewport-wide, which scrolls an RTL page sideways. */
.hp { position: absolute; width: 1px !important; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; opacity: 0; }