/* Shared by every authenticated portal. Keep the drawer query in mobile.js identical. */
:root { --erp-viewport-height: 100vh; }
@supports (height: 100dvh) {
    :root { --erp-viewport-height: 100dvh; }
}
body, .wrapper, .content-wrapper { min-height: var(--erp-viewport-height); }
/* Standalone login/registration: auto margins center only when there is spare height. */
body.auth-page {
    min-height: var(--erp-viewport-height);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: calc(1rem + env(safe-area-inset-top, 0px))
             calc(1rem + env(safe-area-inset-right, 0px))
             calc(1rem + env(safe-area-inset-bottom, 0px))
             calc(1rem + env(safe-area-inset-left, 0px));
}
.auth-page > .login-card, .auth-page > .register-card, .auth-page > .card-custom {
    flex-shrink: 0;
    min-width: 0;
    margin-top: auto;
    margin-bottom: auto;
    overflow-wrap: anywhere;
}
.auth-page > footer {
    position: static !important;
    z-index: auto !important;
    flex-shrink: 0;
    width: 100%;
    margin-top: 1rem;
    overflow-wrap: anywhere;
}
.content-wrapper, .main-content, .card, .card-body, .card-header { min-width: 0; }
.sidebar {
    height: var(--erp-viewport-height);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sidebar > .nav, .sidebar-brand { flex-shrink: 0; }
.sidebar .sidebar-footer { position: static !important; margin-top: auto; flex-shrink: 0; }

@media (max-width: 768px), (max-width: 1024px) and (pointer: coarse) {
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .auth-page .login-card .card-body, .auth-page .register-card .card-body,
    .auth-page .card-custom .card-body { padding: 1.25rem; }
    .auth-page > .login-card:not(.card) { padding: 1.25rem; }
    .sidebar {
        left: 0 !important;
        width: min(280px, calc(100vw - 44px)) !important;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s;
        z-index: 1040 !important;
        padding-left: env(safe-area-inset-left, 0px);
    }
    .sidebar.mobile-open { transform: translateX(0); visibility: visible; }
    .sidebar.mobile-open .nav-link span,
    .sidebar.mobile-open .nav-section,
    .sidebar.mobile-open .sidebar-brand span,
    .sidebar.mobile-open .parent-link strong,
    .sidebar.mobile-open .parent-link small { display: inline !important; }
    .sidebar.mobile-open .nav-section-btn { display: flex !important; }
    .sidebar.mobile-open .parent-link br { display: initial !important; }
    .sidebar-backdrop { z-index: 1030; }
    .content-wrapper, .content-wrapper-collapsed { margin-left: 0 !important; width: 100%; }
    .mobile-menu-btn { display: inline-block; }
    .topbar {
        padding: calc(.5rem + env(safe-area-inset-top, 0px))
                 calc(.75rem + env(safe-area-inset-right, 0px)) .5rem
                 calc(.75rem + env(safe-area-inset-left, 0px));
        flex-wrap: wrap;
        gap: .5rem;
    }
    .topbar > * { min-width: 0; max-width: 100%; }
    .topbar h5 { font-size: 1rem; overflow-wrap: anywhere; }
    .topbar .badge { white-space: normal; overflow-wrap: anywhere; }
    .main-content {
        padding: .75rem calc(.75rem + env(safe-area-inset-right, 0px))
                 .75rem calc(.75rem + env(safe-area-inset-left, 0px));
    }
    .card-body, .card-header { overflow-wrap: anywhere; }
    .card .badge { white-space: normal; overflow-wrap: anywhere; }
    .card-header { flex-wrap: wrap; gap: .5rem; }
    .card-body { padding: .75rem; }
    .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mobile-cards td { min-width: 0; overflow-wrap: anywhere; }
    .mobile-cards td > * { min-width: 0; max-width: 100%; }
    .form-control, .form-select, textarea, select, input,
    .input-group-sm > .form-control, .input-group-sm > .form-select {
        font-size: 16px !important;
    }
    .form-control:not(textarea), .form-select { min-height: 44px; }
    .btn, .btn-sm, .nav-link, .nav-section-btn, .page-link,
    .mobile-menu-btn, .toggle-sidebar-btn { min-height: 44px; }
    .btn, .page-link { min-width: 44px; }
    .btn-sm { min-height: 44px !important; }
    .mobile-menu-btn, .toggle-sidebar-btn, .btn-close { min-width: 44px; min-height: 44px; }
    .sticky-submit-bar { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
    .sticky-submit-bar .btn { min-height: 48px !important; }

    /* Body scrolls first; the shell also scrolls if a very short keyboard viewport cannot fit the footer. */
    .modal {
        top: var(--erp-visual-top, 0px);
        height: var(--erp-visual-height, var(--erp-viewport-height));
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
                 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        --erp-dialog-height: calc(var(--erp-visual-height, var(--erp-viewport-height)) - 1rem
                             - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .modal .modal-dialog { margin: .5rem auto; width: calc(100% - 1rem); max-height: var(--erp-dialog-height); }
    .modal .modal-dialog-centered { min-height: var(--erp-dialog-height); }
    .modal .modal-content { max-height: var(--erp-dialog-height); overflow-x: hidden; overflow-y: auto; }
    .modal .modal-content > form {
        display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto;
        flex: 1 1 auto;
    }
    .modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
    .modal .modal-header, .modal .modal-footer { flex-shrink: 0; }
    .modal .modal-footer { gap: .375rem; }
    .modal .modal-footer > * { margin: 0; }
    #toast-container { max-width: calc(100vw - 1.5rem); }
    #toast-container > div { max-width: 100%; overflow-wrap: anywhere; }
}

/* A touch tablet can use the desktop sidebar while retaining usable form controls. */
@media (pointer: coarse) {
    .form-control, .form-select, input, select, textarea,
    .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: 16px !important; }
    .btn, .btn-sm, .nav-link, .page-link { min-height: 44px; }
    .btn, .page-link { min-width: 44px; }
    .btn-sm { min-height: 44px !important; }
    .sticky-submit-bar .btn { min-height: 48px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none !important; }
}