/* ============================================================================
   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; }
}

/* ---- Sidebar avatar must never depend on the uploaded image's size ------
   The landlord sidebar rendered <img> with no width/height at all, so the
   layout silently depended on every user uploading a small, roughly square
   photo. A user whose profile picture was a full desktop screenshot rendered
   it at natural size (~600px wide), which pushed the nav apart and made the
   whole sidebar look broken/unstyled.

   Fixed dimensions plus object-fit: cover means any aspect ratio crops to the
   same circle instead of dictating the layout. */
.sidebar_profile_info .thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: .75rem;
}
.sidebar_profile_info .thumb img {
    width: 40px;
    height: 40px;
    max-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
/* The name/email must not overflow either: a long email would otherwise push
   the theme and logout buttons off the edge. */
.sidebar_profile_info .profile_content { min-width: 0; }
.sidebar_profile_info .profile_content h5,
.sidebar_profile_info .profile_content p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    margin-bottom: 0;
}
/* ---- Phone number missing a country code -------------------------------
   Rendered by partials/phone-country-code-alert.blade.php, which is included
   inside <main> on every dashboard layout. Kept here rather than in an inline
   <style> block: a style element inside that container pushed page content
   down by roughly 300px.

   A flush, full-bleed strip with a 1px border read as unstyled text sitting
   under the header rather than a warning. Given a card treatment instead -
   margin, radius, shadow - so it reads as a deliberate notice rather than a
   layout accident, matching how the rest of the dashboard presents cards. */
.phone-cc-alert {
    margin: 16px 24px 0;
    border-radius: 10px;
    /* Fixed warning-tone colors, not the general-purpose --app-text /
       --app-surface tokens: --app-text IS defined by theme-core.css
       (#1b2559, navy) for ordinary body copy, so using it "as a fallback"
       here silently overrode this component's own amber palette with the
       site's regular text color - a warning banner in the same ink as
       everything else, which reads as no warning at all. */
    background: #fff8e6;
    border: 1px solid #f0d999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.phone-cc-alert__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: #6b5300;
}
.phone-cc-alert__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(217, 119, 6, .15);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.phone-cc-alert__text {
    flex: 1 1 auto;
}
.phone-cc-alert__text strong {
    font-weight: 600;
}
.phone-cc-alert__cta {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .4rem .9rem;
    border-radius: 6px;
    background: #d97706;
    color: #fff !important;
    font-weight: 600;
    font-size: .8125rem;
    text-decoration: none;
    transition: background-color .15s ease;
}
.phone-cc-alert__cta:hover {
    background: #b45f04;
    color: #fff;
}
@media (max-width: 576px) {
    .phone-cc-alert__inner { flex-wrap: wrap; }
    .phone-cc-alert__cta { margin-left: 42px; }
}
/* Deliberately NOT @media (prefers-color-scheme: dark). Every other dark
   style in this app is driven by the site's own light/dark toggle, which
   stamps data-theme on <html> - it does not follow the OS/browser
   preference. A prefers-color-scheme rule here fired independently of that
   toggle, so a user whose OS is set to dark but who has this site set to
   light saw every other element render light and only this banner render
   dark: wrong color scheme, wrong element, by itself. */
:root[data-theme="dark"] .phone-cc-alert { background: #4a3a0f; border-color: #6b5416; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .phone-cc-alert__inner { color: #ffe4a3; }
:root[data-theme="dark"] .phone-cc-alert__icon { background: rgba(255, 228, 163, .18); color: #ffcb66; }
:root[data-theme="dark"] .phone-cc-alert__text strong { color: #fff3d6; }