/* Shared screen layout, loaded after each page's own styles. */
:root { --focus-ring: #087e8b; }
*, *::before, *::after { box-sizing: border-box; }
body { line-height: 1.8; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
.row > *, .d-flex > *, .input-group > *, .main-content, .card-body { min-width: 0; }
.main-content > .container { max-width: 100%; }
.page-header { font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 700; color: #0b5d4e; margin-block-end: 1.25rem; }
.page-header:empty { display: none; }
.card-body, .modal-body, .alert, .detail-row, .footer { overflow-wrap: anywhere; }
.form-control, .form-select { max-width: 100%; min-height: 44px; }
textarea.form-control { min-height: 110px; resize: vertical; }
.btn, .navbar-toggler, .nav-icon, .menu .nav-link { min-height: 44px; }
.btn { white-space: normal; }
.btn-close { flex-shrink: 0; padding: .8rem; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring); outline-offset: 3px;
}
.skip-link { position: fixed; top: -100px; right: 1rem; z-index: 2000; background: #fff; color: #0b5d4e; padding: .65rem 1rem; border-radius: 8px; }
.skip-link:focus { top: .5rem; }
.responsive-table-region { width: 100%; max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border-radius: 12px; margin-block-end: 1rem; }
.responsive-table-region > table { width: 100%; margin-bottom: 0; }
.responsive-table-region th, .responsive-table-region td { padding: .75rem; vertical-align: middle; }
.responsive-table-region th { background: #e6f2ef; color: #0b5d4e; }
.table-responsive, .acc-table-wrap, .fac-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.pagination { flex-wrap: wrap; padding-inline: 0; }
.modal-dialog { max-width: calc(100% - 1rem); }
.modal-header { gap: .75rem; }
.modal-title { min-width: 0; }
.modal-footer { gap: .5rem; }
.modal-footer > * { margin: 0; }
.captcha-container, .captcha-box { max-width: 100%; }
.captcha-image { min-width: 0; max-width: 100%; }
.captcha-refresh, .refresh-btn { flex-shrink: 0; }
.login-input input { padding-left: 3rem; }
.sidebar-brand img { filter: none; object-fit: contain; }
.error-page { min-width: 0; max-width: calc(100% - 2rem); }

@media (min-width: 992px) {
    .app-shell > .sidebar { width: 248px; flex: 0 0 248px; }
    .page-body { max-width: 1440px; padding-inline: clamp(1rem, 2.5vw, 2.5rem); }
}
@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; }
    .modal-dialog.modal-lg { max-width: min(800px, calc(100% - 3rem)); }
    .modal-dialog.modal-xl { max-width: min(1140px, calc(100% - 3rem)); }
    .modal-dialog.modal-sm { max-width: 300px; }
}
@media (max-width: 991.98px) {
    .page-body { padding: 1rem 1rem 2rem; }
    #offcanvasNavbar { width: min(320px, 88vw); }
    .offcanvas-body { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .navbar-custom > .container-fluid { flex-wrap: nowrap; gap: .5rem; }
    .user-panel { min-width: 0; height: auto; gap: .5rem; }
    .user-panel .vr { margin-inline: .25rem !important; }
    .user-name { max-width: min(160px, 25vw); }
    .avatar, .nav-icon { flex-shrink: 0; }
}
@media (max-width: 575.98px) {
    /* 16px prevents automatic input zoom on iOS. */
    .form-control, .form-select, .input-group-text { font-size: 16px; }
    .page-body .container, .main-content .container { padding-inline: 0; }
    .card-body, .modal-body { padding: 1rem; }
    .modal-dialog { margin: .5rem; }
    .modal-body { max-height: 70vh; max-height: 70dvh; overflow-y: auto; }
    .modal-footer .btn { flex: 1 1 auto; }
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control, .input-group > .form-select { min-width: 5rem; }
    .input-group-text { white-space: normal; }
    .input-group > .input-group { width: 100%; margin-inline: 0; }
    .detail-row { gap: .75rem; align-items: flex-start; flex-wrap: wrap; }
    .detail-row > * { max-width: 100%; }
    .responsive-table-region th, .responsive-table-region td { min-width: 7rem; }
    .responsive-table-region th:first-child, .responsive-table-region td:first-child { min-width: 3rem; }
    .captcha-container, .captcha-box { gap: .5rem; }
    main.flex-grow-1 { padding-block: 1.25rem; }
    .login-row { margin-bottom: 0; }
    .login-row > div { padding-inline: .5rem; }
    .login-row .card { border-radius: 18px !important; }
    .login-row .card:hover { transform: none; }
    .footer { padding: 1.25rem 1rem; font-size: .85rem; }
    .footer .row { margin-inline: 0; margin-bottom: .5rem; }
    .error-page { padding: 1.75rem 1rem; }
}
@media (max-width: 359.98px) {
    .user-name, .user-panel .vr { display: none; }
    .page-body { padding-inline: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .skip-link { display: none; }
    .responsive-table-region, .table-responsive { overflow: visible; }
    .modal-body { max-height: none; }
}