/* ============================================================================
   responsive-fixes.css — Legacy frontend + Landlord portal responsive hardening.
   The frontend/css custom.css ships no media queries; this adds the guards and
   the landlord layout's small-screen behaviour. Standard breakpoints, 320 floor.
   ========================================================================== */

/* ---- Media never overflows --------------------------------------------- */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
main, .ph_main_layout { max-width: 100%; overflow-x: hidden; }

/* ---- Long strings wrap in table cells ----------------------------------- */
td, th { overflow-wrap: anywhere; }

/* ---- Tables scroll inside their box ------------------------------------- */
@media (max-width: 991.98px) {
    .ph_main_layout table:not(.table-fixed-ok),
    main table:not(.table-fixed-ok) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ph_main_layout table[style*="width"]:not(.table-fixed-ok),
    main table[style*="width"]:not(.table-fixed-ok) { width: 100% !important; }
}

/* ---- Landlord layout: sidebar collapses, content full width on tablet --- */
@media (max-width: 991.98px) {
    .ph_root_layout { display: block; }
    .ph_main_layout { width: 100%; }
}

/* ---- Modals fit small screens ------------------------------------------- */
@media (max-width: 575.98px) {
    .modal-dialog { max-width: calc(100vw - 1rem); margin: .5rem auto; }
    .modal-body { overflow-x: auto; }
}

/* ---- Very small phones -------------------------------------------------- */
@media (max-width: 375px) {
    .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }
}