:root {

    --erp-primary: #5b50f5;
    --erp-primary-dark: #4b42dc;

    --erp-sidebar-width: 250px;
    --erp-sidebar-collapsed-width: 72px;

    --erp-navbar-height: 70px;

    --erp-bg: #f5f6fa;
    --erp-card: #ffffff;
    --erp-border: #e9eaf0;

    --erp-text: #1f2937;
    --erp-muted: #7b8496;

    --erp-success: #20b486;
    --erp-danger: #ef476f;
    --erp-warning: #f4b400;
    --erp-info: #2196f3;

    --erp-radius: 12px;

    --erp-shadow:
        0 2px 12px rgba(30, 35, 50, 0.05);

}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        var(--erp-bg);

    color:
        var(--erp-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;

}


/* =========================================================
   APP
========================================================= */

.erp-app {

    min-height: 100vh;

}


/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

.erp-sidebar {

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width:
        var(--erp-sidebar-width);

    background:
        var(--erp-primary);

    color: #fff;

    z-index: 1040;

    overflow: hidden;

    transition:
        width 0.25s ease;

}


/* =========================================================
   COLLAPSED SIDEBAR
========================================================= */

.erp-app.sidebar-collapsed
.erp-sidebar {

    width:
        var(--erp-sidebar-collapsed-width);

}


/* =========================================================
   BRAND
========================================================= */

.erp-brand {

    height:
        var(--erp-navbar-height);

    display: flex;

    align-items: center;

    padding:
        0 18px;

    white-space: nowrap;

    border-bottom:
        1px solid
        rgba(255,255,255,0.12);

}


.erp-brand-logo {

    width: 36px;

    min-width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    color:
        var(--erp-primary);

    border-radius: 9px;

    font-weight: 700;

}


.erp-brand-name {

    margin-left: 10px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

}


@media (min-width: 992px) {

    .erp-app.sidebar-collapsed
    .erp-sidebar
    .erp-brand-name {

        opacity: 0;

        visibility: hidden;

    }

}


/* =========================================================
   SIDEBAR NAV
========================================================= */

.erp-sidebar-nav {

    height:
        calc(
            100vh -
            var(--erp-navbar-height)
        );

    padding:
        12px 9px 82px;

    overflow-y: auto;

    overflow-x: hidden;

}


.erp-sidebar-nav::-webkit-scrollbar {

    width: 5px;

}


.erp-sidebar-nav::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,0.25);

    border-radius: 10px;

}


/* =========================================================
   NAV ITEM
========================================================= */

.erp-nav-item {

    position: relative;

    height: 44px;

    display: flex;

    align-items: center;

    padding:
        0 13px;

    margin-bottom: 4px;

    border-radius: 9px;

    color:
        rgba(255,255,255,0.90);

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.erp-nav-item:hover,
.erp-nav-item.active {

    background:
        rgba(255,255,255,0.16);

    color: #fff;

}


/* =========================================================
   NAV ICON
========================================================= */

.erp-nav-icon {

    width: 28px;

    min-width: 28px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-size: 16px;

    line-height: 1;

}


.erp-nav-label {

    margin-left: 8px;

    white-space: nowrap;

    overflow: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

}


.erp-nav-arrow {

    margin-left: auto;

    font-size: 11px;

    opacity: 0.7;

    transition:
        opacity 0.2s ease;

}


@media (min-width: 992px) {

    .erp-app.sidebar-collapsed
    .erp-sidebar
    .erp-nav-label {

        opacity: 0;

        visibility: hidden;

    }


    .erp-app.sidebar-collapsed
    .erp-sidebar
    .erp-nav-arrow {

        opacity: 0;

        visibility: hidden;

    }


    .erp-app.sidebar-collapsed
    .erp-nav-item {

        justify-content: center;

        padding:
            0 8px;

    }

}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.erp-sidebar-footer {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 70px;

    padding:
        12px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(0,0,0,0.08);

    border-top:
        1px solid
        rgba(255,255,255,0.12);

}


.erp-package-info {

    display: flex;

    flex-direction: column;

    color: #fff;

}


.erp-package-info small {

    font-size: 10px;

    opacity: 0.75;

}


.erp-package-info strong {

    font-size: 13px;

    margin-top: 2px;

}


.erp-subscribe-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        6px 13px;

    background: #fff;

    color:
        var(--erp-primary);

    border-radius: 20px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

}


.erp-subscribe-btn:hover {

    background:
        #f2f2ff;

    color:
        var(--erp-primary-dark);

}


@media (min-width: 992px) {

    .erp-app.sidebar-collapsed
    .erp-sidebar-footer {

        justify-content: center;

        padding:
            10px 5px;

    }


    .erp-app.sidebar-collapsed
    .erp-package-info,
    .erp-app.sidebar-collapsed
    .erp-subscribe-btn {

        display: none;

    }

}


/* =========================================================
   MAIN
========================================================= */

.erp-main {

    min-height: 100vh;

    min-width: 0;

    margin-left:
        var(--erp-sidebar-width);

    transition:
        margin-left 0.25s ease;

}


.erp-app.sidebar-collapsed
.erp-main {

    margin-left:
        var(--erp-sidebar-collapsed-width);

}


/* =========================================================
   NAVBAR
========================================================= */

.erp-navbar {

    height:
        var(--erp-navbar-height);

    position: sticky;

    top: 0;

    background: #fff;

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

    z-index: 1030;

    display: flex;

    align-items: center;

}


.erp-navbar-title {

    font-size: 19px;

    font-weight: 600;

    white-space: nowrap;

}


.erp-navbar-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =========================================================
   SIDEBAR TOGGLE
========================================================= */

.erp-sidebar-toggle {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--erp-border);

    background: #fff;

    color:
        var(--erp-text);

    border-radius: 8px;

    font-size: 19px;

    line-height: 1;

}


.erp-sidebar-toggle:hover {

    background:
        #f5f6fa;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.erp-mobile-menu-btn {

    display: none;

    width: 40px;

    height: 40px;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--erp-border);

    border-radius: 8px;

}


/* =========================================================
   TOP BUTTONS
========================================================= */

.erp-top-btn {

    border: 0;

    border-radius: 20px;

    padding:
        7px 15px;

    font-size: 12px;

    font-weight: 600;

}


.erp-purchase-btn {

    background:
        #6257f6;

    color: #fff;

}


.erp-purchase-btn:hover {

    background:
        #5146df;

    color: #fff;

}


.erp-sales-btn {

    background:
        #13b8df;

    color: #fff;

}


.erp-sales-btn:hover {

    background:
        #0da7cb;

    color: #fff;

}


/* =========================================================
   ICON BUTTON
========================================================= */

.erp-icon-btn {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--erp-border);

    border-radius: 50%;

    background: #fff;

}


.erp-icon-btn:hover {

    background:
        #f5f6fa;

}


/* =========================================================
   USER
========================================================= */

.erp-user-btn {

    min-height: 40px;

    padding:
        3px 7px 3px 4px;

    border:
        1px solid
        var(--erp-border);

    border-radius: 22px;

    background: #fff;

}


.erp-user-btn:hover {

    background:
        #f5f6fa;

}


.erp-user-avatar {

    width: 34px;

    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #e9e7ff;

    color:
        var(--erp-primary);

    font-weight: 700;

    font-size: 14px;

}


/* =========================================================
   DROPDOWN
========================================================= */

.erp-navbar .dropdown-menu {

    min-width: 210px;

    border:
        1px solid
        var(--erp-border);

    border-radius: 10px;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.08);

}


.erp-navbar .dropdown-item {

    padding:
        9px 14px;

    font-size: 13px;

}


.erp-navbar .dropdown-item:hover {

    background:
        #f5f6fa;

}


/* =========================================================
   CONTENT
========================================================= */

.erp-content {

    min-width: 0;

    padding: 22px;

}


/* =========================================================
   CARD
========================================================= */

.erp-card {

    background:
        var(--erp-card);

    border: 0;

    border-radius:
        var(--erp-radius);

    box-shadow:
        var(--erp-shadow);

}


/* =========================================================
   STATISTICS GRID
========================================================= */

.erp-stat-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 14px;

    margin-bottom: 18px;

}


.erp-stat {

    min-height: 138px;

    padding: 20px;

    background: #fff;

    border-radius:
        var(--erp-radius);

    box-shadow:
        var(--erp-shadow);

}


.erp-stat-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.erp-stat-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        #eef0ff;

    color:
        var(--erp-primary);

    font-size: 18px;

}


