/* ── Mobile layer — keep every screen on-screen on phones (loaded last) ── */
@media (max-width: 700px) {
  .content { padding: 12px 12px 32px; }
  .top { padding: 11px 14px; gap: 12px; }
  .crumb b, .top b#crumb { font-size: 16px; }

  /* Toolbars & card headers wrap instead of overflowing sideways */
  .toolbar, .card > .hd, .det-hd .row1 { flex-wrap: wrap; }
  .toolbar { gap: 8px; }
  /* flex:1 spacers would each grab a whole row when wrapping — drop them */
  .toolbar > .sp, .det-hd .row1 > .sp, .card > .hd > .sp { display: none; }

  /* Search gets its own full-width line at the bottom of the toolbar */
  .toolbar .srch { flex: 1 1 100%; min-width: 0; order: 9; }
  .fsel { flex: 1 1 auto; }

  /* Detail header: icon tile + title on line 1, action buttons wrap below */
  .det-hd { padding: 12px 14px; }
  .det-hd .row1 { row-gap: 8px; }
  .det-hd .row1 .det-head { flex: 1 1 auto; min-width: 0; }
  .det-hd h2 { font-size: 17px; }

  /* Key-facts strip: two columns on a phone */
  .kv { grid-template-columns: repeat(2, 1fr); gap: 10px 14px; padding: 12px 14px; }

  /* ── Tables → cards on phones ────────────────────────────────────────────
     Each row becomes a card; every cell shows its column header as a label
     (stamped as data-label by cardify() in app.js). Nothing is hidden. The
     PDF-preview table (.pdf) is excluded — it never gets the .cardify class. */
  table.cardify thead { display: none; }
  table.cardify, table.cardify tbody { display: block; width: 100%; }
  table.cardify tr {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: var(--sh); margin-bottom: 10px; padding: 4px 13px;
  }
  table.cardify tr.sel { border-color: var(--red); background: var(--red-t); }
  table.cardify td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--line-2); text-align: right;
  }
  /* compact density must not squash the card layout (its selector is stronger) */
  html.t-compact table.cardify td { padding: 8px 0; }
  table.cardify tr td:last-child { border-bottom: none; }
  table.cardify td::before {
    content: attr(data-label); text-align: left; flex: 0 0 auto;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-2);
  }
  /* Action-only cell (no header) → just the buttons, right-aligned */
  table.cardify td:not([data-label]) { justify-content: flex-end; }
  table.cardify td:empty { display: none; }
  /* card border replaces the row's left selection stripe */
  table.cardify tr.sel td:first-child { box-shadow: none; }
  /* A configurable-column table (colTable) is fixed-layout with clipped cells
     on desktop; as cards there are no columns to keep, so let values wrap in
     full instead of being cut off with an ellipsis. */
  table.coltbl.cardify { table-layout: auto; }
  table.coltbl.cardify td { overflow: visible; text-overflow: clip; white-space: normal; }
  /* cards flow with the page instead of a 480px sticky-scroll box */
  .tbl-scroll { max-height: none; overflow: visible; }

  /* Item composition cards: one per row */
  .icards { grid-template-columns: 1fr; padding: 10px 12px; }

  /* Segmented pill nav may scroll horizontally if it runs long */
  .seg { max-width: 100%; overflow-x: auto; }

  /* Modal uses the full width */
  .modal { width: 100%; }

  /* Ceníky/settings master-detail already collapse at 900px; keep list short */
  .lihost { max-height: 46vh; }

  /* Drag-to-reorder relies on the HTML5 drag/drop API, which touch screens
     don't support — hide the handle glyph so it doesn't look like a broken
     control. The Pořadí number (and manual edit via the ✎ form) still work. */
  #det-items .drag-handle .dh { display: none; }
  #det-items tr.drag { cursor: default; }
}