/* Final cross-page visibility/responsive layer.
 * This file intentionally loads after legacy Fixonic CSS via theme_toggle.html.
 * It prevents fixed-height card clipping, unreadable theme combinations and
 * excessive mobile gutters from resurfacing on individual routes.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main,
main > *,
.shell,
section,
article,
form,
fieldset,
div {
    min-width: 0;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

:is(h1,h2,h3,h4,p,span,strong,small,a,label,dt,dd,li,button) {
    overflow-wrap: anywhere;
}

/* Never hide card copy because an older phase gave the card/body a fixed size. */
.listing-card,
.app-listing-card,
.app-product-rail-item .listing-card,
.app-explore-grid .listing-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

.listing-card-body,
.app-listing-card .listing-card-body,
.app-product-rail-item .listing-card-body {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
}

.listing-card-title-row,
.listing-card-title-row h3,
.listing-card-title-row h3 a,
.fault-summary,
.listing-card-footer,
.delivery-note,
.card-auction-line,
.app-card-meta {
    max-height: none !important;
}

.listing-card-title-row h3 {
    min-height: 0 !important;
    line-height: 1.28 !important;
}

.listing-card-title-row h3 a,
.fault-summary,
.delivery-note,
.card-auction-line,
.app-card-meta span {
    white-space: normal !important;
}

.fault-summary {
    min-height: 0 !important;
    overflow: visible !important;
    line-height: 1.45 !important;
}

.listing-card-footer {
    margin-top: auto !important;
    overflow: visible !important;
    padding-bottom: 2px;
}

/* Media itself should clip; text/content must not. */
.listing-card-media,
.app-listing-card .listing-card-media {
    overflow: hidden !important;
}

/* Homepage rails: use the available phone width and keep a small next-card peek. */
.app-product-rail,
.app-guide-rail,
.app-category-rail {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    scroll-padding-inline: 0 !important;
}

.app-product-rail {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(220px, 42vw, 290px) !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 0 12px !important;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
}

.app-product-rail::-webkit-scrollbar { display: none; }
.app-product-rail-item {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    scroll-snap-align: start;
}

.app-product-rail-item > .listing-card {
    width: 100% !important;
    min-height: 100% !important;
}

/* Homepage rails must collapse the wrapper itself when an internal SKU card or
   unusable media card is suppressed. Hiding only the child leaves an empty grid
   column and can push the next real card off-screen on mobile. */
.app-route-home .app-product-rail-item:has(.app-shadow-variant-listing),
.app-route-home .app-product-rail-item:has(.listing-card-media.has-media-error),
.app-route-home .app-product-rail-item:has(.listing-card-media > .media-placeholder:not(.fx-media-fallback)) {
    display: none !important;
}

