/* =========================================================
   WONDER APP - VENDOR APPLICATION
   File: /vendor_app/assets/css/layout.css
   Purpose: Global application layout and structural styling
   ========================================================= */


/* =========================================================
   1. ROOT APPLICATION LAYOUT
   ========================================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

.vendor-app-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}


/* =========================================================
   2. APPLICATION SHELL
   ========================================================= */

.app-shell {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}


/*
 * Main application wrapper.
 * Header/topbar and content normally live here.
 */

.app-main,
.main-app,
.application-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}


/* =========================================================
   3. HEADER / TOPBAR SPACE
   ========================================================= */

.app-content-wrapper,
.content-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

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


/* =========================================================
   4. PAGE CONTENT
   ========================================================= */

.page-content,
.main-content {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: var(--space-6, 24px);
}

.page-container,
.content-container {
    width: 100%;
    max-width: var(--container-max-width, 1600px);
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   5. PAGE HEADER
   ========================================================= */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5, 20px);
    width: 100%;
    margin-bottom: var(--space-6, 24px);
}

.page-header-content {
    flex: 1 1 auto;
    min-width: 0;
}

.page-header-title {
    margin: 0;
}

.page-header-description {
    margin-top: var(--space-2, 8px);
}

.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    flex: 0 0 auto;
}


/* =========================================================
   6. PAGE BODY
   ========================================================= */

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

.page-section {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-6, 24px);
}

.page-section:last-child {
    margin-bottom: 0;
}


/* =========================================================
   7. GENERIC CONTENT GRID
   ========================================================= */

.content-grid {
    display: grid;
    width: 100%;
    gap: var(--space-5, 20px);
}

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

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

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

.content-grid-auto {
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 280px), 1fr)
    );
}


/* =========================================================
   8. FLEX UTILITIES
   ========================================================= */

.layout-row {
    display: flex;
    flex-direction: row;
}

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

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

.layout-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layout-start {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.layout-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.layout-wrap {
    flex-wrap: wrap;
}

.layout-gap-1 {
    gap: var(--space-1, 4px);
}

.layout-gap-2 {
    gap: var(--space-2, 8px);
}

.layout-gap-3 {
    gap: var(--space-3, 12px);
}

.layout-gap-4 {
    gap: var(--space-4, 16px);
}

.layout-gap-5 {
    gap: var(--space-5, 20px);
}

.layout-gap-6 {
    gap: var(--space-6, 24px);
}

.layout-gap-8 {
    gap: var(--space-8, 32px);
}


/* =========================================================
   9. WIDTH / HEIGHT HELPERS
   ========================================================= */

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
    min-height: 100dvh;
}

.min-w-0 {
    min-width: 0;
}


/* =========================================================
   10. SIDEBAR + MAIN CONTENT STRUCTURE
   ========================================================= */

.app-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.app-layout-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}


/*
 * When sidebar is fixed, content should remain independent
 * of sidebar width. sidebar.css controls actual sidebar width.
 */

.has-sidebar {
    position: relative;
    width: 100%;
}

.has-sidebar .app-layout-main {
    width: calc(100% - var(--sidebar-width, 260px));
    margin-left: var(--sidebar-width, 260px);
}


/* =========================================================
   11. FIXED SIDEBAR COMPATIBILITY
   ========================================================= */

.layout-sidebar-fixed .app-layout-main {
    margin-left: var(--sidebar-width, 260px);
}

.layout-sidebar-collapsed .app-layout-main {
    margin-left: var(--sidebar-collapsed-width, 76px);
}


/* =========================================================
   12. MAIN CONTENT SCROLLING
   ========================================================= */

.main-scroll-area {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.app-scroll-container {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}


/* =========================================================
   13. DASHBOARD LAYOUT
   ========================================================= */

.dashboard-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: var(--space-6, 24px);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5, 20px);
    width: 100%;
}

.dashboard-full {
    grid-column: 1 / -1;
}

.dashboard-half {
    grid-column: span 6;
}

.dashboard-third {
    grid-column: span 4;
}

.dashboard-quarter {
    grid-column: span 3;
}

.dashboard-two-thirds {
    grid-column: span 8;
}


/* =========================================================
   14. STATS / SUMMARY LAYOUT
   ========================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4, 16px);
    width: 100%;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 220px), 1fr)
    );
    gap: var(--space-4, 16px);
    width: 100%;
}


/* =========================================================
   15. TWO COLUMN CONTENT
   ========================================================= */

.two-column-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-6, 24px);
    width: 100%;
}

.two-column-equal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6, 24px);
    width: 100%;
}


/* =========================================================
   16. THREE COLUMN CONTENT
   ========================================================= */

.three-column-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5, 20px);
    width: 100%;
}


/* =========================================================
   17. SECTION HEADER
   ========================================================= */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    width: 100%;
    margin-bottom: var(--space-4, 16px);
}

.section-header-content {
    min-width: 0;
    flex: 1 1 auto;
}

.section-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}


/* =========================================================
   18. TOOLBAR
   ========================================================= */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    width: 100%;
    margin-bottom: var(--space-5, 20px);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}

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

.toolbar-right {
    justify-content: flex-end;
    margin-left: auto;
}


/* =========================================================
   19. FILTER BAR
   ========================================================= */

.filter-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    width: 100%;
    margin-bottom: var(--space-5, 20px);
}

.filter-item {
    min-width: 180px;
    flex: 0 1 auto;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}


/* =========================================================
   20. SPLIT PANEL
   ========================================================= */

.split-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 500px;
}

.split-sidebar {
    min-width: 0;
}

.split-content {
    min-width: 0;
}


/* =========================================================
   21. DETAIL PAGE LAYOUT
   ========================================================= */

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--space-6, 24px);
    width: 100%;
}

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

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


