/* Phone-only overrides for the YuvaCC admin. Loaded after theme.css. */
@media (max-width: 768px) {
    /* one-screen shell: use the visible viewport (address bar aware) */
    .fi-main-ctn { height: 100dvh !important; max-height: 100dvh !important; }

    /* top bar: keep brand + avatar, drop the long text */
    .nx-shell-topbar-row1 { gap: 0.5rem; min-width: 0; }
    .nx-brand-lockup { min-width: 0; }
    .nx-portal-tag { display: none !important; }
    .nx-acct-name, .nx-acct-role { display: none !important; }

    /* strip: breathing room, tabs scroll sideways in one row */
    .nx-shell-strip { padding-block: 0.5rem !important; }
    .nx-shell-strip .nx-cluster-tabstrip {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nx-shell-strip .nx-cluster-tabstrip::-webkit-scrollbar { display: none; }
    .nx-shell-strip .nx-cluster-tabstrip > * { flex: 0 0 auto; }

    /* stop iOS zooming in when a field is tapped */
    .fi-main-ctn input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .fi-main-ctn select,
    .fi-main-ctn textarea { font-size: 16px !important; }
}

/* pass 2: filters + strip layout (phone only) */
@media (max-width: 768px) {
    .nx-shell-strip {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 0.5rem !important;
    }
    .nx-shell-strip .nx-search-filter-slot {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 100%;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nx-shell-strip .nx-search-filter-slot::-webkit-scrollbar { display: none; }
    .nx-shell-strip .nx-shell-select {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 9.5rem !important;
        font-size: 16px !important;   /* stops iOS zoom on tap */
    }
    .nx-shell-strip .nx-cluster-tab { min-height: 40px; }
}

/* pass 3: compact strip (phone only) */
@media (max-width: 768px) {
    .nx-shell-strip,
    .nx-shell-strip > * {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .nx-shell-strip { padding: 0.5rem 0.75rem !important; gap: 0.4rem !important; }
    .nx-shell-strip .nx-search-filter-slot,
    .nx-shell-strip .nx-cluster-tabstrip {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        align-items: center !important;
    }
    .nx-shell-strip .nx-cluster-tab { flex: 0 0 auto; padding-inline: 0.8rem; }
}

/* pass 4: beat theme specificity so the strip is only as tall as its content (phone only) */
@media (max-width: 768px) {
    html body .nx-header-group .nx-shell-strip,
    html body .nx-header-group .nx-shell-strip .nx-search-filter-slot,
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        align-content: flex-start !important;
    }
}

/* pass 5: table + strip polish (phone only) */
@media (max-width: 768px) {
    /* breathing room between the filter row and the tab row */
    html body .nx-header-group .nx-shell-strip { gap: 0.6rem !important; padding: 0.6rem 0.75rem !important; }

    /* fade the right edge so it is obvious the rows scroll */
    html body .nx-header-group .nx-shell-strip .nx-search-filter-slot,
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip {
        padding-right: 1.5rem !important;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    }

    /* table: pin the Title column while scrolling sideways */
    html body .fi-ta-table .fi-table-cell-title,
    html body .fi-ta-table .fi-table-header-cell-title {
        position: sticky !important;
        left: 0;
        z-index: 2;
        min-width: 8rem;
        max-width: 9.5rem;
        white-space: normal !important;
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.08);
    }
    html body .fi-ta-table .fi-table-cell-title { background: #fff !important; }
    html body .fi-ta-table .fi-table-header-cell-title { background: #f9fafb !important; z-index: 3; }

    /* comfortable row height for thumbs */
    html body .fi-ta-table .fi-ta-cell { padding-block: 0.6rem !important; }
}

/* pass 6: tabs as a fixed 4-column grid, no scrolling (phone only) */
@media (max-width: 768px) {
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        overflow: visible !important;
        padding: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-cluster-tab {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.2rem !important;
        min-width: 0 !important;
        min-height: 3.1rem !important;
        padding: 0.4rem 0.15rem !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

/* pass 7: filters + tabs wrap, no scrolling, roomier buttons (phone only) */
@media (max-width: 768px) {
    /* filters: wrapped grid, each select fills its cell */
    html body .nx-header-group .nx-shell-strip .nx-search-filter-slot {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-shell-select {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    /* tabs: 2 x 2, icon beside label, room to breathe */
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-cluster-tab {
        flex-direction: row !important;
        gap: 0.45rem !important;
        min-height: 2.6rem !important;
        padding: 0.4rem 0.6rem !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* keep the native option list from looking huge on desktop previews */
    html body .fi-main-ctn select option { font-size: 14px !important; }
}

/* pass 8: small branded dropdown panel (phone only, Chrome 135+ base-select; others keep the native list) */
@supports (appearance: base-select) {
  @media (max-width: 768px) {
    html body .fi-main-ctn select,
    html body .fi-main-ctn select::picker(select) { appearance: base-select; }

    html body .fi-main-ctn select::picker-icon { display: none; }   /* keep the existing chevron */

    html body .fi-main-ctn select::picker(select) {
        background: #fff;
        border: 1px solid var(--nx-brand);
        border-radius: 8px;
        padding: 0.25rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        max-height: 60vh;
    }
    html body .fi-main-ctn select option {
        font-size: 13px !important;
        line-height: 1.2;
        padding: 0.5rem 0.7rem;
        border-radius: 6px;
        color: var(--nx-ink);
    }
    html body .fi-main-ctn select option:hover,
    html body .fi-main-ctn select option:focus-visible {
        background: color-mix(in srgb, var(--nx-brand) 12%, #fff);
    }
    html body .fi-main-ctn select option:checked {
        background: var(--nx-brand);
        color: #fff;
    }
    html body .fi-main-ctn select option::checkmark { display: none; }
  }
}

/* pass 8: hide the cluster tabstrip by default on phone; only show it
   when opened via the hamburger toggle. Must come after pass 6/7 and
   match their specificity to reliably win the cascade. */
@media (max-width: 900px) {
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip {
        display: none !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip.nx-cluster-tabstrip-open {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
}

/* pass 9: compact dropdown panel styling for the hamburger menu items,
   overriding the old full-size desktop tab look */
@media (max-width: 900px) {
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip.nx-cluster-tabstrip-open {
        gap: 0.3rem !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-cluster-tab {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.6rem !important;
        min-height: auto !important;
        padding: 0.6rem 0.85rem !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: left !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-cluster-tab-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
}

/* pass 10: force the open dropdown panel to float above content as a
   proper overlay, not push the page layout around */
@media (max-width: 900px) {
    html body .nx-header-group .nx-shell-strip .nx-cluster-tabstrip.nx-cluster-tabstrip-open {
        position: absolute !important;
        top: calc(100% + 0.4rem) !important;
        left: 0.75rem !important;
        right: auto !important;
        width: max-content !important;
        max-width: calc(100% - 1.5rem) !important;
        z-index: 60 !important;
        background: var(--nx-paper) !important;
        border: 1.5px solid var(--nx-line) !important;
        border-radius: 8px !important;
        padding: 0.4rem !important;
        box-shadow: 0 10px 28px -6px rgba(8,28,21,0.22) !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-cluster-nav {
        position: relative !important;
    }
}

/* pass 11: hamburger button + nav positioning, in classic syntax.
   theme.css's build pipeline (Tailwind v4 / Lightning CSS) rewrites max-width
   media queries into (width<=900px) range syntax, which pre-16.4 Safari
   silently ignores entirely — dropping button styling, icon sizing, and
   flex reordering along with it. Reimplemented here to bypass that pipeline. */
@media (max-width: 900px) {
    .nx-cluster-nav {
        order: -1 !important;
        width: 100% !important;
        margin-bottom: 0.6rem !important;
        position: relative !important;
    }
    .nx-cluster-hamburger {
        display: flex !important;
        border: 1.5px solid var(--nx-line) !important;
        background: var(--nx-paper) !important;
        color: var(--nx-brand) !important;
        font-family: var(--font-mono) !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        border-radius: 7px !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        padding: 0.55rem 1rem !important;
        font-size: 11px !important;
    }
    .nx-cluster-hamburger-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* pass 12: kill iOS Safari's automatic text-size-adjust inflation, which
   overrides our real font-size rules on narrow columns (filters + table
   headers) regardless of !important. Also explicitly shrink table headers,
   which had no rule in this file at all until now. */
@media (max-width: 768px) {
    html, body {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    html body .fi-ta-header-cell,
    html body .fi-ta-header-cell span,
    html body .fi-ta-header-cell button {
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        letter-spacing: 0.02em !important;
    }
}

/* pass 13: custom branded filter dropdown, replacing the native <select>.
   iOS Safari does not let CSS touch a native select's popup panel at all
   (width/border/color are OS-owned) — this is real DOM instead, so the
   panel can shrink to content width and carry the brand-red border. */
[x-cloak] { display: none !important; }

.nx-shell-select-wrap { position: relative; }
.nx-shell-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: var(--nx-paper);
    border: 1.5px solid var(--nx-line);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    color: var(--nx-ink);
    cursor: pointer;
    text-align: left;
}
.nx-shell-select-btn:focus-visible { outline: 2px solid var(--nx-brand); outline-offset: 1px; }
.nx-shell-select-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--nx-brand); }
.nx-shell-select-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: max-content;
    min-width: 100%;
    max-width: 80vw;
    z-index: 70;
    background: var(--nx-paper);
    border: 1.5px solid var(--nx-brand);
    border-radius: 8px;
    padding: 0.3rem;
    box-shadow: 0 10px 28px -6px rgba(8,28,21,0.22);
    max-height: 60vh;
    overflow-y: auto;
}
.nx-shell-select-option {
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0.85rem;
}
.nx-shell-select-option:hover { background: color-mix(in srgb, var(--nx-brand) 12%, #fff); }
.nx-shell-select-option-active { background: var(--nx-brand); color: #fff; }

@media (max-width: 768px) {
    .nx-shell-select-btn { font-size: 13px !important; padding: 0.55rem 0.7rem !important; }
    .nx-shell-select-option { font-size: 13px !important; }
}

/* pass 14 (revised again): filters + the relocated Listings select share one
   equal-width grid so all four controls line up and fill the row, instead of
   each sizing to its own content. .fi-page-sub-navigation-select is now the
   custom dropdown itself (see the select.blade.php override), so it's
   included here alongside the other nx-shell-select-wrap controls. */
@media (max-width: 768px) {
    html body .nx-header-group .nx-shell-strip .nx-search-filter-slot {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
        row-gap: 0.4rem !important;
        column-gap: 0.3rem !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-shell-select-wrap,
    html body .nx-header-group .nx-shell-strip .fi-page-sub-navigation-select {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-shell-select-btn {
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* pass 14b: dropdown options rendered as <a> (sub-navigation) need the same
   block layout/no-underline the filter options get for free as <div>s */
.nx-shell-select-panel a.nx-shell-select-option {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* pass 15: hamburger/menu button sized up to read as the dashboard's main menu control */
@media (max-width: 900px) {
    .nx-cluster-hamburger {
        padding: 0.75rem 1.1rem !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-width: 2px !important;
    }
    .nx-cluster-hamburger-icon {
        width: 20px !important;
        height: 20px !important;
    }
}

/* pass 16 (revised): Merriweather on genuine body/UI text only — explicitly
   NOT touching the elements theme.css deliberately sets to DM Mono
   (.fi-btn, .fi-badge, table headers, stat values, mono-labels, hamburger) */
@media (max-width: 900px) {
    html body,
    html body p,
    html body span:not([class*="mono"]),
    html body div:not([class*="mono"]),
    html body label,
    html body a,
    html body input,
    html body select,
    html body textarea,
    html body .fi-fo-field-wrp,
    html body .nx-shell-select-btn,
    html body .nx-shell-select-option,
    html body .fi-dropdown-list-item {
        font-family: var(--font-sans) !important;
    }
    /* re-affirm mono explicitly so the broader rules above can never win on these */
    html body .fi-btn,
    html body .fi-badge,
    html body .fi-ta-header-cell,
    html body .fi-ta-header-cell span,
    html body .fi-wi-stats-overview-stat-label,
    html body .fi-wi-stats-overview-stat-value,
    html body .fi-fo-field-wrp-label,
    html body [class*="mono"],
    html body .nx-cluster-hamburger {
        font-family: var(--font-mono) !important;
    }
}

/* pass 17: Filament's own native dropdown panel (the "Companies / Listings /
   Requests / History / Storage / Settings" sidebar-group menu) — shrink to
   content width and brand it red, matching the custom filter dropdowns */
@media (max-width: 900px) {
    html body .fi-dropdown-panel {
        width: max-content !important;
        min-width: 0 !important;
        max-width: 80vw !important;
        border: 1.5px solid var(--nx-brand) !important;
        border-radius: 8px !important;
    }
    html body .fi-dropdown-list-item {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

/* pass 18: hamburger sized up further to read as the dashboard's primary menu control */
@media (max-width: 900px) {
    .nx-cluster-hamburger {
        padding: 0.85rem 1.2rem !important;
        font-size: 15px !important;
        min-height: 3rem !important;
    }
    .nx-cluster-hamburger-icon {
        width: 22px !important;
        height: 22px !important;
    }
}

/* pass 19: breathing room — stop tiles/cards/filter boxes/stat widgets
   from touching each other on phone */
@media (max-width: 900px) {
    html body .fi-section,
    html body .fi-wi-stats-overview-stat,
    html body .nx-shell-select-wrap,
    html body .fi-ta-content,
    html body .hm-panel,
    html body .hm-strip-item {
        margin-bottom: 0.75rem !important;
    }
    html body .fi-wi-stats-overview {
        gap: 0.75rem !important;
    }
    html body .fi-section:last-child,
    html body .fi-ta-content:last-child {
        margin-bottom: 0 !important;
    }
    html body .nx-header-group .nx-shell-strip .nx-search-filter-slot {
        padding-bottom: 0.2rem !important; /* room so the scrollbar-less row doesn't hug the next element */
    }
}

/* pass 20: cap the red-outlined content box to the remaining viewport height
   (using --nx-shell-h, already computed live by nx-header-group.blade.php's
   own script) so its bottom border stays visible, and let ONLY the table's
   own content wrapper (.fi-ta-content) scroll internally — same scroller
   Filament already ships, just now contained instead of pushing the whole
   page down past the fold. */
@media (max-width: 900px) {
    html body .fi-page > section.flex-col > div:has(> div.grid.auto-cols-fr) {
        display: flex !important;
        flex-direction: column !important;
        max-height: calc(100dvh - var(--nx-shell-h, 220px) - 1.5rem) !important;
        overflow: hidden !important;
    }
    html body .fi-page > section.flex-col > div:has(> div.grid.auto-cols-fr) .fi-ta-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* stop the whole page from ALSO scrolling now that the table scrolls
       internally — avoids a confusing double-scroll feel */
    html body .fi-main {
        overflow-y: hidden !important;
    }
}

/* pass 21: mobile-only grid scroll — desktop stays sealed (overflow:hidden
   in theme.css); only phones get vertical scroll on this grid container */
@media (max-width: 900px) {
    html body .fi-page > section.flex-col > div > div.grid.auto-cols-fr {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* pass 22 (superseded): the sub-navigation select used to be a native
   <select> styled here. It's now a custom nx-shell-select-wrap dropdown
   (select.blade.php override), so its sizing/branding comes from pass 14
   and pass 13 like the other filter controls — nothing select-specific
   needed here anymore. JS relocation in nx-header-group.blade.php still
   applies unchanged, since the wrapper keeps the fi-page-sub-navigation-select class. */


/* HM DESKTOP ONE LINE: filters left, tabs right, one row. Desktop only. */
@media (min-width: 1001px) {
    .nx-shell-strip { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: space-between !important; gap: 0.75rem !important; }
    .nx-shell-strip .nx-search-filter-slot { flex: 0 0 auto !important; width: fit-content !important; }
    .nx-shell-strip .nx-cluster-tabstrip { flex: 1 1 auto !important; flex-wrap: nowrap !important; max-width: 52rem !important; margin-left: auto !important; }
}