/* ==========================================================================
   PRISM Responsive — global layer (admin · superadmin · user · auth pages)
   Load last via partials/superadmin_modern.php or auth page <head>.
   ========================================================================== */

/* --- Prevent horizontal page jitter --- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sa-modern,
body.admin-modern,
body.user-modern {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* --- App shell --- */
@media (max-width: 991.98px) {
    body.sa-modern .main-content,
    body.admin-modern .main-content,
    body.user-modern .main-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: 1.25rem;
    }

    body.sa-modern .nxl-header .nxl-head-link span.d-none.d-md-inline,
    body.admin-modern .nxl-header .nxl-head-link span.d-none.d-md-inline,
    body.user-modern .nxl-header .nxl-head-link span.d-none.d-md-inline {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block !important;
        vertical-align: bottom;
    }
}

@media (max-width: 575.98px) {
    body.sa-modern .main-content,
    body.admin-modern .main-content,
    body.user-modern .main-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* --- Panel headers & toolbars --- */
@media (max-width: 767.98px) {
    .sa-panel-head {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .sa-panel-head > .d-flex,
    .sa-panel-head .sa-panel-head__actions,
    .sa-panel-head .d-flex.flex-wrap.gap-2 {
        width: 100%;
        justify-content: flex-start !important;
    }

    .sa-panel-head .sa-btn,
    .sa-panel-head .btn {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }

    .sa-hero {
        padding: 1.1rem 1rem !important;
    }

    .sa-hero__title {
        font-size: 1.35rem !important;
        line-height: 1.25;
    }

    .sb-quick-actions,
    .sb-quick-actions.sa-animate {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .sb-quick-actions .sb-quick-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.78rem;
        padding: 0.65rem 0.5rem;
    }
}

@media (max-width: 400px) {
    .sb-quick-actions {
        grid-template-columns: 1fr !important;
    }
}

/* --- Action button groups in tables --- */
@media (max-width: 991.98px) {
    .sa-table td.text-end .d-inline-flex,
    .sa-table td.text-end .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
        max-width: 220px;
        margin-left: auto;
    }

    .sa-table td.text-end .sa-btn,
    .sa-table td.text-end .btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Tables: horizontal scroll (wide) --- */
.sa-table-wrap.sa-table-wrap--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.sa-table-wrap.sa-table-wrap--scroll .sa-table,
.sa-table-wrap.sa-table-wrap--scroll table {
    min-width: 720px;
}

/* --- Tables: stacked cards (mobile) --- */
@media (max-width: 991.98px) {
    .sa-table-wrap.sa-table-wrap--stacked {
        overflow-x: visible;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .sa-table-wrap.sa-table-wrap--stacked .table-responsive {
        overflow: visible;
    }

    body.sa-modern .sa-table-wrap.sa-table-wrap--stacked .sa-table,
    body.admin-modern .sa-table-wrap.sa-table-wrap--stacked .sa-table,
    body.user-modern .sa-table-wrap.sa-table-wrap--stacked .sa-table,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table {
        min-width: 0;
        border-spacing: 0 12px;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table thead,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table thead {
        display: none;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody tr,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody tr {
        display: block;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
        margin-bottom: 0.35rem;
        overflow: hidden;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0.65rem 1rem !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        box-shadow: none !important;
        text-align: right !important;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td:last-child,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody td:last-child {
        border-bottom: none !important;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td::before,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #64748b;
        padding-top: 0.15rem;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td.text-end,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody td.text-end {
        flex-wrap: wrap;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td.text-end::before,
    .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody td.text-end::before {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.35rem;
    }

    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td.text-end .d-inline-flex,
    .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody td.text-end .d-flex {
        max-width: 100%;
        margin-left: 0;
    }
}

html.app-skin-dark .sa-table-wrap.sa-table-wrap--stacked .sa-table tbody tr,
html.app-skin-dark .sa-table-wrap.sa-table-wrap--stacked table.sa-table tbody tr {
    background: #1e293b;
}

/* --- Modals --- */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.65rem;
        max-width: calc(100% - 1.3rem);
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 1.3rem);
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer .btn,
    .modal-footer .sa-btn {
        flex: 1 1 100%;
    }
}

/* --- Forms & filters --- */
@media (max-width: 767.98px) {
    .sa-req-filter-form .row > [class*="col-"],
    .rpt-filter-bar .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row.g-3 > [class*="col-md-"],
    .row.g-4 > [class*="col-md-"] {
        margin-bottom: 0.15rem;
    }
}

/* --- Requisition / wide form sections --- */
@media (max-width: 991.98px) {
    .prism-req-form-shell,
    .req-form-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --- Auth: login & register (.landing) --- */
body.prism-auth-page {
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

body.prism-auth-page .landing {
    min-height: 100dvh;
    height: auto;
    width: 100%;
    max-width: 100vw;
}

body.prism-auth-page .landing-content {
    position: relative;
    inset: auto;
    min-height: calc(100dvh - 120px);
    padding: 5.5rem 1rem 2rem;
    overflow-y: visible;
}

/* Login (two-column card): keep centered overlay like login.php inline styles */
body.prism-auth-page .landing-content:has(.landing-card-grid) {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
}

/* Narrow card only for single-column auth (index/register). Login uses .landing-card-grid — keep page CSS width. */
body.prism-auth-page .landing-card:not(:has(.landing-card-grid)) {
    width: min(450px, 100%);
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    body.prism-auth-page .landing-card:has(.landing-card-grid) {
        width: min(980px, 95vw);
        margin: 0 auto;
    }

    body.prism-auth-page .landing-card-grid {
        grid-template-columns: 1fr !important;
    }

    body.prism-auth-page .auth-pane-right {
        display: none !important;
    }

    body.prism-auth-page .auth-pane {
        padding: 18px 16px;
    }
}

@media (max-width: 575.98px) {
    body.prism-auth-page .landing-topbar {
        padding: 12px 14px;
        flex-wrap: wrap;
    }

    body.prism-auth-page .landing-card:not(:has(.landing-card-grid)) {
        padding: 18px 16px;
    }

    body.prism-auth-page .landing-card:has(.landing-card-grid) {
        padding: 16px 12px;
    }
}

/* --- Data retention stat grid (already uses bootstrap cols) --- */
@media (max-width: 575.98px) {
    .retention-hold-cell {
        min-width: 0;
    }
}

/* --- index.html landing --- */
@media (max-width: 640px) {
    .landing-page .landing-content {
        padding: 4.5rem 1rem 5rem;
        align-items: flex-start;
    }

    .landing-page .landing-card {
        width: min(450px, 100%);
    }

    .landing-legal-layout {
        grid-template-columns: 1fr !important;
    }

    .landing-footer__center {
        flex-wrap: wrap;
        white-space: normal;
        justify-content: center;
        text-align: center;
    }
}