.erp-stat-label {

    color:
        var(--erp-muted);

    font-size: 13px;

}


.erp-stat-value {

    margin-top: 12px;

    font-size: 22px;

    font-weight: 700;

}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.erp-dashboard-grid {

    display: grid;

    grid-template-columns:
        minmax(0,2fr)
        minmax(280px,1fr);

    gap: 18px;

}


.erp-stack {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


/* =========================================================
   BALANCE
========================================================= */

.erp-balance {

    background:
        linear-gradient(
            135deg,
            #6257f6,
            #5146df
        );

    color: #fff;

    border-radius:
        var(--erp-radius);

    padding: 24px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    margin-bottom: 18px;

}


.erp-balance-column
+ .erp-balance-column {

    border-left:
        1px solid
        rgba(255,255,255,0.25);

    padding-left: 22px;

}


.erp-balance-title {

    font-size: 15px;

    font-weight: 600;

}


.erp-balance-subtitle {

    margin-top: 6px;

    font-size: 12px;

    opacity: 0.8;

}


.erp-balance-value {

    display: inline-block;

    margin-top: 16px;

    padding:
        9px 15px;

    background: #fff;

    color:
        var(--erp-text);

    border-radius: 8px;

    font-weight: 700;

}

.erp-stat-icon {
    flex-shrink: 0;
}

.erp-stat-value {
    white-space: nowrap;
}

.erp-card {
    overflow: hidden;
}

.erp-card h6 {
    font-weight: 600;
}

.erp-card .btn-light {
    border: 1px solid var(--erp-border);
}

.erp-card .btn-light:hover {
    background: #f5f6fa;
}

/* =========================================================
   TABLE
========================================================= */

.erp-table-wrapper {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}


.erp-table {

    width: 100%;

    min-width: 600px;

    border-collapse: collapse;

}


.erp-table th,
.erp-table td {

    padding:
        13px 8px;

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

    text-align: left;

}


.erp-table th {

    color:
        var(--erp-muted);

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

}


/* =========================================================
   FOOTER
========================================================= */

.erp-footer {

    position: fixed;

    left: 0;
    bottom: 0;

    width:
        var(--erp-sidebar-width);

    min-height: auto;

    padding:
        12px 16px 14px;

    background:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 100%);

    border-top:
        1px solid
        rgba(255,255,255,0.16);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

    color:
        rgba(255,255,255,0.86);

    font-size: 12px;

    z-index: 1041;

}


.erp-footer .ms-auto {

    margin-left: 0 !important;

    opacity: 0.78;

    font-size: 11px;

}


.erp-app.sidebar-collapsed
.erp-footer {

    width:
        var(--erp-sidebar-collapsed-width);

    padding:
        10px 8px 12px;

    align-items: center;

    text-align: center;

}


.erp-app.sidebar-collapsed
.erp-footer span {

    display: block;

    width: 100%;

    line-height: 1.25;

}


/* =========================================================
   MOBILE OFFCANVAS
========================================================= */

.erp-mobile-sidebar {

    width: 280px !important;

    background:
        var(--erp-primary) !important;

    color: #fff !important;

    border: 0 !important;

}


.erp-mobile-sidebar
.offcanvas-header {

    height:
        var(--erp-navbar-height);

    background:
        var(--erp-primary);

    border-bottom:
        1px solid
        rgba(255,255,255,0.15);

}


.erp-mobile-sidebar
.offcanvas-body {

    background:
        var(--erp-primary);

    padding: 0 !important;

}


.erp-mobile-sidebar
.erp-sidebar-nav {

    height: auto;

    min-height:
        calc(
            100vh -
            var(--erp-navbar-height)
        );

    padding:
        12px 9px;

    overflow-y: auto;

}


.erp-mobile-sidebar
.erp-nav-label {

    opacity: 1 !important;

    visibility: visible !important;

    margin-left: 8px;

}


.erp-mobile-sidebar
.erp-nav-item {

    color:
        rgba(255,255,255,0.92);

}


.erp-mobile-sidebar
.erp-nav-item:hover,
.erp-mobile-sidebar
.erp-nav-item.active {

    background:
        rgba(255,255,255,0.16);

    color: #fff;

}


.erp-mobile-sidebar
.erp-nav-icon {

    color: #fff;

}


/* =========================================================
   MOBILE PACKAGE
========================================================= */

.erp-mobile-package {

    margin:
        15px;

    padding:
        14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 10px;

    background:
        rgba(0,0,0,0.08);

}


.erp-mobile-package > div {

    display: flex;

    flex-direction: column;

}


.erp-mobile-package small {

    font-size: 10px;

    color:
        rgba(255,255,255,0.7);

}