/* =========================================================
   22. FORM PAGE LAYOUT
   ========================================================= */

.form-layout {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.form-layout-wide {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   23. EMPTY / LOADING / ERROR AREA
   ========================================================= */

.state-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    padding: var(--space-8, 32px);
}

.loading-container {
    position: relative;
    width: 100%;
}

.error-container {
    width: 100%;
}

.empty-container {
    width: 100%;
}


/* =========================================================
   24. OVERLAY LAYER
   ========================================================= */

.app-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 1000);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.app-overlay.is-active,
.app-overlay.active,
.app-overlay[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


/* =========================================================
   25. DRAWER / OFFCANVAS
   ========================================================= */

.offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: var(--z-drawer, 1100);
    width: min(90vw, 400px);
    max-width: 100%;
    background: var(--color-surface, #ffffff);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.offcanvas-left {
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.offcanvas-right {
    right: 0;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.offcanvas.is-open,
.offcanvas.open,
.offcanvas[aria-hidden="false"] {
    transform: translateX(0);
}


/* =========================================================
   26. MODAL POSITIONING SUPPORT
   ========================================================= */

.modal-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1200);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-4, 16px);
    pointer-events: none;
}

.modal-root.is-open,
.modal-root.open,
.modal-root[aria-hidden="false"] {
    pointer-events: auto;
}


/* =========================================================
   27. DROPDOWN / POPOVER LAYER
   ========================================================= */

.popover-container {
    position: relative;
}

.dropdown-menu,
.popover {
    position: absolute;
    z-index: var(--z-dropdown, 1000);
    min-width: 180px;
    max-width: min(360px, calc(100vw - 32px));
}


/* =========================================================
   28. STICKY ELEMENTS
   ========================================================= */

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

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


/* =========================================================
   29. FOOTER
   ========================================================= */

.app-footer,
.page-footer {
    width: 100%;
    margin-top: auto;
}

.footer-inner {
    width: 100%;
    max-width: var(--container-max-width, 1600px);
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   30. VISIBILITY HELPERS
   ========================================================= */

.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.is-invisible {
    visibility: hidden !important;
}

.is-visible-flex {
    display: flex !important;
}

.is-visible-grid {
    display: grid !important;
}


/* =========================================================
   31. OVERFLOW HELPERS
   ========================================================= */

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}


/* =========================================================
   32. POSITION HELPERS
   ========================================================= */

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}


/* =========================================================
   33. Z-INDEX HELPERS
   ========================================================= */

.z-dropdown {
    z-index: var(--z-dropdown, 1000);
}

.z-sticky {
    z-index: var(--z-sticky, 500);
}

.z-header {
    z-index: var(--z-header, 900);
}

.z-overlay {
    z-index: var(--z-overlay, 1000);
}

.z-drawer {
    z-index: var(--z-drawer, 1100);
}

.z-modal {
    z-index: var(--z-modal, 1200);
}

.z-toast {
    z-index: var(--z-toast, 1300);
}


/* =========================================================
   34. RESPONSIVE - LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .page-content,
    .main-content {
        padding: var(--space-5, 20px);
    }

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

    .dashboard-quarter {
        grid-column: span 4;
    }

    .dashboard-third {
        grid-column: span 6;
    }

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

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

    .detail-sidebar {
        order: 2;
    }

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


/* =========================================================
   35. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 992px) {

    .has-sidebar .app-layout-main,
    .layout-sidebar-fixed .app-layout-main,
    .layout-sidebar-collapsed .app-layout-main {
        width: 100%;
        margin-left: 0;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

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

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

    .dashboard-full {
        grid-column: 1 / -1;
    }

    .dashboard-half {
        grid-column: span 6;
    }

    .dashboard-third {
        grid-column: span 3;
    }

    .dashboard-quarter {
        grid-column: span 3;
    }

    .dashboard-two-thirds {
        grid-column: span 6;
    }

    .split-layout {
        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    }

    .two-column-equal {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   36. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .page-content,
    .main-content {
        padding: var(--space-4, 16px);
    }

    .page-header {
        gap: var(--space-4, 16px);
        margin-bottom: var(--space-5, 20px);
    }

    .page-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions > * {
        width: 100%;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

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

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        margin-left: 0;
    }

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

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

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

    .filter-actions {
        width: 100%;
    }

    .filter-actions > * {
        flex: 1 1 auto;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .content-grid-2,
    .content-grid-3,
    .content-grid-4,
    .three-column-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-full,
    .dashboard-half,
    .dashboard-third,
    .dashboard-quarter,
    .dashboard-two-thirds {
        grid-column: 1 / -1;
    }

    .split-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .split-sidebar {
        width: 100%;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .state-container {
        min-height: 200px;
        padding: var(--space-6, 24px);
    }
}


/* =========================================================
   37. RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .page-content,
    .main-content {
        padding: var(--space-3, 12px);
    }

    .page-header {
        margin-bottom: var(--space-4, 16px);
    }

    .page-header-actions,
    .section-header-actions,
    .toolbar-left,
    .toolbar-right,
    .filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions > *,
    .section-header-actions > *,
    .toolbar-left > *,
    .toolbar-right > *,
    .filter-actions > * {
        width: 100%;
    }

    .offcanvas {
        width: min(92vw, 360px);
    }

    .modal-root {
        padding: var(--space-3, 12px);
    }
}


/* =========================================================
   38. REDUCED MOTION
   ========================================================= */

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

    .app-overlay,
    .offcanvas,
    .offcanvas-left,
    .offcanvas-right {
        transition: none;
    }
}


/* =========================================================
   END OF layout.css
   ========================================================= */