/* Fit-to-screen layer: loaded LAST (after upgrade.css). Makes every page, the menu and the tables fit
   phones, laptops and large desktops without sideways scrolling. Delete this file to revert. */

/* ---------- Base: scale text with the screen, never exceed the screen width ---------- */
html { font-size: 16px; max-width: 100%; overflow-x: clip; }
@media (max-width: 1279.98px) { html { font-size: 15px; } }
@media (max-width: 767.98px)  { html { font-size: 14px; } }
body { max-width: 100%; overflow-x: clip; }
img, svg, canvas, video, iframe { max-width: 100%; height: auto; }
.row > *, .card, .card-body, .d-flex > *, .input-group > * { min-width: 0; }
.card, .alert, .modal-content { overflow-wrap: break-word; }
h1, .h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); }
h2, .h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
h3, .h3 { font-size: clamp(1.1rem, .95rem + .5vw, 1.35rem); }

/* ---------- Page width: use the whole screen (with sensible gutters) ---------- */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    width: 100%; max-width: min(100%, 1680px) !important;
    padding-left: clamp(.5rem, 1.6vw, 1.5rem); padding-right: clamp(.5rem, 1.6vw, 1.5rem);
}
.container-fluid { padding-left: clamp(.5rem, 1.6vw, 1.5rem); padding-right: clamp(.5rem, 1.6vw, 1.5rem); }
[style*="max-width: 980px"], [style*="max-width: 900px"] { max-width: min(100%, 1100px) !important; }
.d-flex.justify-content-between, .d-flex.align-items-center { flex-wrap: wrap; gap: .5rem; }
.btn-group, .btn-toolbar { flex-wrap: wrap; gap: .25rem; }
.btn-group > .btn { border-radius: .375rem !important; flex: 0 1 auto; }
.btn { white-space: normal; }
.form-control, .form-select, .input-group { max-width: 100%; }
.modal-dialog { margin: .5rem auto; max-width: calc(100vw - 1rem); }
.kpi .kpi-value, .card .fs-4, .card .fs-5 { overflow-wrap: anywhere; font-size: clamp(1.05rem, .9rem + .7vw, 1.6rem); }

/* ---------- Menu: every item visible, never cut off ---------- */
.navbar { padding-top: .25rem; padding-bottom: .25rem; }
.navbar-brand { font-size: clamp(.95rem, .8rem + .6vw, 1.2rem); white-space: normal; margin-right: .75rem; }
@media (min-width: 992px) {
    .navbar .navbar-collapse { flex-wrap: wrap; }
    .navbar-brand { white-space: nowrap; }
    .navbar .navbar-nav { flex-wrap: wrap; align-items: center; row-gap: 0; }
    .navbar .navbar-nav.me-auto { flex: 1 1 0; min-width: 0; }
    .navbar .nav-link {
        padding: .3rem clamp(.35rem, .6vw, .7rem) !important;
        font-size: clamp(.76rem, .45vw + .45rem, .92rem);
        white-space: nowrap;
    }
}
@media (max-width: 991.98px) {
    .navbar-collapse { max-height: calc(100vh - 62px); overflow-y: auto; padding-bottom: .5rem; }
    .navbar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .5rem; }
    .navbar .nav-link {
        padding: .45rem .6rem !important; font-size: .95rem; white-space: normal; line-height: 1.2;
        background: rgba(255,255,255,.08); border-radius: 6px; min-height: 40px; display: flex; align-items: center;
    }
    .navbar-nav + .navbar-nav { margin-top: .4rem; }
}
@media (max-width: 340px) { .navbar-nav { grid-template-columns: 1fr; } }

/* ---------- Tables: wrap text to fit; scroll only as a last resort ---------- */
.table { width: 100%; font-size: clamp(.74rem, .5vw + .46rem, .92rem); }
.table th, .table td { padding: .4rem .5rem; overflow-wrap: break-word; }
.table th { white-space: normal !important; }
.table-responsive::after { display: none !important; }
#customersTable, .table[style*="min-width"] { min-width: 0 !important; }
.table td[style*="min-width"], .table th[style*="min-width"] { min-width: 0 !important; max-width: none !important; }
.table th[style*="width"] { width: auto !important; }
.table td .btn, .table td .btn-sm { padding: .15rem .4rem; font-size: .75rem; }
.table-scroll, .table-responsive { max-width: 100%; }
@media (max-width: 767.98px) { .table-scroll, .table-responsive { max-height: calc(100vh - 160px); } }

