/* ============================================================
   MORETECH ERP — LAYOUT SYSTEM
   File: erp_layout.css
   Version: v2026.7
   Architecture: Mobile-First
   Purpose:
   - Page height & scroll control
   - Canvas / surface hierarchy
   - Consistent spacing system
   - Foundation for all modules
============================================================ */


/* ============================================================
   GLOBAL HEIGHT & SCROLL RULES
============================================================ */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--erp-bg-app, #f4f6f8);
    color: var(--erp-text-dark);
}


/* ============================================================
   ERP BODY WRAPPER (UNDER NAVBAR)
============================================================ */

.erp-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.erp-content {
    flex: 1 1 auto;
    display: block;
}

/* Prevent scroll traps */
.erp-body,
.erp-tab-card {
    overflow: visible;
}


/* ============================================================
   PAGE WIDTH & CANVAS SYSTEM
============================================================ */

.erp-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--erp-space-lg, 24px) var(--erp-space-lg, 24px) var(--erp-space-xl, 40px);
}

/* Primary white canvas surface */
.erp-page > .content,
.erp-page-canvas {
    background: var(--erp-bg-white, #ffffff);
    border-radius: var(--erp-radius-lg, 16px);
    padding: var(--erp-space-lg, 24px) 28px;
    box-shadow: var(--erp-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.06));
}


/* ============================================================
   PAGE HEADER SYSTEM
============================================================ */

.erp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-md, 16px);
    padding-bottom: var(--erp-space-md, 16px);
    margin-bottom: var(--erp-space-lg, 24px);
    border-bottom: 1px solid var(--erp-border-light);
}

.erp-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--erp-text-dark);
    margin: 0;
}

.erp-page-subtitle {
    font-size: 0.88rem;
    color: var(--erp-text-light);
    margin-top: var(--erp-space-xs, 4px);
}


/* ============================================================
   SPACING RHYTHM (VERTICAL CONSISTENCY)
============================================================ */

.erp-section {
    margin-bottom: var(--erp-space-xl, 32px);
}

.erp-section-sm {
    margin-bottom: 20px;
}

.erp-section-lg {
    margin-bottom: var(--erp-space-2xl, 48px);
}


/* ============================================================
   DASHBOARD LAYOUT (FULL WIDTH)
============================================================ */

.erp-dashboard {
    width: 100%;
    padding: var(--erp-space-lg, 24px) 28px;
}

.erp-dashboard-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* ============================================================
   RESPONSIVE — TABLET (≤ 992px)
============================================================ */

@media (max-width: 992px) {
    .erp-page {
        padding: 20px 18px var(--erp-space-xl, 32px);
    }

    .erp-page > .content,
    .erp-page-canvas {
        padding: 20px 18px;
        border-radius: 14px;
    }

    .erp-page-title {
        font-size: 1.15rem;
    }

    .erp-dashboard {
        padding: 20px 18px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤ 576px)
============================================================ */

@media (max-width: 576px) {
    .erp-page {
        padding: 14px 12px 24px;
    }

    .erp-page > .content,
    .erp-page-canvas {
        padding: var(--erp-space-md, 16px) 14px;
        border-radius: var(--erp-radius, 12px);
    }

    .erp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--erp-space-sm, 8px);
    }

    .erp-page-title {
        font-size: 1.05rem;
    }

    .erp-page-subtitle {
        font-size: 0.82rem;
    }

    .erp-dashboard {
        padding: var(--erp-space-md, 16px) 12px;
    }
}


/* ============================================================
   ULTRA-WIDE (≥ 1600px)
============================================================ */

@media (min-width: 1600px) {
    .erp-dashboard {
        padding-left: var(--erp-space-2xl, 48px);
        padding-right: var(--erp-space-2xl, 48px);
    }
}