/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   Core Layout
   File: /home/jqkmqvml/public_html/assets/css/core/layout.css

   Purpose:
   - Global page layout
   - Header / main / footer structure
   - Content + sidebar layouts
   - Full-width / constrained sections
   - Marketplace page shells
   - Responsive structural behavior

   IMPORTANT:
   - No marketplace data
   - No fake/demo/sample records
   - No business/vendor/product/service data
   - Data must come from the live API/database layer
   - Visual layout only
   ========================================================================== */


/* ==========================================================================
   1. ROOT PAGE STRUCTURE
   ========================================================================== */

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}


/* Main application/page wrapper */

#app,
.app,
.site-app {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ==========================================================================
   2. SITE SHELL
   ========================================================================== */

.site-shell {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* Header */

.site-header,
header[role="banner"] {
    width: 100%;
    flex: 0 0 auto;
}


/* Main */

.site-main,
main[role="main"],
main {
    width: 100%;
    flex: 1 0 auto;
}


/* Footer */

.site-footer,
footer[role="contentinfo"] {
    width: 100%;
    flex: 0 0 auto;
}


/* ==========================================================================
   3. PAGE LAYOUT
   ========================================================================== */

.page {
    width: 100%;
    min-width: 0;
    display: block;
}

.page-layout {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.page-content {
    width: 100%;
    min-width: 0;
}

.page-section {
    width: 100%;
    min-width: 0;
    position: relative;
}

.page-section + .page-section {
    margin-top: var(--space-section, 2rem);
}


/* ==========================================================================
   4. SECTION WIDTH MODES
   ========================================================================== */

.section-full {
    width: 100%;
}

.section-fluid {
    width: 100%;
}

.section-contained {
    width: 100%;
}


/* Section with full viewport background and contained content */

.section-full > .container,
.section-full > .container-fluid,
.section-fluid > .container,
.section-fluid > .container-fluid {
    width: 100%;
}


/* ==========================================================================
   5. CONTENT AREA
   ========================================================================== */

.content-area {
    width: 100%;
    min-width: 0;
}

.content-main {
    width: 100%;
    min-width: 0;
}

.content-primary {
    width: 100%;
    min-width: 0;
}

.content-secondary {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   6. MAIN + SIDEBAR LAYOUT
   ========================================================================== */

.layout-with-sidebar {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.layout-main {
    width: 100%;
    min-width: 0;
}

.layout-sidebar {
    width: 100%;
    min-width: 0;
}


/* Two-column utility */

.layout-two-column {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}


/* ==========================================================================
   7. THREE COLUMN LAYOUT
   ========================================================================== */

.layout-three-column {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.layout-column {
    min-width: 0;
    width: 100%;
}


/* ==========================================================================
   8. CONTENT + FILTER + RESULTS
   ========================================================================== */

.results-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.results-sidebar {
    width: 100%;
    min-width: 0;
}

.results-content {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   9. SEARCH PAGE SHELL
   ========================================================================== */

.search-page-layout {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-page-header {
    width: 100%;
    min-width: 0;
}

.search-page-body {
    width: 100%;
    min-width: 0;
}

.search-results-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.search-filters {
    width: 100%;
    min-width: 0;
}

.search-results {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   10. DETAIL PAGE LAYOUT
   ========================================================================== */

.detail-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.detail-main {
    width: 100%;
    min-width: 0;
}

.detail-sidebar {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   11. BUSINESS / VENDOR DETAIL STRUCTURE
   ========================================================================== */

.entity-page {
    width: 100%;
    min-width: 0;
}

.entity-header {
    width: 100%;
    min-width: 0;
}

.entity-body {
    width: 100%;
    min-width: 0;
}

.entity-main {
    width: 100%;
    min-width: 0;
}

.entity-sidebar {
    width: 100%;
    min-width: 0;
}

.entity-section {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   12. PRODUCT / SERVICE DETAIL
   ========================================================================== */

.product-detail-layout,
.service-detail-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.product-detail-main,
.service-detail-main {
    width: 100%;
    min-width: 0;
}

.product-detail-sidebar,
.service-detail-sidebar {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   13. DASHBOARD-LIKE PUBLIC ACCOUNT AREAS
   ========================================================================== */

.account-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.account-sidebar {
    width: 100%;
    min-width: 0;
}

.account-content {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   14. HEADER LAYOUT
   ========================================================================== */

.header-shell {
    width: 100%;
    min-width: 0;
}

.header-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.header-left,
.header-center,
.header-right {
    min-width: 0;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.header-center {
    flex: 1 1 auto;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}


/* ==========================================================================
   15. NAVIGATION LAYOUT
   ========================================================================== */

.navigation-shell {
    width: 100%;
    min-width: 0;
}

.navigation-inner {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
}

.navigation-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}


/* ==========================================================================
   16. HERO / SEARCH AREA
   ========================================================================== */

.hero {
    width: 100%;
    position: relative;
    min-width: 0;
}

.hero-inner {
    width: 100%;
    min-width: 0;
}

.hero-content {
    width: 100%;
    min-width: 0;
}

.hero-search {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   17. SEARCH BAR LAYOUT
   ========================================================================== */

.search-layout {
    width: 100%;
    min-width: 0;
}

.search-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
}

.search-field {
    min-width: 0;
    flex: 1 1 18rem;
}

.search-location {
    min-width: 0;
    flex: 0 1 16rem;
}

.search-action {
    flex: 0 0 auto;
}


/* ==========================================================================
   18. CARD COLLECTION LAYOUT
   ========================================================================== */

.card-section {
    width: 100%;
    min-width: 0;
}

.card-section-header {
    width: 100%;
    min-width: 0;
}

.card-section-body {
    width: 100%;
    min-width: 0;
}

.card-list {
    width: 100%;
    min-width: 0;
}

.card-grid {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grid-gap, 1rem);
}


/* ==========================================================================
   19. LIST LAYOUT
   ========================================================================== */

.list-layout {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.list-item {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   20. TOOLBAR
   ========================================================================== */

.toolbar {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}

.toolbar-left,
.toolbar-right {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.toolbar-left {
    flex: 1 1 auto;
}

.toolbar-right {
    flex: 0 0 auto;
}


/* ==========================================================================
   21. BREADCRUMB LAYOUT
   ========================================================================== */

.breadcrumb-layout {
    width: 100%;
    min-width: 0;
}

.breadcrumb-list {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   22. LOCATION LAYOUT
   ========================================================================== */

.location-layout {
    width: 100%;
    min-width: 0;
}

.location-header {
    width: 100%;
    min-width: 0;
}

.location-content {
    width: 100%;
    min-width: 0;
}

.location-results {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   23. MAP + RESULTS
   ========================================================================== */

.map-results-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.map-panel {
    width: 100%;
    min-width: 0;
    position: relative;
}

.map-results {
    width: 100%;
    min-width: 0;
}


/* Prevent map children from overflowing */

.map-panel,
.map-panel > *,
.map-container {
    max-width: 100%;
}


/* ==========================================================================
   24. ENQUIRY / QUOTE LAYOUT
   ========================================================================== */

.enquiry-layout,
.quote-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.enquiry-main,
.quote-main {
    width: 100%;
    min-width: 0;
}

.enquiry-sidebar,
.quote-sidebar {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   25. CHECKOUT LAYOUT
   ========================================================================== */

.checkout-layout {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
    align-items: start;
}

.checkout-main {
    width: 100%;
    min-width: 0;
}

.checkout-summary {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   26. ORDER LAYOUT
   ========================================================================== */

.order-layout {
    width: 100%;
    min-width: 0;
}

.order-main {
    width: 100%;
    min-width: 0;
}

.order-sidebar {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   27. FOOTER LAYOUT
   ========================================================================== */

.footer-shell {
    width: 100%;
    min-width: 0;
}

.footer-grid {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-gap, 1.5rem);
}

.footer-column {
    min-width: 0;
}

.footer-bottom {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}


/* ==========================================================================
   28. FULL-WIDTH ELEMENTS
   ========================================================================== */

.full-width {
    width: 100%;
    max-width: 100%;
}

.block-width {
    display: block;
    width: 100%;
}


/* ==========================================================================
   29. OVERFLOW PROTECTION
   ========================================================================== */

.layout,
.page,
.page-section,
.content-area,
.content-main,
.content-primary,
.content-secondary,
.layout-main,
.layout-sidebar,
.card-section,
.card-grid,
.entity-page,
.entity-main,
.entity-sidebar {
    min-width: 0;
}


/* Prevent long live API values from breaking layout */

.layout a,
.layout p,
.layout h1,
.layout h2,
.layout h3,
.layout h4,
.layout h5,
.layout h6,
.page a,
.page p,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
    overflow-wrap: anywhere;
}


/* ==========================================================================
   30. STICKY SIDEBAR
   ========================================================================== */

.sticky-sidebar {
    position: sticky;
    top: var(--sticky-offset, 1rem);
    align-self: start;
}


/* ==========================================================================
   31. STICKY HEADER
   ========================================================================== */

.sticky-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 1000);
}


/* ==========================================================================
   32. OVERLAY LAYOUT
   ========================================================================== */

.layout-overlay {
    position: relative;
}

.layout-overlay-content {
    position: absolute;
    inset: 0;
}

.layout-overlay > .layout-overlay-content {
    z-index: 1;
}


/* ==========================================================================
   33. CENTERED CONTENT
   ========================================================================== */

.layout-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-center {
    margin-inline: auto;
}


/* ==========================================================================
   34. VERTICAL STACK
   ========================================================================== */

.stack {
    display: flex;
    flex-direction: column;
}

.stack > * {
    min-width: 0;
}

.stack-sm {
    gap: var(--space-2, 0.5rem);
}

.stack-md {
    gap: var(--space-4, 1rem);
}

.stack-lg {
    gap: var(--space-6, 1.5rem);
}

.stack-xl {
    gap: var(--space-8, 2rem);
}


/* ==========================================================================
   35. HORIZONTAL STACK
   ========================================================================== */

.cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

.cluster-sm {
    gap: var(--space-2, 0.5rem);
}

.cluster-md {
    gap: var(--space-4, 1rem);
}

.cluster-lg {
    gap: var(--space-6, 1.5rem);
}


/* ==========================================================================
   36. DIVIDED CONTENT
   ========================================================================== */

.divided-layout {
    display: flex;
    flex-direction: column;
}

.divided-layout > * + * {
    border-top: 1px solid var(--border-color, #e5e7eb);
}


/* ==========================================================================
   37. EMPTY / ERROR / LOADING AREAS
   ========================================================================== */

.state-layout {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state-container {
    width: 100%;
    min-width: 0;
    text-align: center;
}


/*
   These states must never inject fallback marketplace records.

   Loading:
   UI only.

   Empty:
   UI only when database/API returns zero records.

   Error:
   UI only when API/database request fails.
*/


/* ==========================================================================
   38. LIVE DATA CONTAINER
   ========================================================================== */

[data-live-data],
.live-data {
    width: 100%;
    min-width: 0;
}


/* Do not allow live API content to force horizontal scrolling */

[data-live-data] > *,
.live-data > * {
    min-width: 0;
}


/* ==========================================================================
   39. MODAL / DIALOG STRUCTURE
   ========================================================================== */

.modal-layout {
    width: 100%;
    min-width: 0;
}

.modal-content {
    width: 100%;
    min-width: 0;
}

.modal-header,
.modal-body,
.modal-footer {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   40. DRAWER LAYOUT
   ========================================================================== */

.drawer-layout {
    width: 100%;
    min-width: 0;
}

.drawer-content {
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   41. CHAT LAYOUT
   ========================================================================== */

.chat-layout {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header {
    flex: 0 0 auto;
}

.chat-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.chat-footer {
    flex: 0 0 auto;
}


/* ==========================================================================
   42. MEDIA / GALLERY LAYOUT
   ========================================================================== */

.gallery-layout {
    width: 100%;
    min-width: 0;
}

.gallery-main {
    width: 100%;
    min-width: 0;
}

.gallery-thumbs {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
}


/* ==========================================================================
   43. RESPONSIVE BASE BREAKPOINT
   Tablet / Small Desktop
   ========================================================================== */

@media (min-width: 48rem) {

    .layout-with-sidebar,
    .layout-two-column,
    .results-layout,
    .search-results-layout,
    .detail-layout,
    .account-layout,
    .enquiry-layout,
    .quote-layout,
    .checkout-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(16rem, 24rem);
    }

    .search-results-layout {
        grid-template-columns:
            minmax(15rem, 18rem)
            minmax(0, 1fr);
    }

    .results-sidebar {
        position: sticky;
        top: var(--sticky-offset, 1rem);
        align-self: start;
    }

    .detail-sidebar,
    .account-sidebar,
    .enquiry-sidebar,
    .quote-sidebar,
    .checkout-summary {
        position: sticky;
        top: var(--sticky-offset, 1rem);
        align-self: start;
    }

    .card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .map-results-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(20rem, 45%);
    }
}


/* ==========================================================================
   44. DESKTOP
   ========================================================================== */

@media (min-width: 64rem) {

    .layout-with-sidebar,
    .layout-two-column,
    .results-layout,
    .detail-layout,
    .account-layout,
    .enquiry-layout,
    .quote-layout,
    .checkout-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(18rem, 24rem);
    }

    .search-results-layout {
        grid-template-columns:
            minmax(16rem, 20rem)
            minmax(0, 1fr);
    }

    .card-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .map-results-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(24rem, 42%);
    }

    .header-row {
        gap: var(--space-5, 1.25rem);
    }
}


/* ==========================================================================
   45. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 80rem) {

    .card-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .layout-three-column {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .footer-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .map-results-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(26rem, 40%);
    }
}


/* ==========================================================================
   46. VERY LARGE SCREENS
   ========================================================================== */

@media (min-width: 100rem) {

    .card-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }
}


/* ==========================================================================
   47. MOBILE SAFETY
   ========================================================================== */

@media (max-width: 47.999rem) {

    .header-row {
        flex-wrap: wrap;
    }

    .header-left,
    .header-center,
    .header-right {
        flex: 1 1 100%;
    }

    .header-right {
        justify-content: flex-start;
    }

    .toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        flex: 1 1 auto;
    }

    .toolbar-right {
        justify-content: flex-start;
    }

    .search-row {
        flex-direction: column;
    }

    .search-field,
    .search-location,
    .search-action {
        width: 100%;
        flex: 1 1 auto;
    }

    .sticky-sidebar,
    .results-sidebar,
    .detail-sidebar,
    .account-sidebar,
    .enquiry-sidebar,
    .quote-sidebar,
    .checkout-summary {
        position: static;
    }

    .map-results-layout {
        display: flex;
        flex-direction: column;
    }

    .map-panel {
        order: 1;
    }

    .map-results {
        order: 2;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   48. PRINT
   ========================================================================== */

@media print {

    .sticky-header,
    .sticky-sidebar {
        position: static;
    }

    .layout-with-sidebar,
    .layout-two-column,
    .results-layout,
    .search-results-layout,
    .detail-layout,
    .account-layout,
    .enquiry-layout,
    .quote-layout,
    .checkout-layout,
    .map-results-layout {
        display: block;
    }

    .layout-sidebar,
    .results-sidebar,
    .detail-sidebar,
    .account-sidebar,
    .enquiry-sidebar,
    .quote-sidebar,
    .checkout-summary {
        width: 100%;
        margin-top: 1rem;
    }
}


/* ==========================================================================
   49. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .sticky-header,
    .sticky-sidebar {
        scroll-behavior: auto;
    }
}


/* ==========================================================================
   50. RTL SUPPORT
   ========================================================================== */

[dir="rtl"] .header-right {
    justify-content: flex-start;
}

[dir="rtl"] .toolbar-right {
    justify-content: flex-start;
}


/* ==========================================================================
   END OF FILE
   ========================================================================== */