/* Shared responsive behavior for the three module layouts. Keep wide data inside
   its own scroll region, never hide overflowing page content or actions. */
.main-content, .page-content, .container-fluid, .row > *, .card, .card-body,
.tab-content, .tab-pane, .input-group { min-width: 0; }
.main-content img { max-width: 100%; }
.main-content h4, .main-content h5, .main-content .badge { overflow-wrap: anywhere; }
.form-control, .form-select, .select2-container { max-width: 100%; }
.input-group > .form-control, .input-group > .form-select { min-width: 0; }
.ultra-table-scroll, .table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ultra-table-scroll:focus-visible { outline: 2px solid var(--ultra-primary); outline-offset: 2px; }
.dataTables_wrapper { width: 100%; min-width: 0; }
.dataTables_wrapper > .row { row-gap: .75rem; }
.dataTables_wrapper .pagination { flex-wrap: wrap; gap: .2rem; }
.dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: .25rem; }
.dataTables_wrapper .dataTables_filter input { max-width: 100%; }
.dataTables_wrapper table td a[href*="meters/"] { white-space: nowrap; }
.dataTables_wrapper table td .badge { white-space: normal; }
#info-display img[src*="qr/"] { display: block; max-width: 140px; height: auto; }
#info-display h5 { overflow-wrap: anywhere; }
.ultra-profile-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
.ultra-profile-tabs .nav-item { flex: 0 0 auto; }
.ultra-profile-tabs .nav-link { white-space: nowrap; min-height: 44px; }
.ultra-profile-tabs .nav-link > .d-none { display: block !important; }
.ultra-profile-tabs .nav-link > .d-block.d-sm-none { display: none !important; }
.header-item svg { vertical-align: middle; flex-shrink: 0; }
.modal-dialog { max-width: calc(100% - 2rem); }
.modal-content { max-height: calc(100dvh - 2rem); }
.modal-body { overflow-y: auto; overscroll-behavior: contain; }
.modal-header, .modal-footer { flex-shrink: 0; }
.modal-footer { gap: .5rem; }
.modal-footer > * { margin: 0; }
@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; }
    .modal-lg, .modal-xl { max-width: min(800px, calc(100% - 3rem)); }
}
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }
@media (max-width: 1199.98px) {
    #info-display > .col-sm-4 { width: 35%; }
    #info-display > .col-sm-8 { width: 65%; }
    .dataTables_wrapper > .row > [class*="col-sm-"] { flex: 1 1 200px; width: auto; }
    .dataTables_wrapper > .row > .col-sm-12 { flex-basis: 100%; }
}
@media (max-width: 767.98px) {
    .page-content { padding: 86px 0 20px; }
    .page-content > .container-fluid { padding-left: 12px; padding-right: 12px; }
    .card-body, .card.p-4 { padding: 16px !important; }
    .card { margin-bottom: 16px; }
    .page-title-box { padding-bottom: 16px; }
    .page-title-box .breadcrumb { flex-wrap: wrap; }
    .navbar-header { padding: 0 8px 0 0; }
    .navbar-header > .d-flex { align-items: center; min-width: 0; }
    .navbar-header .header-item { padding-left: 10px; padding-right: 10px; min-width: 44px; }
    .navbar-header .dropdown.ms-2 { margin-left: 0 !important; }
    .navbar-header .navbar-brand-box { padding: 0; width: 56px; }
    .navbar-header .dropdown-menu { max-width: calc(100vw - 24px); }
    #page-header-search-dropdown + .dropdown-menu { position: fixed !important; top: 70px !important; left: 12px !important; right: 12px !important; transform: none !important; width: auto; }
    .main-content .btn, .modal .btn, .main-content .page-link { min-height: 44px; }
    .main-content .btn { white-space: normal; }
    .main-content input:not([type=checkbox]):not([type=radio]), .main-content select,
    .modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea { min-height: 44px; font-size: 16px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left; }
    .dataTables_wrapper .dataTables_filter input { margin-left: 0; width: 100%; }
    .dataTables_wrapper .dataTables_filter label { display: block; }
    .dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-start !important; }
    .dataTables_wrapper table { min-width: 440px; }
    .dataTables_wrapper .dataTables_empty { white-space: normal; }
    .table:not(.dataTable) td, .table:not(.dataTable) th { overflow-wrap: anywhere; }
    .tab-content.p-3 { padding: 12px !important; }
    .tab-content .card-body { padding: 8px !important; }
    .tab-content .row > .col-md-2 { flex: 1 1 130px; }
    #info-display > .col-sm-4 > .p-3, #info-display > .col-sm-8 > .p-3 { padding: 12px !important; }
    #info-display img[src*="qr/"] { max-width: 120px; }
    #info-display .btn { padding: 8px; }
    .footer { position: static; height: auto; padding: 16px 12px; margin-left: 0; }
    .ultra-auth .main { padding: 16px; }
    .ultra-auth .card { padding: 24px 20px; }
    .ultra-auth .languages { flex-wrap: wrap; gap: 8px 16px; }
    .ultra-auth .languages a { display: inline-flex; align-items: center; min-height: 44px; }
    .ultra-auth .form-control, .ultra-auth .form-select { font-size: 16px; }
}
@media (max-width: 359.98px) {
    .navbar-header .header-item { padding-left: 7px; padding-right: 7px; }
    .navbar-header .navbar-brand-box { width: 44px; }
    .ultra-auth .main { padding: 12px; }
    .ultra-auth .card { padding: 20px 16px; }
}
/* Legacy dialogs put their form between modal-content and modal-body. */
.modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.modal-content > form > .modal-body { flex: 1 1 auto; min-height: 0; }
.card-title:has(> .float-end) { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.card-title > .float-end { margin-left: auto; float: none !important; display: flex; gap: .5rem; }
.dataTables_wrapper .dt-buttons > .btn,
.dataTables_wrapper .dt-buttons > .btn-group { flex: 1 1 44px; width: auto !important; min-width: 44px; }
@media (max-width: 767.98px) {
    body .navbar-header .navbar-brand-box { display: block !important; width: 56px !important; flex: 0 0 56px; }
    #filter-area > [class*="col-"] { flex: 1 1 145px; width: auto; }
}
@media (max-width: 359.98px) {
    body .navbar-header .navbar-brand-box { width: 44px !important; flex-basis: 44px; }
    .navbar-header .header-item { font-size: 12px; }
}
/* Brand belongs in the header, not behind meter identifiers and actions. */
#info-display { background-image: none !important; }

@media (max-width: 575.98px) {
    #page-topbar .ultra-module-switch { padding-inline: 6px; font-size: 13px; }
    #page-topbar .ultra-module-switch > i { display: none; }
}

@media (max-width: 575.98px) {
    #page-topbar #theme-toggle { padding-inline: 6px; min-width: 32px; }
    #page-topbar .navbar-header > .d-flex { gap: 0; }
    #page-topbar .header-item.dropdown-toggle { padding-inline: 6px; font-size: 12px; }
}
/* Paint the tab separator behind the tabs so a scrolling active tab can cover it.
   A parent border stays visible when overflow clips Bootstrap's negative margin. */
.ultra-profile-tabs.nav-tabs {
    --ultra-tab-surface: #fff;
    --ultra-tab-border: #ced4da;
    border-bottom: 0;
    background: linear-gradient(var(--ultra-tab-border), var(--ultra-tab-border)) left bottom / 100% 1px no-repeat;
}
.ultra-profile-tabs.nav-tabs .nav-link { margin-bottom: 0; }
.ultra-profile-tabs.nav-tabs .nav-link.active {
    background-color: var(--ultra-tab-surface);
    border-bottom-color: var(--ultra-tab-surface);
}
html[data-ultra-theme="dark"] .ultra-profile-tabs.nav-tabs {
    --ultra-tab-surface: var(--ultra-surface-card);
    --ultra-tab-border: var(--ultra-surface-border);
}
html[data-ultra-theme="dark"] .ultra-profile-tabs.nav-tabs .nav-link.active {
    background-color: var(--ultra-tab-surface);
    border-bottom-color: var(--ultra-tab-surface);
}
/* Keep wrapped table badges as one centered rounded block, never separate
   background fragments on each line. Semantic status colors stay intact. */
.main-content table .badge {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    text-wrap: balance;
    line-height: 1.2;
    border-radius: .4rem;
    padding: .25em .55em;
    vertical-align: middle;
}
.main-content table .ultra-company-badge {
    font-size: 12px;
    font-weight: 500;
    margin-top: .2rem;
    padding: .3em .55em;
}
.main-content table .ultra-customer-badge {
    font-size: 12px;
    font-weight: 500;
    padding: .35em .6em;
}
.ultra-customer-badge .ultra-customer-phone { display: block; margin-top: .25em; font-size: .9em; }
/* Reserve enough room for owner words rather than splitting names letter by letter. */
.main-content table .ultra-customer-badge {
    min-width: 125px;
    max-width: 220px;
    width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}
.main-content table .badge:has(.fa-battery-low),
.main-content table .badge:has(.fa-wifi) { white-space: nowrap; max-width: none; }