/*
 * KTG Source Fingerprint: KTG-ASONGE-2026-2884B01747739D02
 * Copyright © 2026 KT Group. All rights reserved.
 * Vendor: KT Group | https://www.ktg.group | Namespace: com.ktg.asongesonke
 * KT Group proprietary modifications/integration/compilation; third-party rights preserved.
 */
/* Asonge Sonke enterprise responsive compatibility layer (Bootstrap 5). */
html, body { max-width: 100%; overflow-x: hidden; }
/* Keep wide tables and reports scrollable inside their own wrappers without
 * allowing a small child-width rounding error to create a page scrollbar. */
body { overflow-x: hidden; }
#layoutSidenav, #layoutSidenav_content, #layoutSidenav_content main, .container, .container-fluid, .row, [class*="col-"] { min-width: 0; }
#layoutSidenav_content { width: 100%; min-width: 0; overflow-x: hidden; }
#layoutSidenav_content main { width: 100%; padding: 1rem; }
.card, .card-body, .card-header, .modal-content { max-width: 100%; min-width: 0; }
.card-body { overflow-wrap: anywhere; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.navbar-brand img { max-width: 190px; max-height: 48px; object-fit: contain; }
.btn-block { display: block; width: 100%; }
.form-control, .form-select, .select2-container, .select2-container--default, .input-group { max-width: 100%; width: 100% !important; }
.select2-container .select2-selection { min-height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.report-filter-form .form-control, .report-filter-form .form-select { min-height: 38px; }
.table-responsive, .table-responsive-enterprise, .enterprise-report-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }
.table > :not(caption) > * > * { vertical-align: middle; }
.dataTables_wrapper, .dt-container { width: 100%; max-width: 100%; min-width: 0; }
.dataTables_wrapper .row, .dt-container .row { margin-left: 0; margin-right: 0; }
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dt-container .dt-search, .dt-container .dt-length { max-width: 100%; min-width: 0; }
.dataTables_wrapper .dataTables_filter label, .dt-container .dt-search label { display: inline-flex; align-items: center; justify-content: flex-end; gap: .5rem; max-width: 100%; min-width: 0; white-space: normal !important; }
.dataTables_wrapper .dataTables_filter input, .dt-container .dt-search input { width: min(280px, 100%) !important; max-width: 100%; min-width: 0; box-sizing: border-box; margin-left: 0 !important; }
.dataTables_wrapper .dataTables_paginate, .dt-container .dt-paging { overflow-x: auto; padding-bottom: .25rem; }
.dt-buttons, .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.daterangepicker { max-width: calc(100vw - 24px) !important; }
.modal-dialog { max-width: min(900px, calc(100vw - 1rem)); margin-left: auto; margin-right: auto; }
.modal-body { max-height: 75vh; overflow-y: auto !important; overflow-x: auto !important; }
.dropdown-menu { max-width: calc(100vw - 1rem); overflow-wrap: anywhere; }
.notification-area .dropdown-menu { max-height: 70vh; overflow-y: auto; }
.report-header { overflow-wrap: anywhere; }
.report-header h4, .report-header h5 { max-width: 100%; }
.text-break, .break-word { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 991.98px) {
  #layoutSidenav { padding-left: 0; padding-right: 0; }
  #layoutSidenav_content main { padding: .75rem; }
  .sb-topnav .container-fluid { gap: .35rem; flex-wrap: nowrap; }
  .navbar-brand { min-width: 0; max-width: 48%; margin-right: .25rem; }
  .navbar-brand img { max-width: 150px; }
  .notification-area { margin-left: auto !important; }
  .card-header { padding: .75rem 1rem; }
  .card-body { padding: .9rem; }
  .report-params .row > [class*="col-"] { margin-bottom: .25rem; }
  .report-filter-form .btn { width: 100%; min-height: 42px; }
}

@media (max-width: 767.98px) {
  body { font-size: 14px; }
  #layoutSidenav_content main { padding: .55rem; }
  .navbar-brand img { max-width: 125px; }
  .sb-topnav .nav-link { padding-left: .4rem; padding-right: .4rem; }
  #languageSelector { max-width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card { border-radius: .5rem; }
  .card-body { padding: .75rem; }
  h1 { font-size: 1.55rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } h5 { font-size: 1rem; }
  .table { font-size: .78rem !important; min-width: 640px; }
  .table.table-mobile-natural { min-width: 0; }
  .dataTables_wrapper .row > div, .dt-container .row > div { width: 100%; margin-bottom: .35rem; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { width: 100%; max-width: 100%; text-align: left !important; float: none !important; }
  .dataTables_wrapper .dataTables_filter label { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; width: 100%; max-width: 100%; white-space: normal !important; }
  .dataTables_wrapper .dataTables_length label { width: 100%; }
  .dataTables_wrapper .dataTables_filter input { display: block; width: 100% !important; max-width: 100%; min-width: 0; margin: 0 !important; box-sizing: border-box; }
  .pagination { flex-wrap: wrap; }
  .modal-dialog { margin: .5rem auto; max-width: calc(100vw - 1rem); }
  .modal-body { padding: .75rem; }
  .daterangepicker { left: 12px !important; right: 12px !important; width: auto !important; }
  .daterangepicker .ranges, .daterangepicker .drp-calendar { width: 100% !important; max-width: none !important; }
}

@media (max-width: 575.98px) {
  .sb-topnav .navbar-nav:not(.notification-area) #languageSelector { font-size: 0; }
  .sb-topnav .navbar-nav:not(.notification-area) #languageSelector i { font-size: 1.1rem; }
  .btn, .form-control, .form-select, .select2-container { font-size: 16px; }
  .report-header { text-align: left !important; padding-left: .75rem !important; padding-right: .75rem !important; }
  .report-header h4, .report-header h5 { margin-bottom: .35rem; }
  .dt-buttons .btn, .dt-buttons button { flex: 1 1 auto; }
}

@media print {
  #layoutSidenav_nav, .sb-topnav, .report-params, .dt-buttons, .dataTables_filter, .dataTables_length, .dataTables_paginate { display: none !important; }
  #layoutSidenav_content main { padding: 0; }
  .table-responsive, .table-responsive-enterprise, .enterprise-report-table { overflow: visible !important; }
  .table { min-width: 0 !important; font-size: 9pt !important; }
}

/* Bootstrap 4 -> 5 visual compatibility for legacy portal templates during staged modernization. */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.badge-info { color: #000; background-color: #9eeaf9; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success { color: #fff; background-color: #198754; }
.badge-danger { color: #fff; background-color: #dc3545; }
.badge-warning { color: #000; background-color: #ffc107; }
.badge-primary { color: #fff; background-color: #0d6efd; }
.badge-pill { border-radius: 50rem; }
.close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; color: currentColor; border: 0; background: transparent; opacity: .7; font-size: 1.25rem; line-height: 1; }
.close:hover, .close:focus { opacity: 1; }

/* Dense legacy portal sections remain usable without forcing the page itself to overflow. */
@media (max-width: 767.98px) {
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
  .input-group-prepend, .input-group-append { display: flex; }
  .member-profile-page .member-data-table-wrap { overflow-x: auto; }
  .member-profile-page .dataTables_wrapper { min-width: 720px; }
  .member-profile-page #loans_table_wrapper { min-width: 860px; }
}

/* Horizontal fallback for wide DataTables even when the responsive extension cannot collapse a custom table. */
@media (max-width: 991.98px) {
  .dataTables_wrapper, .dt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper > .row, .dt-container > .row { min-width: 0; }
}


/* Viewport acceptance hardening: contain wide components without hiding page overflow. */
.main-content, #layoutSidenav_content, #layoutSidenav_content > main { min-width:0; }
.card, .row, [class*="col-"] { min-width:0; }
.table-responsive-enterprise, .table-responsive, .enterprise-report-table { max-width:100%; }
pre, code { max-width:100%; overflow-wrap:anywhere; }
.input-group > .form-control, .input-group > .form-select { min-width:0; }
@media (max-width: 991.98px) {
  #layoutSidenav_nav { max-width: 280px; }
  #layoutSidenav_content { min-width:0; }
}
@media (max-width: 575.98px) {
  .sb-topnav { min-height:56px; }
  .sb-topnav .container-fluid { padding-left:.5rem; padding-right:.5rem; }
  .sb-topnav .navbar-nav { flex:0 0 auto; }
  .card-header, .card-body { padding-left:.7rem; padding-right:.7rem; }
  .modal-dialog { width: calc(100vw - 1rem); }
}