.erp-mobile-package strong {

    color: #fff;

    font-size: 13px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {


    .erp-sidebar {

        display: none;

    }


    .erp-main,
    .erp-app.sidebar-collapsed
    .erp-main {

        margin-left: 0;

    }


    .erp-sidebar-toggle {

        display: none;

    }


    .erp-mobile-menu-btn {

        display: inline-flex;

    }


    .erp-content {

        padding: 16px;

    }


    .erp-stat-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }


    .erp-dashboard-grid {

        grid-template-columns: 1fr;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {


    .erp-navbar {

        height: 64px;

    }


    .erp-content {

        padding: 14px;

    }


    .erp-stat-grid {

        grid-template-columns: 1fr;

    }


    .erp-balance {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .erp-balance-column
    + .erp-balance-column {

        border-left: 0;

        border-top:
            1px solid
            rgba(255,255,255,0.25);

        padding-left: 0;

        padding-top: 18px;

    }


    .erp-footer {

        padding:
            12px;

        min-height: auto;

        flex-wrap: wrap;

        gap: 6px;

    }


    .erp-navbar-title {

        font-size: 17px;

    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 575.98px) {


    .erp-mobile-sidebar {

        width: 82vw !important;

        max-width: 300px;

    }


    .erp-navbar-actions {

        gap: 4px;

    }


    .erp-icon-btn {

        width: 38px;

        height: 38px;

    }


    .erp-user-btn {

        width: 40px;

        height: 40px;

        padding: 2px;

        justify-content: center;

    }


    .erp-content {

        padding: 12px;

    }

}




/* =========================================================

   LOGIN PAGE

   LOGINUI1 - CENTERED SPLIT CARD

========================================================= */



.erp-login-page {

    min-height: 100vh;

    padding: 34px;

    background:

        linear-gradient(90deg, var(--erp-primary) 0 50%, #eef0f6 50% 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow-x: hidden;

}



.erp-login-wrapper {

    position: relative;

    width: min(1120px, 100%);

    min-height: 620px;

    display: flex;

    overflow: hidden;

    border: 1px solid rgba(31, 41, 55, 0.06);

    border-radius: 30px;

    background: #fff;

    box-shadow:

        0 28px 70px rgba(27, 31, 46, 0.16),

        0 5px 18px rgba(27, 31, 46, 0.08);

}





/* =========================================================

   BRAND PANEL

========================================================= */



.erp-login-brand {

    position: relative;

    isolation: isolate;

    width: 50%;

    min-height: 620px;

    overflow: hidden;

    background:

        linear-gradient(145deg, var(--erp-primary-dark) 0%, var(--erp-primary) 56%, #756df8 100%);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 58px 54px;

}



.erp-login-brand::before,

.erp-login-brand::after {

    content: "";

    position: absolute;

    z-index: -1;

    border-radius: 50%;

    pointer-events: none;

}



.erp-login-brand::before {

    width: 430px;

    height: 430px;

    left: -165px;

    top: -135px;

    border: 56px solid rgba(255, 255, 255, 0.055);

}



.erp-login-brand::after {

    width: 350px;

    height: 350px;

    right: -120px;

    bottom: -155px;

    background: rgba(255, 255, 255, 0.055);

    box-shadow:

        -250px -42px 0 -105px rgba(255, 255, 255, 0.08),

        -120px -275px 0 -130px rgba(255, 255, 255, 0.10);

}



.erp-login-brand-inner {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 430px;

}



.erp-login-logo {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #fff;

    color: var(--erp-primary);

    border: 1px solid rgba(255, 255, 255, 0.58);

    border-radius: 18px;

    box-shadow: 0 12px 28px rgba(29, 25, 90, 0.16);

    font-size: 27px;

}



.erp-login-brand h1 {

    margin: 30px 0 12px;

    font-size: clamp(32px, 3vw, 42px);

    font-weight: 750;

    line-height: 1.12;

    letter-spacing: -0.7px;

}



.erp-login-brand p {

    margin: 0;

    max-width: 410px;

    color: rgba(255, 255, 255, 0.80);

    font-size: 15px;

    line-height: 1.75;

}



.erp-login-features {

    display: grid;

    gap: 11px;

    margin-top: 38px;

}



.erp-login-features div {

    min-height: 44px;

    margin: 0;

    padding: 10px 13px;

    display: flex;

    align-items: center;

    color: rgba(255, 255, 255, 0.94);

    background: rgba(255, 255, 255, 0.075);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    backdrop-filter: blur(3px);

    font-size: 13px;

}



.erp-login-features i {

    margin-right: 11px;

    color: #fff;

    font-size: 16px;

}





/* =========================================================

   LOGIN FORM PANEL

========================================================= */



.erp-login-form-section {

    width: 50%;

    min-height: 620px;

    background:

        linear-gradient(180deg, #fbfbfd 0%, #f6f7fb 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 54px 68px;

}



.erp-login-form-wrapper {

    width: 100%;

    max-width: 390px;

}



.erp-login-mobile-logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    text-align: center;

}



.erp-login-mobile-logo .erp-login-logo {

    width: 58px;

    height: 58px;

    border-color: var(--erp-border);

    border-radius: 16px;

    box-shadow: 0 10px 24px rgba(91, 80, 245, 0.12);

}



.erp-login-mobile-logo h2 {

    margin: 12px 0 0;

    color: var(--erp-primary);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.2px;

}



.erp-login-heading {

    margin-bottom: 28px;

    text-align: center;

}



.erp-login-heading h2 {

    margin: 0 0 8px;

    color: var(--erp-text);

    font-size: 29px;

    font-weight: 750;

    letter-spacing: -0.45px;

}



.erp-login-heading p {

    margin: 0;

    color: var(--erp-muted);

    font-size: 13px;

}





/* =========================================================

   LOGIN INPUTS

========================================================= */



.erp-login-field .form-label {

    margin-bottom: 7px;

    color: var(--erp-text);

    font-size: 12px;

    font-weight: 650;

}



.erp-input-group {

    position: relative;

}



.erp-input-group > i {

    position: absolute;

    left: 16px;

    top: 50%;

    z-index: 2;

    transform: translateY(-50%);

    color: #949bad;

    pointer-events: none;

}



.erp-input-group .form-control {

    min-height: 50px;

    padding: 0 44px;

    border: 1px solid #e1e4ec;

    border-radius: 12px;

    background: #fff;

    color: var(--erp-text);

    font-size: 14px;

    box-shadow: 0 3px 10px rgba(31, 41, 55, 0.025);

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease,

        background 0.2s ease;

}



.erp-input-group .form-control:hover {

    border-color: #d5d9e4;

}



.erp-input-group .form-control:focus {

    border-color: var(--erp-primary);

    background: #fff;

    box-shadow: 0 0 0 4px rgba(91, 80, 245, 0.10);

}



.erp-input-group .form-control::placeholder {

    color: #a8afbd;

}



.erp-password-toggle {

    position: absolute;

    right: 13px;

    top: 50%;

    z-index: 3;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    color: var(--erp-muted);

    padding: 5px;

    cursor: pointer;

}



.erp-password-toggle:hover {

    color: var(--erp-primary);

}



.erp-login-form-wrapper .form-check {

    min-height: 20px;

}



.erp-login-form-wrapper .form-check-input {

    border-color: #cfd4df;

}



.erp-login-form-wrapper .form-check-input:checked {

    border-color: var(--erp-primary);

    background-color: var(--erp-primary);

}



.erp-login-form-wrapper .form-check-label {

    color: var(--erp-muted);

    font-size: 12px;

}





/* =========================================================

   LOGIN BUTTON / ALERT / FOOTER

========================================================= */



.erp-login-button {

    min-height: 50px;

    border: 0;

    border-radius: 12px;

    background: var(--erp-primary);

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.1px;

    box-shadow: 0 8px 18px rgba(91, 80, 245, 0.18);

    transition:

        background 0.2s ease,

        transform 0.2s ease,

        box-shadow 0.2s ease;

}



.erp-login-button:hover {

    background: var(--erp-primary-dark);

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 12px 24px rgba(91, 80, 245, 0.24);

}



.erp-login-button:active {

    transform: translateY(0);

}



.erp-login-form-wrapper .alert {

    margin-bottom: 20px;

    border-radius: 11px;

    font-size: 12px;

}



.erp-login-footer {

    margin-top: 30px;

    text-align: center;

    color: #9aa2b2;

    font-size: 11px;

}





/* =========================================================

   LOGIN RESPONSIVE

========================================================= */



@media (max-width: 991.98px) {

    .erp-login-page {

        padding: 24px;

    }



    .erp-login-wrapper {

        min-height: 590px;

        border-radius: 26px;

    }



    .erp-login-brand {

        width: 44%;

        min-height: 590px;

        padding: 42px 34px;

    }



    .erp-login-form-section {

        width: 56%;

        min-height: 590px;

        padding: 42px 38px;

    }



    .erp-login-brand h1 {

        font-size: 32px;

    }

}



@media (max-width: 767.98px) {

    .erp-login-page {

        min-height: 100vh;

        padding: 18px;

        background: #f1f2f7;

    }



    .erp-login-wrapper {

        width: min(480px, 100%);

        min-height: 0;

        display: block;

        border-radius: 24px;

        box-shadow: 0 20px 50px rgba(27, 31, 46, 0.13);

    }



    .erp-login-brand {

        display: none;

    }



    .erp-login-form-section {

        width: 100%;

        min-height: 0;

        padding: 38px 28px 32px;

    }



    .erp-login-form-wrapper {

        max-width: 410px;

    }



    .erp-login-mobile-logo {

        margin-bottom: 22px;

    }



    .erp-login-heading h2 {

        font-size: 27px;

    }

}



@media (max-width: 400px) {

    .erp-login-page {

        padding: 10px;

    }



    .erp-login-wrapper {

        border-radius: 20px;

    }



    .erp-login-form-section {

        padding: 32px 20px 28px;

    }

}


/* =========================================================
   SIDEBAR GROUP
========================================================= */

.erp-nav-group {
    margin-bottom: 4px;
}


/* Parent button */

.erp-nav-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}


/* Arrow */

.erp-nav-arrow {
    margin-left: auto;

    font-size: 11px;

    transition:
        transform 0.2s ease;
}


/* Open arrow */

.erp-nav-group.open
.erp-nav-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   SUBMENU
========================================================= */

.erp-nav-submenu {
    display: none;

    margin: 0 0 5px 0;

    padding-left: 39px;
}


.erp-nav-submenu.show {
    display: block;
}


/* =========================================================
   SUBMENU ITEM
========================================================= */

.erp-nav-subitem {
    display: flex;

    align-items: center;

    min-height: 38px;

    padding: 8px 12px;

    margin-bottom: 2px;

    border-radius: 7px;

    color:
        rgba(255, 255, 255, 0.82);

    text-decoration: none;

    font-size: 14px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.erp-nav-subitem:hover {
    background:
        rgba(255, 255, 255, 0.10);

    color: #fff;
}


.erp-nav-subitem.active {
    background:
        rgba(255, 255, 255, 0.16);

    color: #fff;

    font-weight: 500;
}


/* =========================================================
   DESKTOP COLLAPSED SIDEBAR
========================================================= */

@media (min-width: 992px) {

    .erp-app.sidebar-collapsed
    .erp-nav-label {

        opacity: 0;

        visibility: hidden;
    }


    .erp-app.sidebar-collapsed
    .erp-nav-arrow {

        display: none;
    }


    .erp-app.sidebar-collapsed
    .erp-nav-submenu {

        display: none !important;
    }


    .erp-app.sidebar-collapsed
    .erp-nav-group-toggle {

        justify-content: center;
    }

}


/* =========================================================
   SIDEBAR GROUP MENU
   ========================================================= */

.erp-nav-group {
    width: 100%;
    margin: 2px 0;
}

.erp-nav-group-toggle {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.erp-nav-group-toggle:focus {
    outline: none;
    box-shadow: none;
}

.erp-nav-group-toggle:hover {
    background: rgba(255, 255, 255, 0.10);
}


/* Parent menu arrow */

.erp-nav-arrow {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform 0.2s ease;
}

.erp-nav-group.open .erp-nav-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   SUBMENU
   ========================================================= */

.erp-nav-submenu {
    display: none;
    padding: 4px 8px 7px 46px;
}

.erp-nav-submenu.show {
    display: block;
}


/* Submenu item */

.erp-nav-subitem {
    display: flex;
    align-items: center;

    min-height: 38px;

    padding: 8px 12px;

    margin: 2px 0;

    border-radius: 8px;

    color: rgba(255, 255, 255, 0.82);

    text-decoration: none;

    font-size: 13px;

    line-height: 1.3;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        padding-left 0.18s ease;
}


/* Hover */

.erp-nav-subitem:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    padding-left: 16px;
}


/* Active submenu */

.erp-nav-subitem.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    font-weight: 500;
}


/* Submenu label */

.erp-nav-subitem-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   PARENT ACTIVE STATE
   ========================================================= */

.erp-nav-group > .erp-nav-group-toggle.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}


/* =========================================================
   SIDEBAR NORMAL ITEM
   ========================================================= */

.erp-nav-item {
    display: flex;
    align-items: center;

    width: calc(100% - 16px);

    min-height: 46px;

    margin: 3px 8px;

    padding: 0 12px;

    border-radius: 9px;

    color: rgba(255, 255, 255, 0.88);

    text-decoration: none;

    font-size: 14px;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.erp-nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}

.erp-nav-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.17);
    font-weight: 500;
}


/* Icon */

.erp-nav-icon {
    width: 28px;

    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
}


/* Label */

.erp-nav-label {
    flex: 1;

    margin-left: 4px;

    white-space: nowrap;
}

/* =========================================================
   MODERN USER ACCOUNT MENU
========================================================= */

.erp-user-button {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 4px 9px 4px 5px;

    border: 1px solid var(--erp-border);

    background: #fff;

    border-radius: 10px;

    color: var(--erp-text);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.erp-user-button:hover,
.erp-user-button[aria-expanded="true"] {
    background: #f8f9ff;

    border-color: #dcd9ff;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.06);
}

.erp-user-button::after {
    display: none;
}


/* Avatar */

.erp-user-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e9e7ff;

    color: var(--erp-primary);

    font-size: 13px;
    font-weight: 700;
}

.erp-user-avatar-lg {
    width: 44px;
    height: 44px;

    flex-basis: 44px;

    font-size: 16px;
}


/* User information */

.erp-user-info {
    flex-direction: column;

    min-width: 75px;

    line-height: 1.2;
}

.erp-user-name {
    font-size: 13px;

    font-weight: 600;

    color: #172033;
}

.erp-user-role {
    margin-top: 3px;

    font-size: 11px;

    color: #7b8497;
}

.erp-user-chevron {
    font-size: 11px;

    color: #7b8497;

    transition: transform 0.2s ease;
}

.erp-user-button[aria-expanded="true"]
.erp-user-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
========================================================= */

.erp-user-dropdown {
    width: 310px;

    padding: 8px;

    margin-top: 8px !important;

    border: 1px solid #e8eaf0;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 16px 45px rgba(25, 35, 55, 0.12),
        0 4px 12px rgba(25, 35, 55, 0.05);

    overflow: hidden;
}


/* Header */

.erp-user-dropdown-header {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 10px;
}

.erp-user-dropdown-identity {
    min-width: 0;
}

.erp-user-dropdown-name {
    font-size: 14px;

    font-weight: 700;

    color: #172033;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.erp-user-dropdown-username {
    margin-top: 2px;

    font-size: 11px;

    color: #8a93a5;
}


/* Role badge */

.erp-user-role-badge {
    display: inline-flex;

    margin-top: 6px;

    padding: 3px 8px;

    border-radius: 20px;

    background: #f0efff;

    color: var(--erp-primary);

    font-size: 10px;

    font-weight: 600;
}


/* Divider */

.erp-user-dropdown-divider {
    height: 1px;

    margin: 5px 4px;

    background: #eef0f4;
}


/* =========================================================
   MENU ITEMS
========================================================= */

.erp-user-menu-item {
    width: 100%;

    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 8px 9px;

    border-radius: 9px;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.erp-user-menu-item:hover {
    background: #f6f7fb;

    text-decoration: none;

    transform: translateX(1px);
}


/* Icon */

.erp-user-menu-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #f1f2f7;

    color: #596273;

    font-size: 15px;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.erp-user-menu-item:hover
.erp-user-menu-icon {
    background: #e9e7ff;

    color: var(--erp-primary);
}


/* Text */

.erp-user-menu-content {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;
}

.erp-user-menu-title {
    font-size: 13px;

    font-weight: 600;

    color: #20283a;
}

.erp-user-menu-description {
    margin-top: 2px;

    font-size: 10px;

    color: #8a93a5;

    white-space: nowrap;
}


/* Arrow */

.erp-user-menu-arrow {
    font-size: 10px;

    color: #a0a7b5;

    margin-right: 3px;
}


/* Logout */

.erp-user-menu-danger {
    color: #dc3545;
}

.erp-user-menu-danger
.erp-user-menu-icon {
    background: #fff1f2;

    color: #dc3545;
}

.erp-user-menu-danger:hover {
    background: #fff5f5;
}

.erp-user-menu-danger:hover
.erp-user-menu-icon {
    background: #ffe2e5;

    color: #dc3545;
}

.erp-user-menu-danger
.erp-user-menu-title {
    color: #dc3545;
}

.erp-user-menu-danger
.erp-user-menu-description {
    color: #b77b81;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .erp-user-dropdown {
        width: 290px;

        max-width:
            calc(100vw - 20px);
    }

    .erp-user-button {
        padding-right: 7px;
    }

}

 
/* =========================================================
   NOTIFICATION CENTER
========================================================= */
.erp-notification-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--erp-border);
    background: #fff;
    border-radius: 10px;
    color: #525d70;
    font-size: 16px;
}