/* Empty states must remain readable in either theme. */
.empty-conversations,
.message-empty-state,
.empty-state,
.app-empty-state,
.empty-results,
.no-results,
.empty-list,
.empty-card {
    color: var(--fx-text, #191919) !important;
    border-color: var(--fx-line, #d7dce3) !important;
    background: var(--fx-panel, #fff) !important;
}

:is(.empty-conversations,.message-empty-state,.empty-state,.app-empty-state,.empty-results,.no-results,.empty-list,.empty-card) :is(strong,h1,h2,h3) {
    color: var(--fx-text, #191919) !important;
}

:is(.empty-conversations,.message-empty-state,.empty-state,.app-empty-state,.empty-results,.no-results,.empty-list,.empty-card) :is(p,small,span) {
    color: var(--fx-muted, #667085) !important;
    opacity: 1 !important;
}

[data-theme="dark"] .empty-conversations,
[data-theme="dark"] .message-empty-state,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .app-empty-state,
[data-theme="dark"] .empty-results,
[data-theme="dark"] .no-results,
[data-theme="dark"] .empty-list,
[data-theme="dark"] .empty-card {
    color: #f5f7fb !important;
    border-color: #354153 !important;
    background: #101720 !important;
}

[data-theme="dark"] :is(.empty-conversations,.message-empty-state,.empty-state,.app-empty-state,.empty-results,.no-results,.empty-list,.empty-card) :is(strong,h1,h2,h3) {
    color: #f5f7fb !important;
}

[data-theme="dark"] :is(.empty-conversations,.message-empty-state,.empty-state,.app-empty-state,.empty-results,.no-results,.empty-list,.empty-card) :is(p,small,span) {
    color: #aeb8c8 !important;
}

/* Messaging specifically: no white-on-white / dark-on-dark inherited combinations. */
.message-inbox-shell,
.message-thread-shell {
    width: min(900px, calc(100% - 32px)) !important;
    margin-inline: auto !important;
}

[data-theme="dark"] .conversation-card,
[data-theme="dark"] .message-bubble,
[data-theme="dark"] .message-composer {
    color: #f5f7fb !important;
    border-color: #354153 !important;
    background: #101720 !important;
}

[data-theme="dark"] .conversation-copy small,
[data-theme="dark"] .conversation-card time,
[data-theme="dark"] .message-meta time,
[data-theme="dark"] .composer-actions small {
    color: #aeb8c8 !important;
}

[data-theme="dark"] .is-mine .message-bubble {
    border-color: #355d9c !important;
    background: #13233a !important;
}

/* Forms/tables/cards should grow with their content instead of cropping it. */
:is(.checkout-card,.order-summary-card,.content-card,.app-detail-card,.app-wizard-card,.app-account-links>a,.app-account-links>button,.app-selling-card-list>article,.project-card,.guide-card,.equipment-card) {
    max-height: none !important;
    overflow: visible;
}

table {
    max-width: 100%;
}

/* Protect content from the fixed app-style bottom navigation. */
@media (max-width: 760px) {
    main {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .shell,
    .app-feed-section.shell,
    .app-category-feed.shell,
    .app-shortcuts.shell,
    .app-feed-notice.shell,
    .app-sell-prompt.shell,
    .app-confidence-banner.shell {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-inline: 14px !important;
    }

    .app-feed-heading {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    .app-product-rail {
        grid-auto-columns: min(78vw, 310px) !important;
        gap: 12px !important;
    }

    .app-product-rail .listing-card-body {
        padding: 12px !important;
        gap: 7px !important;
    }

    .app-product-rail .listing-card-title-row h3 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    .app-product-rail .fault-summary {
        font-size: .88rem !important;
        line-height: 1.4 !important;
    }

    .app-product-rail .listing-card-footer {
        gap: 4px !important;
    }

    .message-page-hero .shell,
    .message-inbox-shell,
    .message-thread-shell,
    .message-thread-heading {
        width: calc(100% - 28px) !important;
        margin-inline: 14px !important;
    }

    .empty-conversations {
        padding: 28px 16px !important;
    }

    .conversation-card {
        width: 100%;
        min-height: 0 !important;
        height: auto !important;
    }

    .conversation-copy b,
    .conversation-copy small {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .app-results-grid .listing-card {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .app-results-grid .listing-card-body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Marketplace home follows the efficient mobile rhythm used by mature marketplaces:
       content close to the viewport edge and compact product tiles rather than boxed panels. */
    .app-home-feed .app-feed-section.shell {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-inline: 12px !important;
    }

    .app-home-feed .app-feed-heading {
        padding-inline: 0 !important;
    }

    .app-home-feed .app-product-rail {
        width: calc(100vw - 12px) !important;
        max-width: none !important;
        margin-right: -12px !important;
        grid-auto-columns: clamp(156px, 42vw, 188px) !important;
        gap: 12px !important;
        padding: 0 12px 10px 0 !important;
        scroll-padding-left: 0 !important;
    }

    .app-home-feed .app-product-rail-item > .listing-card {
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .app-home-feed .app-product-rail .listing-card-media {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border: 1px solid var(--fx-line, rgba(127, 145, 170, .24)) !important;
        border-radius: 14px !important;
        background: var(--fx-panel-2, #f5f6f8) !important;
    }

    .app-home-feed .app-product-rail .listing-card-body {
        padding: 9px 0 0 !important;
        gap: 5px !important;
        background: transparent !important;
    }

    .app-home-feed .app-product-rail .listing-card-title-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 28px !important;
        gap: 4px !important;
        align-items: start !important;
    }

    .app-home-feed .app-product-rail .listing-card-title-row h3 {
        margin: 0 !important;
        min-height: 2.55em !important;
        font-size: .91rem !important;
        line-height: 1.28 !important;
        font-weight: 600 !important;
    }

    .app-home-feed .app-product-rail .app-card-menu {
        width: 28px !important;
        min-width: 28px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
    }

    .app-home-feed .app-product-rail .app-card-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px 6px !important;
        margin: 0 !important;
        min-height: 0 !important;
        color: var(--fx-muted) !important;
        font-size: .78rem !important;
        line-height: 1.28 !important;
    }

    .app-home-feed .app-product-rail .app-card-meta span {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-home-feed .app-product-rail .app-card-meta span::before,
    .app-home-feed .app-product-rail .app-card-meta span::after,
    .app-home-feed .app-product-rail .app-card-meta span + span::before {
        content: none !important;
        display: none !important;
    }

    /* Supplier provenance belongs on the detail page; suppressing it in the narrow rail
       keeps the browse card focused on item, condition, price and delivery. */
    .app-home-feed .app-product-rail .app-card-meta span:nth-child(n+3) {
        display: none !important;
    }

    .app-home-feed .app-product-rail .fault-summary {
        display: none !important;
    }

    .app-home-feed .app-product-rail .listing-card-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        margin: 3px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .app-home-feed .app-product-rail .listing-card-footer .price {
        margin: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
    }

    .app-home-feed .app-product-rail .listing-card-footer small,
    .app-home-feed .app-product-rail .delivery-note,
    .app-home-feed .app-product-rail .card-auction-line {
        margin: 0 !important;
        font-size: .76rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 430px) {
    .shell,
    .app-feed-section.shell,
    .app-category-feed.shell,
    .app-shortcuts.shell,
    .app-feed-notice.shell,
    .app-sell-prompt.shell,
    .app-confidence-banner.shell,
    .message-page-hero .shell,
    .message-inbox-shell,
    .message-thread-shell,
    .message-thread-heading {
        width: calc(100% - 24px) !important;
        margin-inline: 12px !important;
    }

    .app-product-rail {
        grid-auto-columns: min(82vw, 300px) !important;
    }

    .app-home-feed .app-feed-section.shell {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-inline: 10px !important;
    }

    .app-home-feed .app-product-rail {
        width: calc(100vw - 10px) !important;
        margin-right: -10px !important;
        grid-auto-columns: clamp(148px, 43vw, 178px) !important;
        gap: 10px !important;
        padding-right: 10px !important;
    }
}