/* =====================================================================
   Leg RealX: responsive safety net, loaded on every page (both layouts).
   Tables scroll sideways instead of stretching the page, rows of buttons
   wrap, forms stack, and nothing pushes the screen wider than the phone.
   ===================================================================== */

/* Flex items default to min-width:auto, so one wide child (a table) used to stretch the
   whole dashboard past the screen. min-width:0 lets the content area shrink to the phone. */
.app-main, .app-content { min-width: 0; }
.app-content { overflow-wrap: break-word; }

/* Last line of defence: never let the page itself scroll sideways */
@supports (overflow: clip) { html, body { overflow-x: clip; } }

img, video, iframe, canvas { max-width: 100%; }
.leaflet-container img, .leaflet-container canvas { max-width: none !important; }   /* maps need their tiles untouched */

/* Every table gets its own horizontal scroll (lrx-responsive.js wraps tables that have no wrapper) */
.lrx-tscroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lrx-tscroll > table { margin-bottom: 0; }
.table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------- tablets and phones */
@media (max-width: 991.98px) {
    .modal-xl, .modal-lg { max-width: calc(100vw - 1rem); }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 767.98px) {
    /* tables: keep cells on one line and let the table scroll */
    .table > :not(caption) > * > th, .table > :not(caption) > * > td { white-space: nowrap; }
    .table td.text-wrap, .table th.text-wrap, .table .text-wrap { white-space: normal !important; }
    .table { font-size: .9rem; }

    /* title + buttons rows, button bars and groups wrap instead of overflowing */
    .d-flex.justify-content-between:not(.flex-nowrap),
    .d-flex.justify-content-end:not(.flex-nowrap),
    .d-flex.gap-1:not(.flex-nowrap), .d-flex.gap-2:not(.flex-nowrap), .d-flex.gap-3:not(.flex-nowrap) { flex-wrap: wrap; row-gap: .5rem; }
    .btn-group:not(.flex-nowrap), .btn-toolbar { flex-wrap: wrap; }
    .card-header .d-flex, .card-footer .d-flex { flex-wrap: wrap; row-gap: .4rem; }

    /* tabs and pill filters scroll sideways instead of breaking onto many lines */
    .nav-tabs, .nav-pills.flex-nowrap { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar, .nav-pills.flex-nowrap::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* headings sized for a phone */
    .app-content h1, .app-content .h1 { font-size: 1.55rem; }
    .app-content h2, .app-content .h2 { font-size: 1.35rem; }
    .app-content h3, .app-content .h3 { font-size: 1.2rem; }
    .app-content .display-4, .app-content .display-5, .app-content .display-6 { font-size: 1.8rem; }

    /* forms: 16px text stops iPhones zooming into the field; nothing wider than the screen */
    .form-control, .form-select, textarea { font-size: 16px; min-width: 0; }
    .input-group > .form-control, .input-group > .form-select { min-width: 0; }

    /* dashboard cards and numbers */
    .pm-card.p-3, .card-body { padding: .9rem; }
    .pm-kpi { padding: 12px; }
    .pm-kpi .n { font-size: clamp(1.05rem, 5vw, 1.45rem); overflow-wrap: anywhere; }

    /* DataTables controls stack and fit */
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { text-align: left !important; float: none !important; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; display: block; }
    .dataTables_wrapper .dataTables_paginate { overflow-x: auto; }
    .dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-start !important; flex-wrap: nowrap; }

    /* pop-up windows use the whole width */
    .modal-dialog { margin: .5rem; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > * { margin: 0; }

    /* full width on phones: every .container behaves like .container-fluid (Bootstrap stops at 540px between 576 and 767px) */
    .container, .container-sm, .container-md { max-width: 100% !important; }
    /* inside the app the content area already has side padding, so a container adds none of its own */
    .app-content .container, .app-content .container-sm, .app-content .container-md,
    .app-content .container-lg, .app-content .container-xl, .app-content .container-xxl, .app-content .container-fluid {
        max-width: 100% !important; padding-left: 0; padding-right: 0;
    }
    .app-content .pm, .app-content .hc { max-width: 100% !important; }

    /* long buttons in a stacked row read better full width */
    .btn-mobile-block { width: 100%; }
}

/* ---------------------------------------------------------------- very small phones */
@media (max-width: 380px) {
    .app-content { padding-left: .5rem !important; padding-right: .5rem !important; }
    .btn-lg { padding: .55rem 1rem; font-size: 1rem; }
}

@media print { .lrx-tscroll { overflow: visible; } }

/* ---------------------------------------------------------------- perfect circles (every screen size)
   Icons and photos in circles turned into ovals on phones for three reasons:
   1. a fixed-size circle inside a flex row was squeezed narrower (flex-shrink),
   2. circles sized only by padding (p-2 / p-3 around an icon) follow the icon's own width and height,
   3. a photo that isn't square was stretched into an ellipse.
   These rules keep every circle 1:1 without changing its size. */
.rounded-circle,
[style*="border-radius:50%"], [style*="border-radius: 50%"],
.avatar, .tm-av, .sf-av, .ma-avatar, .pp-avatar, .ac-photo, .owner-avatar, .activity-icon, .rp-msg .av,
.bank-logo, .method-icon, .icon-wrapper, .icon-shape, .ag-step, .agd-dot i, .whatsapp-link, .lrx-back-pub,
.favorite-btn, .lrx-ph-badge, .comment-avatar, #backToTopBtn {
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}
/* circles that only have padding around an icon: centre the icon and size the circle by its larger side */
.rounded-circle:not(img):not(.carousel-control-prev-icon):not(.carousel-control-next-icon),
.icon-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.rounded-circle > i, .rounded-circle > .bi, .rounded-circle > .fa, .rounded-circle > .fas, .rounded-circle > .far,
.icon-shape > i, .activity-icon > i, .method-icon > i, .icon-wrapper > i { line-height: 1; display: block; }
.rounded-circle > i[class*="fa-"], .icon-shape > i[class*="fa-"] { width: 1.25em; text-align: center; }   /* Font Awesome icons have uneven widths */
/* photos in circles: crop to a square instead of stretching */
img.rounded-circle, img[style*="border-radius:50%"], img[style*="border-radius: 50%"], .avatar img, .tm-av img, .sf-av img,
.ma-avatar img, .pp-avatar img, .owner-avatar img, .ac-photo img, img.ac-photo {
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
img.rounded-circle:not([height]) { height: auto; }