/* ============================================================
   MORETECH ERP — LAYOUT SYSTEM (STANDARD v1)
   File: erp_layout.css
   Purpose:
   - Page height & scroll control
   - Canvas / surface hierarchy
   - Consistent spacing system
   - Foundation for all modules
============================================================ */


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

html,
body {
    height: 100%;
}

/*
  Global scroll allowed only on body.
  Prevent nested scroll containers unless explicitly needed.
*/
body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;

    background-color: #f4f6f8; /* Neutral ERP background */
    color: var(--erp-text-dark);
}


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

/*
  erp-body wraps everything BELOW the navbar.
  Navbar height is NOT hardcoded anymore.
*/
.erp-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*
  Main content area grows naturally.
  Footer (if any) sticks to bottom.
*/
.erp-content {
    flex: 1 1 auto;
    display: block;
}


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


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

/*
  erp-page is the main horizontal constraint.
  It defines readable width and outer spacing.
*/
.erp-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 28px 40px;
}

/*
  Primary white surface (canvas).
  This replaces AdminLTE .content safely.
*/
.erp-page > .content,
.erp-page-canvas {
    background: #ffffff;
    border-radius: 16px;

    padding: 28px 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}


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

/*
  Used for titles, breadcrumbs, action bars.
*/
.erp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 16px;
    margin-bottom: 24px;

    border-bottom: 1px solid var(--erp-border-light);
}

/*
  Title inside page header
*/
.erp-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--erp-text-dark);
}

/*
  Subtitle / helper text
*/
.erp-page-subtitle {
    font-size: 0.9rem;
    color: var(--erp-text-light);
    margin-top: 4px;
}


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

/*
  Use these helpers instead of random margins.
*/
.erp-section {
    margin-bottom: 32px;
}

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

.erp-section-lg {
    margin-bottom: 48px;
}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 992px) {

    .erp-page {
        padding: 20px 18px 32px;
    }

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

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


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 576px) {

    .erp-page {
        padding: 16px 14px 28px;
    }

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

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

    .erp-page-title {
        font-size: 1.05rem;
    }
}
/* =====================================================
   ERP DASHBOARD LAYOUT (FULL WIDTH)
===================================================== */
.erp-dashboard {
    width: 100%;
    padding: 24px 28px;
}

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

/* Keep content breathing on ultra-wide screens */
@media (min-width: 1600px) {
    .erp-dashboard {
        padding-left: 48px;
        padding-right: 48px;
    }
}