/* Widok ekranowy: pełna treść mieści się w szerokości okna, bez przewijania tabel w bok. */
@media screen {
  html, body { width: 100%; min-width: 0; }
  .workspace, .content, .card, .heading, .topbar, .section-head,
  .grid-form, .grid-form > *, .order-line, .order-line > *,
  .filter-form, .filter-form > *, .form-actions, .inline, .user,
  .stats, .stat, .totals, .totals > *, form, fieldset, label { min-width: 0; }
  .workspace, .content, .card, .table-wrap, form { max-width: 100%; }
  h1, h2, h3, p, a, label, small, strong, .badge, .alert, .topbar,
  .stat, .totals, .pagination { overflow-wrap: anywhere; }
  button, .secondary { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
  input, select, textarea { min-width: 0; max-width: 100%; }
  select { text-overflow: ellipsis; }
  .selected-option-text { display: block; margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  .selected-option-text[hidden], .responsive-table [hidden] { display: none !important; }
  .table-wrap { width: 100%; min-width: 0; overflow: visible; }
  table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; white-space: normal; }
  th, td { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  th { padding: 12px 10px; }
  td { padding: 14px 10px; }
  td a, td strong, td small { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .note { min-width: 0; max-width: 100%; white-space: pre-wrap; }
  .void-form { min-width: 0; width: 100%; max-width: 100%; }
  .count-input { min-width: 0; width: 100%; }
  .filter-form, .inline, .topbar, .user { flex-wrap: wrap; }
  .filter-form label { flex: 1 1 220px; min-width: 0; max-width: 100%; }
  .section-head > * { min-width: 0; max-width: 100%; }
  .section-head .inline { flex: 1 1 260px; }
  .section-head .inline select { flex: 1 1 180px; min-width: 0; }
  .topbar > span { flex: 1 1 220px; }
  .user { justify-content: flex-end; }
  .user > span { min-width: 0; max-width: 100%; }
  .stat strong { font-size: clamp(20px, 2.1vw, 26px); }
  .order-line-expanded { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  #stock-table th:first-child { width: 35%; }
  #customer-table th:first-child { width: 28%; }
  #customer-table th:nth-child(3) { width: 25%; }
  #order-details-table th:first-child { width: 28%; }
  #history-table th:nth-child(2) { width: 18%; }
  #history-table th:nth-child(7) { width: 17%; }
  #history-table th:last-child { width: 17%; }
}
@media screen and (max-width: 1100px) {
  /* Węższe tabele zamieniają każdy rekord w kartę z podpisanymi polami. */
  .responsive-table { display: block; border-collapse: separate; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .responsive-table thead th { padding: 0; border: 0; }
  .responsive-table tbody { display: grid; width: 100%; gap: 14px; }
  .responsive-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; }
  .responsive-table tbody td { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; max-width: 100%; padding: 11px 13px; border: 0; }
  .responsive-table tbody td:first-child { grid-column: 1 / -1; background: #f8faf8; border-radius: 8px 8px 0 0; }
  .responsive-table tbody td[colspan] { grid-column: 1 / -1; }
  .responsive-table tbody td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; }
  .responsive-table td small { margin-top: 0; }
  .order-line-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 1000px) {
  .sidebar { position: static; width: 100%; padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { margin-bottom: 15px; }
  .side-label, .side-bottom { display: none; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 5px; }
  .sidebar nav a { flex: 1 1 125px; min-width: 0; white-space: normal; text-align: center; padding: 9px 10px; font-size: 12px; }
  .workspace { margin-left: 0; }
  .content { padding: 24px 20px; }
  .topbar { padding: 15px 20px; }
}
@media screen and (max-width: 620px) {
  .sidebar { padding: 16px; }
  .sidebar nav a { flex-basis: 100px; }
  .content { padding: 20px 12px; }
  .card { padding: 16px; }
  .topbar { padding: 13px 16px; }
  .topbar > span { flex-basis: 100%; }
  .user { flex: 1 1 100%; justify-content: space-between; }
  .grid-form, .order-line, .order-line-expanded { grid-template-columns: minmax(0, 1fr); }
  .grid-form .full, .grid-form .form-actions { grid-column: auto; }
  .responsive-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  .section-head, .filter-form { align-items: stretch; }
  .section-head input[type=search] { max-width: 100%; }
  .filter-form label { flex-basis: 100%; width: 100%; }
  .filter-form .check { width: 100%; flex-basis: 100%; }
  .form-actions > button, .form-actions > .secondary { flex: 1 1 180px; }
  .totals { gap: 12px; padding: 14px; }
  .totals > span { flex: 1 1 100%; }
  .stat { padding: 15px; }
  .stat strong { font-size: 21px; }
  .auth { padding: 0 12px; }
}
@media print {
  .selected-option-text { display: none !important; }
}