.erp-notification-button:hover,
.erp-notification-button[aria-expanded="true"] {
    background: #f8f9ff;
    border-color: #dcd9ff;
    color: var(--erp-primary);
}

.erp-notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.erp-notification-dropdown {
    width: 390px;
    max-width: calc(100vw - 20px);
    padding: 0;
    margin-top: 8px !important;
    border: 1px solid #e6e9f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(25,35,55,.14), 0 4px 12px rgba(25,35,55,.05);
    overflow: hidden;
}

.erp-notification-header {
    min-height: 68px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #edf0f5;
}

.erp-notification-heading {
    font-size: 15px;
    font-weight: 700;
    color: #172033;
}

.erp-notification-subheading {
    margin-top: 2px;
    font-size: 11px;
    color: #929aab;
}

.erp-notification-list {
    max-height: 390px;
    overflow-y: auto;
}

.erp-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid #f0f2f6;
    background: #fff;
}

.erp-notification-item.is-unread {
    background: #fbfbff;
}

.erp-notification-item:hover {
    background: #f8f9fd;
}

.erp-notification-item-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef3ff;
    color: #3972d8;
}

.erp-notification-item-icon.success { background: #eaf8f0; color: #198754; }
.erp-notification-item-icon.warning { background: #fff7df; color: #b77900; }
.erp-notification-item-icon.danger { background: #fff0f1; color: #dc3545; }
.erp-notification-item-icon.info { background: #eef3ff; color: #3972d8; }

.erp-notification-item-content {
    flex: 1;
    min-width: 0;
}

.erp-notification-item-title {
    position: relative;
    padding-right: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #20283a;
}

.erp-notification-item.is-unread .erp-notification-item-title::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--erp-primary);
    vertical-align: middle;
}

.erp-notification-item-message {
    margin-top: 3px;
    max-height: 34px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.5;
    color: #6f788b;
}

.erp-notification-item-time {
    margin-top: 5px;
    font-size: 9px;
    color: #a0a7b5;
}

.erp-notification-item-actions {
    flex: 0 0 auto;
}

.erp-notification-open {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8790a2;
}

.erp-notification-open:hover {
    background: #eceaff;
    color: var(--erp-primary);
}

.erp-notification-empty {
    padding: 38px 20px;
    text-align: center;
    color: #737d90;
}

.erp-notification-empty > i {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
    color: #c1c7d2;
}

.erp-notification-footer {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #edf0f5;
    background: #fafbfe;
    color: var(--erp-primary);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.erp-notification-footer:hover {
    background: #f4f3ff;
    color: var(--erp-primary);
}

@media (max-width: 575.98px) {
    .erp-notification-dropdown {
        width: 340px;
        max-width: calc(100vw - 16px);
    }
}

/* =========================================================
   NOTIFICATION CENTER — POLISHED DROPDOWN OVERRIDES
========================================================= */
.erp-notification-dropdown {
    width: 420px;
    max-width: calc(100vw - 20px);
    border: 1px solid #e7e9f1;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(26, 36, 60, .18), 0 6px 18px rgba(26, 36, 60, .06);
}
.erp-notification-header {
    min-height: 78px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f8ff 100%);
}
.erp-notification-header-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eeecff;
    color: var(--erp-primary);
    font-size: 17px;
}
.erp-notification-heading {
    font-size: 16px;
    line-height: 1.2;
}
.erp-notification-unread-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff0f1;
    color: #c93442;
    font-size: 10px;
    font-weight: 700;
}
.erp-notification-mark-all {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfdcff;
    border-radius: 10px;
    background: #fff;
    color: var(--erp-primary);
    transition: all .15s ease;
}
.erp-notification-mark-all:hover {
    background: #eeecff;
    border-color: #cfcaff;
}
.erp-notification-list {
    max-height: 410px;
}
.erp-notification-item {
    position: relative;
    gap: 12px;
    padding: 15px 16px;
    transition: background .15s ease, transform .15s ease;
}
.erp-notification-item.is-unread {
    background: linear-gradient(90deg, rgba(91,80,245,.055) 0%, rgba(91,80,245,.018) 100%);
}
.erp-notification-item.is-unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 6px 6px 0;
    background: var(--erp-primary);
}
.erp-notification-item.severity-warning.is-unread::before { background: #d99400; }
.erp-notification-item.severity-danger.is-unread::before { background: #dc3545; }
.erp-notification-item.severity-success.is-unread::before { background: #198754; }
.erp-notification-item-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
}
.erp-notification-item-title {
    padding-right: 0;
    font-size: 12.5px;
    line-height: 1.35;
}
.erp-notification-item.is-unread .erp-notification-item-title::after { display: none; }
.erp-notification-unread-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--erp-primary);
}
.erp-notification-item-message {
    max-height: 40px;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #687386;
}
.erp-notification-item-time {
    margin-top: 6px;
    font-size: 9.5px;
}
.erp-notification-open {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
}
.erp-notification-open:hover {
    border-color: #ddd9ff;
    background: #f1efff;
}
.erp-notification-empty {
    padding: 46px 22px 42px;
}
.erp-notification-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f3f5f8;
    color: #aab2c0;
    font-size: 24px;
}
.erp-notification-empty > i { display: none; }
.erp-notification-footer {
    height: 50px;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 11.5px;
}
.erp-notification-footer i {
    transition: transform .15s ease;
}
.erp-notification-footer:hover i {
    transform: translateX(3px);
}
@media (max-width: 575.98px) {
    .erp-notification-dropdown {
        width: 360px;
        max-width: calc(100vw - 12px);
    }
}


