/* Tablet presentation only. Keep business handlers, data loading, permissions,
   print documents and the existing sidebar toggle unchanged. */
@media screen and (min-width: 700px) {
    /* An implicit grid track can grow to the API table's min-content width.
       Bound the track so tabs overflow inside their own scroller, not behind
       the workspace's clipped right edge. */
    body.portal-workspace.portal-tablet-mode .security-center-wrap {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    body.portal-workspace.portal-tablet-mode .security-center-wrap > * {
        min-width: 0;
        max-width: 100%;
    }

    body.portal-workspace.portal-tablet-mode .security-center-tabs {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    body.portal-workspace.portal-tablet-mode #dashboard-view,
    body.portal-workspace.portal-tablet-mode #dashboard-view > aside,
    body.portal-workspace.portal-tablet-mode #dashboard-view > main {
        height: calc(100vh - 16px) !important;
        height: calc(100dvh - 16px) !important;
    }

    body.portal-workspace.portal-tablet-mode #dashboard-view > main > .q-card {
        padding: 14px !important;
        min-width: 0;
        scrollbar-gutter: stable;
    }

    body.portal-workspace.portal-tablet-mode .portal-current-page-title h2 {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 26px;
        line-height: 1.3;
    }

    body.portal-workspace.portal-tablet-mode .portal-toolbar-controls,
    body.portal-workspace.portal-tablet-mode .portal-sync-state-group,
    body.portal-workspace.portal-tablet-mode .portal-toolbar-actions {
        gap: 7px;
        max-width: 100%;
    }

    body.portal-workspace.portal-tablet-mode .portal-toolbar-account {
        max-width: 100%;
        flex-wrap: wrap;
        white-space: normal;
        padding: 6px 10px;
    }

    body.portal-workspace.portal-tablet-mode .portal-toolbar-account #user-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body.portal-tablet-mode :where(input, select, textarea, button, .nav-item) {
        touch-action: manipulation;
    }

    body.portal-workspace.portal-tablet-mode .portal-sync-toolbar button,
    body.portal-workspace.portal-tablet-mode .nav-item,
    body.portal-workspace.portal-tablet-mode .content-section button {
        min-height: 42px;
    }

    body.portal-workspace.portal-tablet-mode .content-section > .flex:not(.overflow-x-auto) {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Scroll wide records inside their own container, never the entire page. */
    body.portal-workspace.portal-tablet-mode .overflow-x-auto {
        min-width: 0;
        max-width: 100%;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.portal-workspace.portal-tablet-mode .custom-table :where(th, td) {
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Scope to existing form panels; leave fullscreen meeting/video, document
       previews and custom attachment viewers in their existing layouts. */
    body.portal-tablet-mode :is(#add-hr-modal, #add-finance-modal, #add-doc-modal,
        #meeting-modal, #incident-modal, #gift-modal, #gift-plan-modal,
        #gift-plan-dispatch-modal, #add-ppe-modal, #outreach-modal,
        #payslip-publish-modal, #performance-bonus-publish-modal) {
        padding: 12px;
    }

    body.portal-tablet-mode :is(#add-hr-modal-box, #add-finance-modal-box,
        #add-doc-modal-box, #meeting-modal-box, #incident-modal-box,
        #gift-modal-box, #gift-plan-modal-box, #gift-plan-dispatch-modal-box,
        #add-ppe-modal-box, #outreach-modal-box, #payslip-publish-modal-box,
        #performance-bonus-publish-modal-box) {
        /* Keep each dialog's smaller existing max-width, rather than enlarging
           confirmation / gift dialogs to the largest editor width. */
        width: min(100%, 1100px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        min-width: 0;
        padding: 20px !important;
        border-radius: 20px !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.portal-tablet-mode :is(#hr-add-form, #finance-add-form,
        #meeting-form, #doc-add-form, #incident-form) :where(input, select, textarea) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    body.portal-tablet-mode :is(#hr-add-form, #finance-add-form,
        #meeting-form, #doc-add-form, #incident-form) :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select) {
        min-height: 44px;
    }

    body.portal-tablet-mode :is(#add-hr-modal-box, #add-finance-modal-box,
        #add-doc-modal-box, #meeting-modal-box, #incident-modal-box) button {
        min-height: 42px;
    }

    body.portal-tablet-mode :is(#add-hr-modal-box, #add-finance-modal-box,
        #add-doc-modal-box, #meeting-modal-box, #incident-modal-box) :where(label, h3) {
        overflow-wrap: anywhere;
    }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
    body.portal-workspace.portal-tablet-mode #dashboard-view > aside {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
    body.portal-workspace.portal-tablet-mode #dashboard-view > aside > .q-card {
        padding: 12px !important;
    }
    body.portal-workspace.portal-tablet-mode .nav-item {
        padding: 10px;
        font-size: 13px;
    }
}

@media screen and (min-width: 700px) and (max-width: 1180px) {
    body.portal-tablet-mode #finance-add-form .finance-income-amounts-grid,
    body.portal-tablet-mode #finance-add-form .finance-expense-payment-grid,
    body.portal-tablet-mode #hr-add-form .md\:grid-cols-3,
    body.portal-tablet-mode #hr-add-form .md\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.portal-tablet-mode #finance-add-form .finance-income-amounts-grid > div {
        grid-column: auto;
    }
}