/* ==========================================================================
   MARION'S INN — SHARED RESPONSIVE LAYER
   --------------------------------------------------------------------------
   Loaded LAST on every page (public site, customer, manager, receptionist)
   so it can correct layout assumptions made by the page-specific sheets.

   What lives here:
     1. Guard rails      — nothing may force the page wider than the screen
     2. Layout fixes     — flex/grid children that must be allowed to shrink
     3. Data tables      — horizontal scroll containers + phone card mode
     4. Touch comfort    — tap targets, input sizing (stops iOS zoom-on-focus)
     5. Overlays         — modals and drawers always fit the viewport
     6. Small-screen type/spacing polish

   Companion script: responsive.js (wraps bare <table> elements so they can
   scroll, and labels each cell for the phone card mode).
   ========================================================================== */

/* ==========================================================================
   1. GUARD RAILS
   ========================================================================== */

/* `clip` (not `hidden`) so that position:sticky children — the admin
   sidebars rely on it — keep working. `hidden` creates a scroll container
   and silently breaks sticky positioning on every descendant. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* Old engines without overflow:clip fall back to hidden; sticky is a
   progressive enhancement there, no horizontal page scroll is not. */
@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* Media never wider than its container. Element-level selectors only, so
   every class-based rule already in the project still wins (icons and
   logos with an explicit width/height are unaffected). */
img,
video,
iframe,
embed,
object,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

/* Long unbroken strings (emails, reference numbers, URLs) must wrap
   instead of widening their column. */
.mi-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================================
   2. LAYOUT FIXES
   ========================================================================== */

/* A flex/grid child defaults to min-width:auto, which means a wide table
   inside it can stretch the whole page. Allow every layout wrapper to
   shrink below its content. */
.layout,
.content,
.dashboard,
.main-content,
main,
.page-wrapper,
.wrapper {
    min-width: 0;
}