/* =========================================================
   SMART RECURSIVE SIDEBAR - 2026-09-15
========================================================= */

.erp-smart-menu {
    padding-bottom: 10px;
}

.erp-smart-menu-search {
    position: relative;
    margin: 8px 10px 12px;
}

.erp-smart-menu-search > i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    pointer-events: none;
}

.erp-smart-menu-search .form-control {
    height: 34px;
    padding-left: 31px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 12px;
    box-shadow: none;
}

.erp-smart-menu-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

.erp-smart-menu-search .form-control:focus {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.erp-smart-menu-empty {
    margin: 10px 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    text-align: center;
}

.erp-smart-group {
    width: 100%;
}

.erp-smart-group-toggle {
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.erp-smart-group-toggle:focus {
    outline: none;
    box-shadow: none;
}

.erp-smart-arrow {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0.76;
    transition: transform 0.18s ease;
}

.erp-smart-group.open > .erp-smart-group-toggle > .erp-smart-arrow {
    transform: rotate(180deg);
}

.erp-smart-children {
    display: none;
}

.erp-smart-children.show {
    display: block;
}

/* Level 1 container: children of a main module. */
.erp-smart-children-depth-1 {
    padding: 4px 8px 8px 38px;
}

/* Level 2 container: screens inside a second-level group. */
.erp-smart-children-depth-2 {
    margin: 4px 0 8px 10px;
    padding: 4px 0 2px 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.erp-smart-subitem {
    width: 100%;
    min-height: 36px;
    margin: 2px 0;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.erp-smart-subitem:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    transform: translateX(1px);
}

.erp-smart-subitem.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-weight: 600;
}

.erp-smart-subitem-label {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-smart-group-depth-1 {
    margin-top: 6px;
}

.erp-smart-group-depth-1 > .erp-smart-group-toggle {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.2px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.erp-smart-group-depth-1 > .erp-smart-group-toggle:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.erp-smart-group-depth-1.open > .erp-smart-group-toggle,
.erp-smart-group-depth-1 > .erp-smart-group-toggle.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.erp-smart-group-depth-1 > .erp-smart-group-toggle .erp-smart-arrow {
    font-size: 9px;
    opacity: 0.72;
}

.erp-smart-depth-2 {
    min-height: 31px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12.4px;
}

/* Non-collapsible section headings inside dense third-level workspaces such as Payroll. */
.erp-smart-menu-section {
    margin-top: 8px;
}

.erp-smart-menu-section:first-child {
    margin-top: 4px;
}

.erp-smart-menu-section > .erp-smart-menu-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 3px 10px 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-transform: uppercase;
}

.erp-smart-menu-section > .erp-smart-menu-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.erp-smart-menu-section > .erp-smart-menu-section-children {
    display: block;
    margin: 0;
    padding: 0;
    border-left: 0;
}

.erp-smart-menu-section > .erp-smart-menu-section-children > .erp-smart-subitem {
    min-height: 31px;
    margin: 1px 0;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12.35px;
}

.erp-smart-menu-section > .erp-smart-menu-section-children > .erp-smart-subitem.active {
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.72);
}

/* Level 3 container: screens inside grouped Payroll subsections. */
.erp-smart-children-depth-3 {
    margin: 3px 0 6px 6px;
    padding: 2px 0 2px 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.erp-smart-depth-3 {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 12px;
}

@media (min-width: 992px) {
    .erp-app.sidebar-collapsed .erp-smart-menu-search,
    .erp-app.sidebar-collapsed .erp-smart-children,
    .erp-app.sidebar-collapsed .erp-smart-group-depth-1,
    .erp-app.sidebar-collapsed .erp-smart-subitem {
        display: none !important;
    }
}


/* =========================================================
   HRM · Attendance Device Workspace + Machine Report
   Crystal-clear operational UI
   ========================================================= */
.attendance-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.attendance-page-head h4{letter-spacing:-.015em}
.attendance-device-panel,.attendance-filter-card,.attendance-report-card-clean{border:1px solid #e8ecf2;border-radius:14px;box-shadow:0 4px 14px rgba(31,41,55,.035);overflow:hidden}.attendance-device-panel>.card-header,.attendance-report-card-clean>.card-header{padding:.85rem 1rem;border-bottom:1px solid #edf0f4}.attendance-device-panel>.card-body{padding:1rem}
.attendance-count{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 .55rem;border:1px solid #e4e7ec;border-radius:999px;background:#f8fafc;color:#475467;font-size:.75rem;font-weight:700}
.attendance-clean-table thead th{padding:.68rem .8rem;border-top:0;border-bottom:1px solid #e4e7ec;background:#f8fafc;color:#667085;font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap}.attendance-clean-table tbody td{padding:.72rem .8rem;border-color:#edf0f4}.attendance-clean-table tbody tr:hover{background:#fbfcfe}.attendance-clean-table tbody tr.table-active{background:rgba(91,80,245,.035)}
.attendance-device-selected-bar{display:flex;align-items:center;gap:1rem;padding:.8rem .9rem;border:1px solid #e8ecf2;border-radius:13px;background:#fff}.attendance-device-selected-main{display:flex;align-items:center;gap:.75rem}.attendance-device-selected-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:rgba(91,80,245,.09);color:var(--erp-primary)}
.attendance-device-connection{display:flex;flex-wrap:wrap;gap:1rem;padding-top:.75rem;border-top:1px solid #edf0f4;color:#667085;font-size:.8rem}.attendance-device-connection span{display:inline-flex;align-items:center;gap:.38rem}.attendance-device-connection i{font-size:.48rem;color:#98a2b3}.attendance-device-connection .is-success i{color:#12b76a}
.attendance-device-tabs{display:flex;gap:.3rem;overflow-x:auto;padding:.28rem;border:1px solid #e8ecf2;border-radius:12px;background:#fff;scrollbar-width:thin}.attendance-device-tab-link{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.5rem .7rem;border:1px solid transparent;border-radius:9px;text-decoration:none;color:#475467;font-weight:650;white-space:nowrap;transition:.15s ease}.attendance-device-tab-link>i{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:7px;background:#f5f7fa;color:#667085}.attendance-device-tab-link:hover{color:var(--erp-primary);background:#f8f7ff}.attendance-device-tab-link.active{color:var(--erp-primary);background:rgba(91,80,245,.075);border-color:rgba(91,80,245,.15);font-weight:750}.attendance-device-tab-link.active>i{background:var(--erp-primary);color:#fff}.attendance-device-tab-link.report-link{margin-left:auto}
.zk-workspace-card{border:1px solid #e8ecf2;border-radius:14px;box-shadow:0 4px 14px rgba(31,41,55,.035);overflow:hidden}.zk-workspace-card>.card-header{padding:.85rem 1rem!important;border-bottom:1px solid #edf0f4}.zk-workspace-card>.card-footer{border-top:1px solid #edf0f4}.zk-toolbar{background:#f8fafc;border:1px solid #edf0f4;border-radius:10px;padding:.55rem}.zk-table-wrap{max-height:560px;overflow:auto}.zk-table-wrap-sm{max-height:520px;overflow:auto}.zk-table-wrap thead th{position:sticky;top:0;z-index:3;background:#f8fafc;box-shadow:inset 0 -1px 0 #e4e7ec}.zk-table-wrap .table,.zk-table-wrap-sm .table{font-size:.86rem}.zk-map-source{min-height:38px;display:flex;align-items:center}.zk-search-count{font-size:.76rem;color:#667085;white-space:nowrap}.zk-pager button{min-width:34px}
.attendance-report-mode-tabs{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid #e8ecf2;border-radius:11px;background:#fff}.attendance-report-mode-link{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .72rem;border:1px solid transparent;border-radius:8px;color:#475467;text-decoration:none;font-weight:650;transition:.15s ease}.attendance-report-mode-link>i{color:#667085}.attendance-report-mode-link:hover{color:var(--erp-primary);background:#f8f7ff}.attendance-report-mode-link.active{color:var(--erp-primary);background:rgba(91,80,245,.08);border-color:rgba(91,80,245,.14)}.attendance-report-mode-link.active>i{color:var(--erp-primary)}
.attendance-filter-card>.card-body{padding:.8rem 1rem}.attendance-filter-card .form-label{margin-bottom:.35rem;font-size:.75rem;font-weight:650;color:#475467}
.attendance-report-table{min-width:1120px}.attendance-punch-time{display:inline-flex;align-items:center;font-weight:750;white-space:nowrap}.attendance-punch-in{color:#087a5a}.attendance-punch-out{color:#344054}.attendance-status-ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}.attendance-status-warning{background:#fffaeb;color:#b54708;border:1px solid #fedf89}.attendance-status-neutral{background:#f2f4f7;color:#475467;border:1px solid #d0d5dd}
@media (max-width:991.98px){.attendance-page-head{flex-direction:column}.attendance-device-selected-bar{align-items:flex-start;flex-wrap:wrap}.attendance-device-selected-bar>.ms-auto{margin-left:0!important;width:100%}.attendance-device-tab-link.report-link{margin-left:0}}
@media (max-width:767.98px){.attendance-device-tabs{gap:.2rem;padding:.22rem}.attendance-device-tab-link{min-height:38px;padding:.43rem .58rem}.attendance-report-mode-tabs{display:flex;overflow-x:auto}.zk-table-wrap{max-height:480px}}
@media print{.erp-sidebar,.erp-topbar,.erp-mobile-overlay,.d-print-none{display:none!important}.erp-main,.erp-content{margin:0!important;padding:0!important;width:100%!important}.attendance-report-page{font-size:10px}.attendance-report-card-clean{box-shadow:none!important;border-color:#d0d5dd}.attendance-report-table{min-width:0;font-size:9px}}

/* Attendance report processing bridge */
.attendance-report-mode-switch .btn{min-width:108px;font-weight:700}
.attendance-process-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .85rem;border:1px solid #d7e3ff;border-radius:10px;background:#f7f9ff;color:#344054;font-size:.875rem}
.attendance-process-bar>div>i{color:var(--erp-primary);font-size:1rem}
.attendance-status-error{background:#fff1f3;color:#c01048;border:1px solid #fecdd6}
@media (max-width:767.98px){.attendance-process-bar{align-items:flex-start;flex-direction:column}.attendance-process-bar form,.attendance-process-bar .btn{width:100%}.attendance-report-mode-switch{display:flex;width:100%}.attendance-report-mode-switch .btn{flex:1}}

@media (max-width: 991.98px) {

    .erp-sidebar-nav {

        padding:
            12px 9px;

    }


    .erp-footer {

        position: static;

        width: auto;

        min-height: auto;

        padding:
            12px;

        background: #fff;

        border-top:
            1px solid
            var(--erp-border);

        flex-direction: row;

        align-items: center;

        gap: 6px;

        color:
            var(--erp-muted);

    }


    .erp-footer .ms-auto {

        margin-left: auto !important;

        opacity: 1;

        font-size: 12px;

    }

}


/* =========================================================
   UISTD1 — GLOBAL MODERN CLEAN UI STANDARD
   Readability baseline for ERP operational screens.
   Module-specific styles may refine this baseline.
========================================================= */

.erp-content {
    font-size: 15px;
    line-height: 1.45;
}

.erp-navbar-title {
    font-size: 20px;
    font-weight: 650;
}

.erp-nav-label {
    font-size: 14px;
}

.erp-top-btn {
    font-size: 13px;
}

.erp-content h1,
.erp-content .h1 {
    font-size: 1.85rem;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.erp-content h2,
.erp-content .h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 700;
}

.erp-content h3,
.erp-content .h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 700;
}

.erp-content .form-label {
    margin-bottom: .4rem;
    color: #475467;
    font-size: .875rem;
    font-weight: 650;
}

.erp-content .form-control,
.erp-content .form-select,
.erp-content .input-group-text {
    min-height: 42px;
    border-color: #dfe4ec;
    border-radius: 10px;
    font-size: .95rem;
}

.erp-content .form-control:focus,
.erp-content .form-select:focus {
    border-color: rgba(91,80,245,.55);
    box-shadow: 0 0 0 .2rem rgba(91,80,245,.10);
}

.erp-content textarea.form-control {
    min-height: auto;
}

.erp-content .input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.erp-content .input-group > .form-control:not(:first-child),
.erp-content .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.erp-content .btn {
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 650;
}

.erp-content .btn:not(.btn-sm):not(.btn-lg) {
    min-height: 40px;
    padding: .48rem .85rem;
}

.erp-content .btn-sm {
    border-radius: 8px;
    font-size: .82rem;
}

.erp-content .card,
.erp-content .erp-card {
    border-radius: 14px;
}

.erp-content .table {
    font-size: .9rem;
}

.erp-content .table > :not(caption) > * > * {
    padding-top: .72rem;
    padding-bottom: .72rem;
}

.erp-content .table > thead > tr > th {
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.erp-content .table > tbody > tr:hover {
    background-color: #fbfcfe;
}

.erp-content .badge,
.erp-content .erp-badge {
    font-size: .76rem;
    font-weight: 650;
}

.erp-content .alert {
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.45;
}

.erp-content .text-muted {
    color: #667085 !important;
}

.erp-content small,
.erp-content .small {
    font-size: .82rem;
}

/* Standard helpers for new/refined screens: keep routine guidance short. */
.erp-ui-page-subtitle {
    margin-top: .25rem;
    color: #667085;
    font-size: .95rem;
    line-height: 1.45;
}

.erp-ui-section-copy {
    margin-top: .2rem;
    color: #75809a;
    font-size: .86rem;
    line-height: 1.4;
}

.erp-ui-note {
    padding: .65rem .8rem;
    border: 1px solid #e5e9f1;
    border-radius: 10px;
    background: #f8fafc;
    color: #596780;
    font-size: .86rem;
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .erp-content {
        font-size: 14.5px;
    }

    .erp-content h1,
    .erp-content .h1 {
        font-size: 1.6rem;
    }
}

/* LOGINUI12 PARTNER LOGOS OVERRIDE START */

.erp-login-partner-logos {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

}



.erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

.erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #fff;

    color: var(--erp-primary);

    border: 1px solid var(--erp-border);

    border-radius: 16px;

    box-shadow: 0 10px 24px rgba(91, 80, 245, 0.12);

}



.erp-login-logo-brand i,

.erp-login-logo-company i {

    margin: 0;

    font-size: 24px;

    line-height: 1;

}



.erp-login-logo-company img {

    width: 100%;

    height: 100%;

    padding: 6px;

    object-fit: contain;

}



.erp-login-handshake {

    width: 38px;

    height: 38px;

    flex: 0 0 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: rgba(91, 80, 245, 0.08);

    border: 1px solid rgba(91, 80, 245, 0.14);

    box-shadow: 0 8px 18px rgba(91, 80, 245, 0.10);

}



.erp-login-handshake span {

    display: block;

    font-size: 18px;

    line-height: 1;

    transform: translateY(1px);

}



@media (max-width: 400px) {

    .erp-login-partner-logos {

        gap: 9px;

    }



    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

        width: 52px;

        height: 52px;

        flex-basis: 52px;

        border-radius: 14px;

    }



    .erp-login-handshake {

        width: 32px;

        height: 32px;

        flex-basis: 32px;

    }



    .erp-login-handshake span {

        font-size: 16px;

    }

}

/* LOGINUI12 PARTNER LOGOS OVERRIDE END */

/* LOGINUI13 DEFAULT ERP + COMPANY LOGOS START */

.erp-login-partner-logos {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

}



.erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

.erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

    width: 60px;

    height: 60px;

    flex: 0 0 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 0;

    background: #fff;

    color: var(--erp-primary);

    border: 1px solid var(--erp-border);

    border-radius: 16px;

    box-shadow: 0 10px 24px rgba(91, 80, 245, 0.12);

}



.erp-login-logo-brand img,

.erp-login-logo-company img {

    display: block;

    width: 100%;

    height: 100%;

    padding: 6px;

    object-fit: contain;

}



.erp-login-logo-company i {

    margin: 0;

    font-size: 24px;

    line-height: 1;

}



.erp-login-handshake {

    width: 38px;

    height: 38px;

    flex: 0 0 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: rgba(91, 80, 245, 0.08);

    border: 1px solid rgba(91, 80, 245, 0.14);

    box-shadow: 0 8px 18px rgba(91, 80, 245, 0.10);

}



.erp-login-handshake span {

    display: block;

    font-size: 18px;

    line-height: 1;

    transform: translateY(1px);

}



@media (max-width: 400px) {

    .erp-login-partner-logos {

        gap: 9px;

    }



    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

        width: 52px;

        height: 52px;

        flex-basis: 52px;

        border-radius: 14px;

    }



    .erp-login-handshake {

        width: 32px;

        height: 32px;

        flex-basis: 32px;

    }



    .erp-login-handshake span {

        font-size: 16px;

    }

}

/* LOGINUI13 DEFAULT ERP + COMPANY LOGOS END */

/* LOGINUI14 SCALE UP START */

.erp-login-wrapper {

    width: min(1240px, 100%);

    min-height: 680px;

}



.erp-login-brand,

.erp-login-form-section {

    min-height: 680px;

}



.erp-login-brand {

    padding: 68px 62px;

}



.erp-login-brand-inner {

    max-width: 470px;

}



.erp-login-brand h1 {

    margin-top: 34px;

    font-size: clamp(36px, 3.2vw, 48px);

}



.erp-login-brand p {

    max-width: 430px;

    font-size: 16px;

}



.erp-login-features {

    gap: 14px;

    margin-top: 42px;

}



.erp-login-features div {

    min-height: 48px;

    padding: 12px 15px;

    font-size: 14px;

}



.erp-login-form-section {

    padding: 60px 76px;

}



.erp-login-form-wrapper {

    max-width: 430px;

}



.erp-login-partner-logos {

    gap: 16px;

    margin-bottom: 14px;

}



.erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

.erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

    width: 74px;

    height: 74px;

    flex-basis: 74px;

    border-radius: 18px;

}



.erp-login-logo-brand img,

.erp-login-logo-company img {

    padding: 7px;

}



.erp-login-logo-company i,

.erp-login-logo-brand i {

    font-size: 28px;

}



.erp-login-handshake {

    width: 46px;

    height: 46px;

    flex-basis: 46px;

}



.erp-login-handshake span {

    font-size: 21px;

}



.erp-login-mobile-logo h2 {

    margin-top: 14px;

    font-size: 17px;

}



.erp-login-heading {

    margin-bottom: 32px;

}



.erp-login-heading h2 {

    font-size: 38px;

    line-height: 1.1;

}



.erp-login-heading p {

    font-size: 15px;

}



.erp-login-field .form-label {

    margin-bottom: 8px;

    font-size: 13px;

}



.erp-input-group > i {

    left: 18px;

}



.erp-input-group .form-control {

    min-height: 58px;

    padding: 0 48px;

    font-size: 15px;

    border-radius: 14px;

}



.erp-password-toggle {

    right: 15px;

}



.erp-login-form-wrapper .form-check-label {

    font-size: 13px;

}



.erp-login-button {

    min-height: 56px;

    border-radius: 14px;

    font-size: 16px;

}



.erp-login-footer {

    margin-top: 34px;

    font-size: 12px;

}



@media (max-width: 991.98px) {

    .erp-login-wrapper {

        min-height: 620px;

    }



    .erp-login-brand,

    .erp-login-form-section {

        min-height: 620px;

    }



    .erp-login-brand {

        padding: 48px 40px;

    }



    .erp-login-form-section {

        padding: 46px 42px;

    }



    .erp-login-heading h2 {

        font-size: 33px;

    }



    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

        width: 68px;

        height: 68px;

        flex-basis: 68px;

    }

}



@media (max-width: 767.98px) {

    .erp-login-form-section {

        padding: 40px 30px 34px;

    }



    .erp-login-form-wrapper {

        max-width: 450px;

    }



    .erp-login-heading h2 {

        font-size: 31px;

    }

}



@media (max-width: 400px) {

    .erp-login-partner-logos {

        gap: 10px;

    }



    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

        width: 58px;

        height: 58px;

        flex-basis: 58px;

        border-radius: 15px;

    }



    .erp-login-handshake {

        width: 36px;

        height: 36px;

        flex-basis: 36px;

    }



    .erp-login-handshake span {

        font-size: 17px;

    }



    .erp-login-heading h2 {

        font-size: 28px;

    }

}

/* LOGINUI14 SCALE UP END */

/* RESPQA1 PROJECT-WIDE RESPONSIVE CONTAINMENT START */

.erp-main,

.erp-content,

.erp-content > *,

.erp-content form,

.erp-content fieldset,

.erp-content .card,

.erp-content .card-body,

.erp-content .row,

.erp-content [class*="col-"] {

    min-width: 0;

}



.erp-content,

.erp-content > * {

    max-width: 100%;

}



.erp-content .table-responsive,

.erp-content [class$="-table-wrap"],

.erp-content [class*="-table-wrap "],

.erp-content [class$="-table-scroll"],

.erp-content [class*="-table-scroll "],

.erp-content [class$="-lines-scroll"],

.erp-content [class*="-lines-scroll "] {

    min-width: 0;

    max-width: 100%;

}



.erp-content .table-responsive,

.erp-content .sales-items-table-wrap,

.erp-content .purchase-items-table-wrap,

.erp-content .ia-lines-scroll,

.erp-content .wt-lines-scroll,

.erp-content .pe-lines-scroll,

.erp-content .payroll-table-wrap,

.erp-content .jr-table-wrap,

.erp-content .stock-alert-table-wrap {

    overflow-x: auto;

    overscroll-behavior-inline: contain;

}

/* RESPQA1 PROJECT-WIDE RESPONSIVE CONTAINMENT END */

/* LOGINUI15 FLUID VIEWPORT START */



/* Desktop / laptop: scale from the available viewport instead of fixed 620/680px heights. */

.erp-login-page {

    box-sizing: border-box;

    width: 100%;

    min-height: 100vh;

    min-height: 100dvh;

    height: 100vh;

    height: 100dvh;

    padding: clamp(14px, 2.8vh, 30px) clamp(14px, 2.5vw, 34px);

    align-items: center;

    justify-content: center;

    overflow-x: hidden;

    overflow-y: auto;

}



.erp-login-wrapper {

    width: clamp(920px, 72vw, 1240px);

    height: clamp(540px, 74dvh, 680px);

    min-height: 0;

    max-width: calc(100vw - 28px);

    max-height: calc(100dvh - 28px);

    flex: 0 1 auto;

}



.erp-login-brand,

.erp-login-form-section {

    height: 100%;

    min-height: 0;

}



.erp-login-brand {

    padding: clamp(34px, 5.8dvh, 62px) clamp(34px, 4vw, 62px);

}



.erp-login-brand-inner {

    max-width: min(470px, 100%);

}



.erp-login-brand .erp-login-logo {

    width: clamp(58px, 7.5dvh, 74px);

    height: clamp(58px, 7.5dvh, 74px);

    border-radius: clamp(15px, 1.4vw, 18px);

}



.erp-login-brand h1 {

    margin-top: clamp(18px, 3.6dvh, 34px);

    margin-bottom: clamp(8px, 1.5dvh, 12px);

    font-size: clamp(32px, 2.7vw, 48px);

}



.erp-login-brand p {

    font-size: clamp(13px, 1.1vw, 16px);

    line-height: 1.55;

}



.erp-login-features {

    gap: clamp(8px, 1.5dvh, 14px);

    margin-top: clamp(22px, 4.2dvh, 42px);

}



.erp-login-features div {

    min-height: clamp(40px, 5.2dvh, 48px);

    padding: clamp(8px, 1.2dvh, 12px) 14px;

    font-size: clamp(12px, 0.95vw, 14px);

}



.erp-login-form-section {

    padding: clamp(30px, 5.6dvh, 60px) clamp(38px, 4.8vw, 76px);

}



.erp-login-form-wrapper {

    max-width: min(430px, 100%);

}



.erp-login-mobile-logo {

    margin-bottom: clamp(12px, 2.4dvh, 22px);

}



.erp-login-partner-logos {

    gap: clamp(10px, 1vw, 16px);

    margin-bottom: clamp(8px, 1.5dvh, 14px);

}



.erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

.erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

    width: clamp(58px, 7.8dvh, 78px);

    height: clamp(58px, 7.8dvh, 78px);

    flex-basis: clamp(58px, 7.8dvh, 78px);

    border-radius: clamp(15px, 1.3vw, 18px);

}



.erp-login-handshake {

    width: clamp(36px, 4.8dvh, 46px);

    height: clamp(36px, 4.8dvh, 46px);

    flex-basis: clamp(36px, 4.8dvh, 46px);

}



.erp-login-handshake span {

    font-size: clamp(17px, 2.2dvh, 21px);

}



.erp-login-mobile-logo h2 {

    margin-top: clamp(8px, 1.4dvh, 14px);

    font-size: clamp(14px, 1.8dvh, 17px);

}



.erp-login-heading {

    margin-bottom: clamp(18px, 3.2dvh, 32px);

}



.erp-login-heading h2 {

    font-size: clamp(29px, 4.2dvh, 38px);

    line-height: 1.08;

}



.erp-login-heading p {

    font-size: clamp(12px, 1.7dvh, 15px);

}



.erp-login-field.mb-3 {

    margin-bottom: clamp(10px, 1.8dvh, 16px) !important;

}



.erp-login-field .form-label {

    margin-bottom: clamp(5px, 0.8dvh, 8px);

    font-size: clamp(12px, 1.45dvh, 13px);

}



.erp-input-group .form-control {

    min-height: 0;

    height: clamp(48px, 6.2dvh, 58px);

    font-size: clamp(13px, 1.7dvh, 15px);

}



#erpLoginForm > .d-flex.mb-4 {

    margin-bottom: clamp(12px, 2.4dvh, 24px) !important;

}



.erp-login-form-wrapper .form-check-label {

    font-size: clamp(12px, 1.5dvh, 13px);

}



.erp-login-button {

    min-height: 0;

    height: clamp(48px, 6dvh, 56px);

    font-size: clamp(14px, 1.8dvh, 16px);

}



.erp-login-footer {

    margin-top: clamp(16px, 3dvh, 34px);

    font-size: clamp(10px, 1.35dvh, 12px);

}



/* Short laptop/browser heights: use nearly all available height and compact vertical rhythm. */

@media (min-width: 901px) and (max-height: 780px) {

    .erp-login-page {

        padding-top: 12px;

        padding-bottom: 12px;

    }



    .erp-login-wrapper {

        height: calc(100dvh - 24px);

        max-height: calc(100dvh - 24px);

    }



    .erp-login-brand {

        padding-top: 28px;

        padding-bottom: 28px;

    }



    .erp-login-form-section {

        padding-top: 26px;

        padding-bottom: 26px;

    }



    .erp-login-mobile-logo {

        margin-bottom: 10px;

    }



    .erp-login-heading {

        margin-bottom: 16px;

    }



    .erp-login-heading h2 {

        font-size: clamp(27px, 4.1dvh, 32px);

    }



    .erp-login-heading p {

        font-size: 12px;

    }



    .erp-login-field.mb-3 {

        margin-bottom: 10px !important;

    }



    #erpLoginForm > .d-flex.mb-4 {

        margin-bottom: 12px !important;

    }



    .erp-login-footer {

        margin-top: 14px;

    }

}



/* Very short landscape screens: keep the whole card usable without clipping. */

@media (min-width: 901px) and (max-height: 620px) {

    .erp-login-page {

        align-items: flex-start;

        padding-top: 8px;

        padding-bottom: 8px;

    }



    .erp-login-wrapper {

        height: auto;

        min-height: 500px;

        max-height: none;

    }



    .erp-login-brand,

    .erp-login-form-section {

        min-height: 500px;

    }



    .erp-login-brand {

        padding-top: 22px;

        padding-bottom: 22px;

    }



    .erp-login-form-section {

        padding-top: 20px;

        padding-bottom: 20px;

    }

}



/* Tablet / mobile: switch to one column and let content define height. */

@media (max-width: 900px) {

    .erp-login-page {

        width: 100%;

        height: auto;

        min-height: 100vh;

        min-height: 100dvh;

        padding: clamp(10px, 3vw, 18px);

        align-items: center;

        overflow-y: auto;

    }



    .erp-login-wrapper {

        width: min(100%, 520px);

        height: auto;

        min-height: 0;

        max-width: 100%;

        max-height: none;

        display: block;

        border-radius: clamp(18px, 4vw, 24px);

    }



    .erp-login-brand {

        display: none;

    }



    .erp-login-form-section {

        width: 100%;

        height: auto;

        min-height: 0;

        padding: clamp(28px, 7vw, 42px) clamp(20px, 7vw, 36px);

    }



    .erp-login-form-wrapper {

        max-width: 440px;

        margin: 0 auto;

    }



    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

        width: clamp(56px, 13vw, 70px);

        height: clamp(56px, 13vw, 70px);

        flex-basis: clamp(56px, 13vw, 70px);

    }



    .erp-login-handshake {

        width: clamp(34px, 8vw, 42px);

        height: clamp(34px, 8vw, 42px);

        flex-basis: clamp(34px, 8vw, 42px);

    }



    .erp-login-heading h2 {

        font-size: clamp(28px, 7vw, 33px);

    }



    .erp-input-group .form-control {

        height: 50px;

    }



    .erp-login-button {

        height: 50px;

    }

}



@media (max-width: 420px) {

    .erp-login-page {

        padding: 8px;

    }



    .erp-login-form-section {

        padding: 26px 18px 24px;

    }



    .erp-login-partner-logos {

        gap: 9px;

    }



    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-brand,

    .erp-login-mobile-logo .erp-login-logo.erp-login-logo-company {

        width: 54px;

        height: 54px;

        flex-basis: 54px;

    }



    .erp-login-handshake {

        width: 34px;

        height: 34px;

        flex-basis: 34px;

    }



    .erp-login-heading h2 {

        font-size: 27px;

    }

}



/* LOGINUI15 FLUID VIEWPORT END */

/* SIDFIX1 — Reserve a real footer slot in the desktop sidebar.
   Keep the mobile footer in normal content flow. */
@media (min-width: 992px) {
    .erp-sidebar .erp-sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        padding-bottom: 12px;
        overscroll-behavior-y: contain;
    }

    .erp-sidebar .erp-sidebar-copyright {
        position: static;
        left: auto;
        bottom: auto;
        width: 100%;
        flex: 0 0 auto;
        z-index: auto;
    }

    .erp-app.sidebar-collapsed .erp-sidebar .erp-sidebar-copyright {
        width: 100%;
        padding: 10px 6px 12px;
    }
}