/* Small-screen overrides only. Desktop styles and saved sidebar preference stay intact. */
@media screen and (max-width: 991px) {
    .body-wrapper, .layout-main { flex-direction: column; min-width: 0; }
    .main-content, .layout-content-area { min-width: 0; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 12px !important; }
    body .sidebar-menu { display: none; }
    body.mobile-menu-open .sidebar-menu { display: block; width: 100% !important; padding: 10px !important; box-sizing: border-box; max-height: 55vh; overflow-y: auto; }
    .layout-sidebar { width: 100% !important; box-sizing: border-box; }
    .app-topbar { flex-wrap: wrap; gap: 12px; padding: 12px !important; }
    .app-brand, .app-header-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 8px; }
    .app-topbar form { max-width: 100%; }
    .app-firm-name { overflow-wrap: anywhere; }
    .main-content .card, .layout-content-area .card { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .ui-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
    .ui-toolbar .ui-toolbar-group-left, .ui-toolbar .ui-toolbar-group-right { float: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
    .ui-toolbar .ui-button { margin: 0 !important; }
    .ui-datatable { max-width: 100%; min-width: 0; }
    .ui-datatable-tablewrapper, .ui-datatable-scrollable-body, .ui-treetable-tablewrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ui-datatable:not(.ui-datatable-reflow) > .ui-datatable-tablewrapper > table { min-width: 640px; }
    .ui-paginator { white-space: normal; }
    .ui-tabs .ui-tabs-nav { display: flex; flex-wrap: wrap; }
    .ui-dialog { max-width: calc(100vw - 24px) !important; box-sizing: border-box; }
    .ui-dialog .ui-dialog-content { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow: auto; box-sizing: border-box; }
    .ui-dialog .ui-dialog-title { overflow-wrap: anywhere; }
    .ui-dialog .ui-dialog-footer { display: flex; flex-wrap: wrap; gap: 6px; }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
    .filter-item { min-width: 0; }
    .filter-item > :not(i) { min-width: 0; }
    .ui-selectonemenu-panel, .ui-autocomplete-panel { max-width: calc(100vw - 24px); }
    .ui-selectonemenu-panel .ui-selectonemenu-item { white-space: normal; overflow-wrap: anywhere; }
    .fc .fc-toolbar { flex-wrap: wrap; gap: 8px; }
    .fc .fc-toolbar-title { font-size: 1.2rem; }
    .registration-shell { width: auto !important; max-width: 550px; margin: 20px 12px !important; }
    .main-content img { max-width: 100%; object-fit: contain; }
    .responsive-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media screen and (max-width: 640px) {
    .main-content, .layout-content-area { padding: 8px !important; }
    .main-content .card, .layout-content-area .card { padding: 12px; }
    .app-brand { flex-wrap: nowrap; width: 100%; }
    .app-firm-name { font-size: 17px !important; margin: 0 !important; }
    .app-topbar .header-logo, .app-topbar .header-logo-icon { flex-shrink: 0; margin: 0; }
    .app-topbar .toggle-btn { margin: 0; }
    .app-header-actions { gap: 8px; }
    .app-header-actions > * { margin: 0 !important; }
    .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .responsive-detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .responsive-detail-grid > * { min-width: 0; }
    .responsive-detail-grid .ui-inputfield, .responsive-detail-grid .ui-selectonemenu { max-width: 100%; box-sizing: border-box; }
    .filter-item { flex-wrap: wrap; }
    .filter-item label { flex-basis: 100%; }
    .filter-item .ui-datepicker, .filter-item .ui-calendar, .filter-item .ui-inputnumber { width: 100%; }
    /* Only explicitly marked form grids stack; report/data table markup stays tabular. */
    table.responsive-form-grid, table.responsive-form-grid > tbody, table.responsive-form-grid > tbody > tr,
    table.responsive-form-grid > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
    table.responsive-form-grid > tbody > tr > td { padding: 6px 0 !important; }
    .responsive-form-grid .ui-panelgrid-content { display: block; }
    .responsive-form-grid .ui-panelgrid-cell { width: 100% !important; float: none; box-sizing: border-box; }
    .responsive-form-grid input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
    .responsive-form-grid textarea, .responsive-form-grid .ui-selectonemenu,
    .responsive-form-grid .ui-autocomplete, .responsive-form-grid .ui-calendar,
    .responsive-form-grid .ui-datepicker, .responsive-form-grid .ui-inputnumber { max-width: 100%; width: 100% !important; box-sizing: border-box; }
    .ui-dialog { width: calc(100vw - 24px) !important; left: 12px !important; }
    .ui-dialog .ui-dialog-content { padding: 12px !important; }
    .ui-dialog input.ui-inputfield, .ui-dialog textarea.ui-inputfield,
    .filter-grid input.ui-inputfield, .login-form input { font-size: 16px; }
    .ui-growl { width: calc(100vw - 24px) !important; left: 12px !important; right: auto !important; }
    .ui-fileupload-buttonbar { display: flex; flex-wrap: wrap; gap: 6px; }
    .ui-fileupload-content { overflow-x: auto; }
    .main-content .ui-card, .main-content .ui-panel { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
    .report-page .ui-card, .dashboard-card-row > div { flex-basis: 100% !important; }
    .pdf-preview-content { height: 70vh; height: 70dvh; }
    .login-shell { padding: 12px !important; box-sizing: border-box; }
    .login-card { width: 100%; max-width: 100%; box-sizing: border-box; padding: 24px 16px !important; }
}