/*Purpose
=================
Fixed header
Content offset
Sidebar + main shell
Responsive behavior*/

/* =====================================================
   COMMON CREATE / ADD BUTTON  (LOCKED)
   Used across all Index pages
===================================================== */
/* =====================================================
   COMMON CREATE BUTTON (LOCKED)
===================================================== */
/* already existing */
.btn-create {
    background: #e9f4ff;
    border: 1px solid #4aa3ff;
    color: #0b5ed7;
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 6px;
}

/* missing anchor binding */
.header-action-left a.btn-create {
    display: inline-flex;
    text-decoration: none;
}

    .header-action-left a.btn-create:hover {
        background: #4aa3ff;
        color: #fff;
    }

/* ===============================
   ERP LOGO
================================ */

.erp-logo {
    height: 40px;
    width: 40px;
    margin-right: 10px;
}

.erp-logo-text {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* Align logo + text */
.erp-topbar-left {
    display: flex;
    align-items: center;
}

/* ===============================
   ERP LAYOUT STRUCTURE
   =============================== */
/* ---- FIXED HEADER ---- */

/* ---- HEADER LEFT ---- */
.erp-company {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.erp-branch {
    font-size: 11px;
    opacity: .85;
}

/* ---- HEADER RIGHT ---- */
.erp-brand {
    text-align: right;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(0,0,0,.25);
}

.erp-module {
    font-size: 12px;
    opacity: .85;
}

/* ---- BODY OFFSET ---- */
.erp-content {
    padding-top: 64px;
    min-height: calc(100vh - 64px);
}

/* ---- SHELL ---- */
.erp-shell {
    display: flex;
    flex: 1;
    height: calc(100vh - 64px);
    min-height: 0; /* VERY IMPORTANT for flex scroll */
    margin-top: 60px; /* 👈 THIS FIX */
}

/* ---- SIDEBAR ---- */
.erp-sidebar {
    width: 240px;
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
}

/* ---- MAIN ---- */
.erp-main {
    flex: 1;
    background-color: #ffffff;
    padding: 16px;
    overflow-y: auto;
    min-height: 0;
}

/* ---- FOOTER ---- */
.erp-footer {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: #ffffff;
    border-top: 1px solid var(--border-light);
    color: #555;
}


/* ===============================
   RESPONSIVE – LAYOUT
   =============================== */

@media (max-width: 768px) {

    .erp-sidebar {
        width: 200px;
    }
}
/* =====================================================
   11. TOP BAR (LAYOUT EXTENSION)
   ===================================================== */

.erp-topbar {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: linear-gradient( to right, var(--primary-start), var(--primary-mid), var(--primary-end) );
    color: #ffffff;
    font-size: 12px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.erp-topbar-left {
    font-size: 22px;
    min-width: 140px;
    font-weight: 600;
}

.erp-topbar-center {
    flex: 1;
    font-size: 14px;
    text-align: center;
    font-weight: 600;
}

.erp-topbar-right {
    font-size:12px;
    min-width: 200px;
    text-align: right;
    opacity: 0.9;
}

/* =====================================================
   13. TEMP DATA ALERTS (GLOBAL)
   ===================================================== */

.erp-alert {
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.erp-alert-success {
    background: #e6f4ea;
    color: #0f5132;
    border-left: 4px solid #198754;
}

.erp-alert-error {
    background: #fdecea;
    color: #842029;
    border-left: 4px solid #dc3545;
}

.erp-alert-warning {
    background: #fff4e5;
    color: #664d03;
    border-left: 4px solid #ffc107;
}

/* Group title */
.erp-menu-group {
    margin-bottom: 16px;
}

.erp-menu-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #475569; /* slate */
    text-transform: uppercase;
    padding: 8px 12px;
    letter-spacing: .5px;
}

/* Menu list */
.erp-menu-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
    .erp-menu-list li {
        margin: 0;
    }

/* Menu link */
.erp-menu-link {
    display: block;
    padding: 9px 14px;
    font-size: 13.5px;
    color: #1f2937; /* dark slate */
    text-decoration: none;
    border-radius: 6px;
    margin: 2px 6px;
    padding-left: 22px;
    transition: all 0.15s ease-in-out;
}

    /* Hover */
    .erp-menu-link:hover {
        background: #eef2ff;
        border-left-color: #93c5fd;
    }

    /* Active (prepare for next step) */
    .erp-menu-link.active {
        background: #2563eb;
        color: #ffffff;
        border-left-color: #1e40af;
    }
/* =====================================================
   ERP ACCORDION MENU
   ===================================================== */

/* Group header */
.erp-menu-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

    .erp-menu-group-header:hover {
        background: #e5e7eb;
    }

/* Arrow icon */
.erp-menu-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

/* Menu list hidden by default */
.erp-menu-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Expanded state */
.erp-menu-group.open .erp-menu-list {
    display: block;
}

.erp-menu-group.open .erp-menu-arrow {
    transform: rotate(90deg); /* ▶ → ▼ */
}
/* =====================================================
   FINAL BULLET KILL SWITCH (DO NOT MOVE)
   ===================================================== */

.erp-sidebar ul,
.erp-sidebar li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .erp-sidebar li::marker {
        content: none !important;
    }

/* ================================
   ERP CREATE / EDIT FORM STANDARD
   ================================ */

/* ===== ERP FORM GRID (LOCKED) ===== */

.form-container {
    padding: 20px;
}

/* Right column container */
.erp-field {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap; /* 🔑 prevents breaking */
}

    /* Labels */
    .form-row label {
        font-weight: 500;
        margin-bottom: 0;
    }

    /* Inputs */
    .form-row .form-control {
        height: 32px;
    }

    /* Checkbox row fix */
    .form-row input[type="checkbox"] {
        width: 40px;
        height: auto;
    }

/* Action buttons align with inputs */
.form-actions {
    margin-left: 172px; /* label width + gap */
    margin-top: 10px;
    display: flex;
    gap: 10px;
}
/* ================================
   ERP CREATE / EDIT FORM STANDARD
   (LOCKED)
   ================================ */

.erp-form {
    padding: 20px;
}

.erp-form-row {
    display: grid;
    /*grid-template-columns: 160px 200px 1fr;*/
    align-items: center;
    column-gap: 12px;
    margin-bottom: 12px;
}
    .erp-form-row label:first-child {
        width: 160px; /* Fixed label width */
        flex-shrink: 0;
        font-weight: 500;
    }

    .erp-form-row .erp-input,
    .erp-form-row .erp-select {
        width: 200px; /* Fixed input width */
    }

.erp-form-actions {
    margin-left: 160px;
}


    .erp-form-row label {
        font-weight: 500;
        margin-bottom: 0;
    }

    .erp-form-row .form-control {
        height: 24px;
    }

    .erp-form-row input[type="checkbox"] {
        width: 40px;
        height: auto;
    }

.erp-form-actions {
    display: flex;
    justify-content: flex-start;
    margin-left: 180px; /* must match label width */
    margin-top: 12px;
}


/* ===============================
   ERP GRID ACTION BUTTONS
   =============================== */

.erp-grid-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

    .erp-grid-actions form {
        margin: 0;
    }


/* Fixed label */
.erp-label {
    width: 160px;
    flex-shrink: 0;
}

/* Width helpers */
.input-sm {
    width: 100px;
}

.input-md {
    width: 200px;
}

.input-lg {
    width: 300px;
}


/* ===== ERP INPUT ENHANCEMENT ===== */
.erp-input,
.erp-textarea,
.erp-select {
    height: 34px;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #bfc7d1;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.erp-textarea {
    height: auto;
    min-height: 34px;
}

    .erp-input:focus,
    .erp-textarea:focus,
    .erp-select:focus {
        border-color: #2f80ed;
        box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.15);
        outline: none;
    }
.erp-form-row.erp-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

/* Search */
.erp-filter-row .erp-search {
    width: 220px;
}

/* Dates */
.erp-filter-row .erp-date {
    width: 120px;
}

/* Button */
.erp-filter-row .btn {
    white-space: nowrap;
}