@media (max-width: 1100px) {

    .layout,
    .container,
    .wrapper,
    .page-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 900px) {

    /* THE key fix for the admin panels.
       `.layout` is `display:flex` on desktop and becomes a column below
       900px. Its `align-items:flex-start` is harmless in a row, but in a
       column it stops children from stretching — so any wide table inside
       made `.content` / `.dashboard` grow to ~1380px and blew the page out.
       Restoring `stretch` keeps the content column exactly viewport-wide;
       the table then scrolls inside its own container instead. */
    .layout {
        align-items: stretch;
    }

    .layout>.sidebar {
        flex: 0 0 auto;
    }

    .content,
    .dashboard {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   3. DATA TABLES
   ========================================================================== */

/* responsive.js wraps every bare <table> in this element. The wrapper
   scrolls, the table keeps its normal `display:table` layout. */
.mi-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.mi-table-scroll:focus-visible {
    outline: 2px solid #2e7d32;
    outline-offset: 2px;
}

.mi-table-scroll::-webkit-scrollbar {
    height: 8px;
}

.mi-table-scroll::-webkit-scrollbar-thumb {
    background: #b9c9bc;
    border-radius: 8px;
}

.mi-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* No-JS safety net: if the wrapper never gets created, an unfitted table
   still scrolls on its own rather than dragging the page sideways. */
@media (max-width: 900px) {
    table:not(.mi-wrapped) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Phone card mode -----------------------------------------------------
   Below 640px a row-per-record table is unusable even scrolled, so the
   script labels every cell with its column heading and this block turns
   each row into a stacked card.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {

    /* Card mode needs NO horizontal scrolling at all — a stacked card is
       never wider than the screen. Scoped to `.mi-cards` alone (not
       `.mi-cards.mi-table-scroll`) because the script also enables card mode
       on tables sitting inside a pre-existing scroll container such as
       customer/dashboard.php's `.table-scroll`. */
    .mi-cards {
        overflow-x: visible;
    }

    .mi-cards>table,
    .mi-cards>table>tbody,
    .mi-cards>table>thead,
    .mi-cards>table>tfoot {
        display: block;
        width: 100%;
    }

    /* Header row is redundant once each cell carries its own label. */
    .mi-cards>table tr.mi-head-row {
        display: none;
    }

    .mi-cards>table tr {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        padding: 4px 14px;
        background: #fff;
        border: 1px solid #e3ebe4;
        border-radius: 14px;
        box-shadow: 0 2px 6px rgba(16, 44, 22, .05);
    }

    .mi-cards>table tr:last-child {
        margin-bottom: 0;
    }

    .mi-cards>table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        width: auto;
        max-width: 100%;
        padding: 10px 0;
        border: 0;
        border-bottom: 1px dashed #e8efe9;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mi-cards>table td:last-child {
        border-bottom: 0;
    }

    .mi-cards>table td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-weight: 600;
        font-size: 12.5px;
        line-height: 1.45;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* Cells with no heading, or empty cells, shouldn't render a blank row. */
    .mi-cards>table td:not([data-label])::before,
    .mi-cards>table td.mi-empty::before {
        display: none;
    }

    .mi-cards>table td:not([data-label]),
    .mi-cards>table td.mi-empty {
        justify-content: flex-start;
        text-align: left;
    }

    /* "No records found" spans the whole row. */
    .mi-cards>table td[colspan] {
        display: block;
        text-align: center;
    }

    /* Nested layout tables inside a cell must not themselves stack. */
    .mi-cards>table td table {
        display: table;
        width: 100%;
    }

    /* Anything inside a stacked cell wraps rather than scrolls. */
    .mi-cards>table td>* {
        max-width: 100%;
    }
}

/* ==========================================================================
   4. TOUCH COMFORT
   ========================================================================== */
@media (max-width: 900px) {

    /* Primary navigation + drawers need real tap targets. */
    .nav-links a,
    .sidebar-nav a,
    .mobile-nav a,
    .drawer a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* Action buttons inside tables get a comfortable hit area. */
    .mi-table-scroll a,
    .mi-table-scroll button {
        min-height: 32px;
    }
}

@media (max-width: 768px) {

    /* iOS Safari zooms the whole page when a focused control is under
       16px. 16px is the smallest value that suppresses it. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* Date/time pickers and long selects shouldn't be wider than the card.
       `min-width:0` also removes the intrinsic floor a <select> gets from
       its longest <option>, which would otherwise widen the whole column. */
    input,
    select,
    textarea {
        max-width: 100%;
        min-width: 0;
    }

    /* Grid columns that hold form fields must be allowed to shrink. */
    .form-grid>*,
    .booking-card form>*,
    .contact-form>* {
        min-width: 0;
    }
}

/* ==========================================================================
   5. OVERLAYS (modals, drawers, lightboxes)
   ========================================================================== */
@media (max-width: 768px) {

    .modal-box,
    .modal-content,
    .archive-modal-content,
    .desc-modal-content,
    .desc-modal-box,
    [class*="modal-box"],
    [class*="modal-content"] {
        width: min(100%, 100vw - 24px) !important;
        max-width: min(100%, 100vw - 24px) !important;
        max-height: 88vh;
        overflow-y: auto;
        margin-inline: auto;
    }

    /* Modal contents that assume a two-column desktop layout. */
    .desc-modal-box,
    .desc-modal-content {
        display: flex;
        flex-wrap: wrap;
    }

    .desc-modal-img,
    .desc-modal-img-wrap,
    .desc-modal-info,
    .desc-modal-text {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   6. SMALL-SCREEN POLISH
   ========================================================================== */
@media (max-width: 600px) {

    /* Comfortable screen gutters without eating the content width. */
    .layout {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Section headings inside content cards. */
    .card,
    .box,
    .content-box,
    .recent-box,
    .stat-box {
        max-width: 100%;
    }

    /* Wide inline "toolbar" rows stack instead of overflowing. */
    .filter-bar,
    .toolbar,
    .actions,
    .table-actions,
    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-bar>*,
    .toolbar>* {
        max-width: 100%;
    }

    /* Label/value pairs laid out side by side inside a card (a room's rate
       and capacity, for example). The value is often one unbreakable run —
       "₱1,800.00/night" — so the row needs to be allowed to wrap and the
       items allowed to shrink, otherwise they stick out of the card and get
       clipped at the screen edge. */
    .room-info,
    .info-row,
    .meta-row,
    .stat-row,
    .detail-row {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .room-info>*,
    .info-item,
    .info-row>*,
    .meta-row>*,
    .stat-row>*,
    .detail-row>* {
        min-width: 0;
    }

    .info-item strong,
    .info-item span,
    .info-item b,
    .info-item small {
        overflow-wrap: anywhere;
    }

    /* Status chips are nowrap by design; let them shrink rather than push
       the card wider than the screen. */
    .status-badge {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Below 400px drop to a single gutter for maximum content width. */
@media (max-width: 400px) {

    .layout {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Respect users who ask the OS for less motion. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}