/* Wide tables become readable labelled cards on small screens (labels are added by assets/js/ui_enhance.js):
   tables with 4+ columns on phones; tables with 9+ columns on tablets too. */
@media (max-width: 640px) {
    .stacked-frame { max-height: none !important; overflow: visible !important; }
    table.table.table-stack, table.table.table-stack tbody, table.table.table-stack tfoot, table.table.table-stack tr, table.table.table-stack td, table.table.table-stack th { display: block !important; width: 100% !important; min-width: 0 !important; }
    table.table.table-stack thead { display: none !important; }
    table.table.table-stack tr { border: 1px solid #dfe6ec !important; border-radius: 8px; margin: 0 0 .6rem !important; padding: .25rem .6rem; background: var(--bs-body-bg, #fff); }
    table.table.table-stack td, table.table.table-stack th { display: flex !important; justify-content: space-between; align-items: flex-start; gap: .75rem; text-align: right; border: 0 !important; padding: .28rem 0 !important; box-shadow: none; }
    table.table.table-stack td::before { content: attr(data-label) !important; flex: 0 0 40%; max-width: 40%; min-width: 0 !important; text-align: left; font-weight: 600; color: #6b7a89; }
    table.table.table-stack td.stack-full { display: block !important; text-align: center; }
    table.table.table-stack td.stack-full::before { display: none !important; }
    table.table.table-stack td:empty { display: none !important; }
    table.table.table-stack td .btn { margin: .1rem; }
}
@media (max-width: 900px) {
    .stacked-frame { max-height: none !important; overflow: visible !important; }
    table.table.table-wide, table.table.table-wide tbody, table.table.table-wide tfoot, table.table.table-wide tr, table.table.table-wide td, table.table.table-wide th { display: block !important; width: 100% !important; min-width: 0 !important; }
    table.table.table-wide thead { display: none !important; }
    table.table.table-wide tr { border: 1px solid #dfe6ec !important; border-radius: 8px; margin: 0 0 .6rem !important; padding: .25rem .6rem; background: var(--bs-body-bg, #fff); }
    table.table.table-wide td, table.table.table-wide th { display: flex !important; justify-content: space-between; align-items: flex-start; gap: .75rem; text-align: right; border: 0 !important; padding: .28rem 0 !important; box-shadow: none; }
    table.table.table-wide td::before { content: attr(data-label) !important; flex: 0 0 40%; max-width: 40%; min-width: 0 !important; text-align: left; font-weight: 600; color: #6b7a89; }
    table.table.table-wide td.stack-full { display: block !important; text-align: center; }
    table.table.table-wide td.stack-full::before { display: none !important; }
    table.table.table-wide td:empty { display: none !important; }
    table.table.table-wide td .btn { margin: .1rem; }
}
@media (max-width: 1100px) {
    .stacked-frame { max-height: none !important; overflow: visible !important; }
    table.table.table-xwide, table.table.table-xwide tbody, table.table.table-xwide tfoot, table.table.table-xwide tr, table.table.table-xwide td, table.table.table-xwide th { display: block !important; width: 100% !important; min-width: 0 !important; }
    table.table.table-xwide thead { display: none !important; }
    table.table.table-xwide tr { border: 1px solid #dfe6ec !important; border-radius: 8px; margin: 0 0 .6rem !important; padding: .25rem .6rem; background: var(--bs-body-bg, #fff); }
    table.table.table-xwide td, table.table.table-xwide th { display: flex !important; justify-content: space-between; align-items: flex-start; gap: .75rem; text-align: right; border: 0 !important; padding: .28rem 0 !important; box-shadow: none; }
    table.table.table-xwide td::before { content: attr(data-label) !important; flex: 0 0 40%; max-width: 40%; min-width: 0 !important; text-align: left; font-weight: 600; color: #6b7a89; }
    table.table.table-xwide td.stack-full { display: block !important; text-align: center; }
    table.table.table-xwide td.stack-full::before { display: none !important; }
    table.table.table-xwide td:empty { display: none !important; }
    table.table.table-xwide td .btn { margin: .1rem; }
}
@media print { .stacked-frame { max-height: none !important; } }

/* ---------- Phones: summary cards sit two per row instead of one tall card each ---------- */
@media (max-width: 576px) {
    .row > .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .row.g-3, .row.g-4 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
    .card { margin-bottom: .5rem; }
    .card-body { padding: .6rem .75rem; }
    h1, .h1 { margin-bottom: .5rem; }
}

/* ---------- Water system picker + "Add Water System" pop-up (add_customer.php / edit_customer.php) ---------- */
/* The dropdown and the small "+ Add" button always share ONE line, at every screen size. */
.input-group.water-system-picker { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; width: 100%; max-width: 440px; margin-bottom: .25rem; }
.input-group.water-system-picker .form-select { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; padding: .45rem .75rem; font-size: .9rem; height: auto; margin-bottom: 0 !important; }
.input-group.water-system-picker .btn { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 0 0 .5rem !important; padding: .4rem .9rem; font-size: .85rem; line-height: 1.4; white-space: nowrap; }

/* Compact, professional pop-up: about 400px wide on desktop, snug on phones. */
.modal-dialog.water-system-modal-dialog { width: auto; max-width: min(400px, calc(100vw - 1rem)); margin-left: auto; margin-right: auto; }
.water-system-modal-dialog .modal-content { border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 40, 64, .18); }
.water-system-modal-dialog .modal-header { padding: .7rem 1rem; }
.water-system-modal-dialog .modal-title { font-size: 1.05rem; font-weight: 600; }
.water-system-modal-dialog .modal-body { padding: .9rem 1rem .6rem; }
.water-system-modal-dialog .modal-body .mb-3 { margin-bottom: .75rem !important; }
.water-system-modal-dialog .form-label { font-size: .75rem; margin-bottom: .25rem; }
.water-system-modal-dialog .form-control, .water-system-modal-dialog .form-select { padding: .4rem .65rem; font-size: .9rem; min-height: 0; width: 100%; }
.water-system-modal-dialog textarea.form-control { min-height: 0; }
.water-system-modal-dialog .modal-footer { padding: .6rem 1rem; gap: .5rem; flex-wrap: nowrap; justify-content: flex-end; }
.water-system-modal-dialog .modal-footer .btn { width: auto; min-width: 0; min-height: 0; margin: 0; padding: .4rem 1rem; font-size: .85rem; }

/* ---------- Brand logo in the menu bar ---------- */
.navbar-brand { flex-shrink: 0; }
.navbar-brand .navbar-logo { display: block; height: 40px; width: auto; max-width: none; flex-shrink: 0; }
.navbar-brand { padding-top: .15rem; padding-bottom: .15rem; }
@media (max-width: 575.98px) { .navbar-brand .navbar-logo { height: 34px; } }

/* ---------- Restore real column sizes ----------
   style.css forces every [class*='col-'] to equal width, which flattens the few rows that need unequal sizes
   (the 8/4 splits on Settings, Backup, Printer settings, Usage statistics, Bulk notices, View bill; full-width
   rows such as the buttons row on Add reading). Rows of equal columns are unaffected. */
.row > .col-12:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .row > .col-md-8 { flex: 0 0 auto; width: 66.66667%; max-width: 66.66667%; }
    .row > .col-md-8 + .col-md-4, .row > .col-md-4:has(+ .col-md-8) { flex: 0 0 auto; width: 33.33333%; max-width: 33.33333%; }
}
@media (min-width: 992px) {
    .row > .col-lg-8 { flex: 0 0 auto; width: 66.66667%; max-width: 66.66667%; }
    .row > .col-lg-8 + .col-lg-4, .row > .col-lg-4:has(+ .col-lg-8) { flex: 0 0 auto; width: 33.33333%; max-width: 33.33333%; }
}