/* =======================================================
   ProperApp Core — Layout
   Structural layout only (no theme or component styling)
   ======================================================= */

/* -------------------------------------------------------
   Host theme reset (WordPress / themes)
   ------------------------------------------------------- */
#properapp-user-app .container,
#properapp-user-app [class*="max-w-"],
#properapp-user-app .mx-auto {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#properapp-user-app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* -------------------------------------------------------
   App shell
   ------------------------------------------------------- */
#properapp-user-app .pa-app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Sidebar + main row */
#properapp-user-app .pa-app > .pa-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Main scroll container */
#properapp-user-app main.pa-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
}

/* -------------------------------------------------------
   Content layout system
   ------------------------------------------------------- */
.pa-page {
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--pa-spacing) * 2);
}

.pa-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(var(--pa-spacing) * 2);
}

.pa-col {
    padding: calc(var(--pa-spacing));
}

.pa-col-12 { width: 100%; }
.pa-col-6  { width: 50%; }
.pa-col-4  { width: 33.333%; }
.pa-col-3  { width: 25%; }

/* Responsive columns */
@media (max-width: 768px) {
    .pa-col-6,
    .pa-col-4,
    .pa-col-3 {
        width: 100%;
    }
}

/* -------------------------------------------------------
   Sidebar layout (structure only)
   ------------------------------------------------------- */
.pa-sidebar {
    width: 14rem;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pa-sidebar-header {
    display: flex;
    justify-content: center;
}

.pa-sidebar-nav {
    display: flex;
    flex-direction: column;
}

.pa-sidebar-footer {
    margin-top: auto;
}

/* -------------------------------------------------------
   Utility layout helpers
   ------------------------------------------------------- */
.pa-main {
    min-width: 0;
}

.pa-block {
    margin-bottom: calc(var(--pa-spacing) * 1.5);
}