.documents-page .docs-navigation { display: none; }
.documents-page .mod-overview-documents { height: auto; min-height: 124px; flex-shrink: 0; }
.documents-page .doc-file-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.documents-page .doc-file-preview { margin-top: 12px; padding: 12px 0; border-block: 1px solid var(--border); }
.documents-page .doc-file-preview img { display: block; max-width: 100%; width: auto; max-height: 240px; object-fit: contain; margin-bottom: 10px; }
.documents-page .doc-file-preview p { margin: 0 0 4px; overflow-wrap: anywhere; color: var(--text); }
.documents-page .doc-file-preview span { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: 10px; }
.documents-page #docSavedFileOpen { margin-top: 10px; }
.documents-page .doc-form-grid > *, .documents-page .thirds > * { min-width: 0; }
.documents-page .modal input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.documents-page .modal input::-webkit-inner-spin-button,
.documents-page .modal input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.documents-page .modal button:disabled { cursor: wait; opacity: .6; }
.documents-page #documentModal .modal { display: flex; flex-direction: column; width: min(700px, 100%); max-height: calc(100dvh - 32px); }
.documents-page #documentModal .modal-body { min-height: 0; overscroll-behavior: contain; }
.documents-page #documentModal .modal-header,
.documents-page #documentModal .modal-footer { flex-shrink: 0; }
.documents-page #documentModal .modal-footer { flex-wrap: wrap; background: #fff; }

@media (max-width: 1000px) {
  .documents-page .sidebar { display: none; }
  .documents-page .main { min-width: 0; overflow-y: auto !important; }
  .documents-page .docs-navigation { display: block; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .documents-page .docs-navigation summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  .documents-page .docs-navigation nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .documents-page .docs-navigation a, .documents-page .docs-navigation button { min-height: 44px; padding: 10px; display: inline-flex; align-items: center; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
  .documents-page .topbar { height: auto; min-height: 64px; flex-shrink: 0; padding: 12px; gap: 10px; flex-wrap: wrap; }
  .documents-page .topbar-actions { flex-wrap: wrap; }
  .documents-page .btn, .documents-page .focus-tab,
  .documents-page .focus-select, .documents-page .doc-open-link { min-height: 44px; }
  .documents-page .mod-overview-documents { flex-direction: column; align-items: stretch; margin: 12px; padding: 16px; }
  .documents-page .mod-overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; width: 100%; }
  .documents-page .mod-overview-metric { min-width: 0; width: auto; }
  .documents-page .table-panel { flex: none; overflow: visible; margin: 0 12px 12px; }
  .documents-page .client-filter-bar { flex-wrap: wrap; gap: 10px; padding: 10px; }
  .documents-page .focus-tabs { width: 100%; overflow-x: auto; }
  .documents-page .focus-search-box { flex-basis: 100%; min-width: 0; }
  .documents-page .focus-search-box input { min-height: 44px; }
  .documents-page .focus-dropdowns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .documents-page .focus-select { min-width: 0; width: 100%; max-width: none; }
  .documents-page .content-area, .documents-page .table-wrapper { overflow: visible; }
  .documents-page .docs-table { min-width: 0; display: block; width: 100%; }
  .documents-page .docs-table thead { display: none; }
  .documents-page .docs-table tbody { display: block; }
  .documents-page .docs-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); padding: 8px; gap: 6px 12px; }
  .documents-page .docs-table td { display: block; border: 0; min-width: 0; padding: 4px; text-align: left; overflow-wrap: anywhere; }
  .documents-page .docs-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 10px; }
  .documents-page .docs-table td:nth-child(3), .documents-page .docs-table td:last-child { grid-column: 1 / -1; }
  .documents-page .docs-table td[colspan]::before { content: none; }
  .documents-page .doc-open-link { min-width: 44px; }
  .documents-page .action-col { white-space: normal; display: flex !important; flex-wrap: wrap; gap: 8px; }
  .documents-page .action-col::before { width: 100%; }
  .documents-page .action-col button { min-height: 44px; min-width: 44px; }
  .documents-page #documentModal { padding: 8px; }
  .documents-page #documentModal .modal { max-height: calc(100dvh - 16px); }
  .documents-page #documentModal .modal-header, .documents-page #documentModal .modal-body,
  .documents-page #documentModal .modal-footer { padding: 12px; }
  .documents-page #documentModal .modal-close { width: 44px; height: 44px; }
  .documents-page #documentModal input:not([type=file]), .documents-page #documentModal select { min-height: 44px; }
  .documents-page #documentModal .quick-vat-buttons { flex-wrap: wrap; gap: 6px; }
  .documents-page #documentModal .quick-vat-buttons button { min-height: 44px; min-width: 44px; }
  .documents-page #supplierSuggestBanner { flex-wrap: wrap; }
  .documents-page #supplierSuggestBanner button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 600px) {
  .documents-page .mod-overview-metrics, .documents-page .focus-dropdowns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .documents-page .doc-form-grid, .documents-page .doc-form-grid .thirds { grid-template-columns: minmax(0, 1fr); }
  .documents-page #documentModal input, .documents-page #documentModal select, .documents-page #documentModal textarea,
  .documents-page .focus-select, .documents-page #searchInput { font-size: 16px; }
  .documents-page #documentModal .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .documents-page #documentModal .modal-footer-left { grid-column: 1 / -1; margin: 0; }
  .documents-page #documentModal .modal-footer-left:not(:has(> button:not(.hidden))) { display: none; }
  .documents-page #documentModal .modal-footer .btn { white-space: normal; padding: 8px; }
}