/* ============================================================
   MORETECH ERP — NAVBAR SYSTEM
   File: erp_navbar.css
   Version: v2026.7
   Scope: .erp-navbar.concept-a + .customer-portal overlay
   Architecture: Mobile-First, Token-Driven
============================================================ */


/* ============================================================
   DESIGN TOKENS (LOCAL)
============================================================ */

.erp-navbar.concept-a {
    --nav-bg: #ffffff;
    --nav-soft-bg: #f6f9fd;
    --nav-border: var(--erp-border-light, #eaeef3);

    --nav-primary: #0d6efd;
    --nav-primary-soft: #eef4ff;
    --nav-primary-border: #cfe2ff;

    --nav-text: var(--erp-text-dark, #1a1d21);
    --nav-text-muted: var(--erp-text-light, #7b8794);

    --nav-radius: 999px;
    --nav-item-gap: 8px;
    --nav-transition: 0.2s ease;
}


/* ============================================================
   CORE NAVBAR CONTAINER
============================================================ */

.erp-navbar.concept-a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    gap: 20px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
}


/* ============================================================
   GLOBAL NAVBAR LINK RESET
============================================================ */

.erp-navbar a {
    text-decoration: none;
    font-weight: 500;
}

.erp-navbar a:hover {
    text-decoration: none;
}


/* ============================================================
   BRANDING (LOGO + MODULE CONTEXT)
============================================================ */

.erp-navbar.concept-a .erp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.erp-navbar.concept-a .erp-logo-image {
    height: 72px;
    max-width: 190px;
    object-fit: contain;
}

.erp-navbar.concept-a .erp-brand-subtitle {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--nav-text-muted);
    letter-spacing: 0.3px;
    white-space: nowrap;
}


/* ============================================================
   CENTER NAV GROUP (PRIMARY DOMAINS)
============================================================ */

.erp-navbar.concept-a .erp-nav-main {
    display: flex;
    align-items: center;
    gap: var(--nav-item-gap);
    padding: 5px;
    border-radius: var(--nav-radius);
    background: var(--nav-soft-bg);
    border: 1px solid var(--nav-border);
}


/* ============================================================
   NAV ITEMS (DOMAIN BUTTONS)
============================================================ */

.erp-navbar.concept-a .erp-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--nav-radius);
    background: transparent;
    border: 1px solid transparent;
    color: var(--nav-text);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--nav-transition);
    white-space: nowrap;
}

.erp-navbar.concept-a .erp-nav-item i {
    font-size: 0.88rem;
    opacity: 0.85;
}

/* Hover */
.erp-navbar.concept-a .erp-nav-item:hover {
    background: var(--erp-bg-white, #ffffff);
    border-color: var(--nav-border);
    box-shadow: var(--erp-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.04));
}

/* Active */
.erp-navbar.concept-a .erp-nav-item.active,
.erp-navbar.concept-a .erp-nav-item.active > a {
    background: linear-gradient(135deg, var(--nav-primary-soft), #f7faff);
    border-color: var(--nav-primary-border);
    color: var(--nav-primary);
}


/* ============================================================
   DROPDOWNS — ERP STYLE
============================================================ */

.erp-navbar.concept-a .dropdown-menu {
    min-width: 240px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--nav-border);
    background: var(--erp-bg-white, #ffffff);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
    animation: erpDropFade 0.15s ease;
}

@keyframes erpDropFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.erp-navbar.concept-a .dropdown-item {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--nav-text);
    transition: var(--nav-transition);
}

.erp-navbar.concept-a .dropdown-item i {
    min-width: 18px;
    opacity: 0.75;
}

.erp-navbar.concept-a .dropdown-item:hover {
    background: var(--nav-primary-soft);
    color: var(--nav-primary);
}

.erp-navbar.concept-a .dropdown-item.active {
    background: var(--nav-primary-soft);
    color: var(--nav-primary);
    font-weight: 600;
}


/* ============================================================
   RIGHT SIDE — USER / HELP / SYSTEM
============================================================ */

.erp-navbar.concept-a .erp-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon-only buttons */
.erp-navbar.concept-a .erp-nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--nav-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--erp-bg-white, #ffffff);
    color: var(--erp-text-medium, #4b5563);
    transition: var(--nav-transition);
    flex-shrink: 0;
}

.erp-navbar.concept-a .erp-nav-icon:hover {
    background: var(--nav-primary-soft);
    color: var(--nav-primary);
}

/* User dropdown */
.erp-navbar.concept-a .erp-nav-actions .erp-nav-item {
    background: var(--nav-soft-bg);
    border: 1px solid var(--nav-border);
    padding: 7px 14px;
    font-weight: 600;
}


/* ============================================================
   BACK-TO-ERP ICON (CUBE)
============================================================ */

.erp-navbar.concept-a .erp-nav-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.erp-navbar.concept-a .erp-nav-icon:hover img {
    transform: scale(1.08);
    opacity: 1;
}


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

@media (max-width: 992px) {
    .erp-navbar.concept-a {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }

    .erp-navbar.concept-a .erp-brand {
        justify-content: space-between;
    }

    .erp-navbar.concept-a .erp-nav-main {
        flex-direction: column;
        border-radius: 14px;
        padding: var(--erp-space-sm, 8px);
    }

    .erp-navbar.concept-a .erp-nav-item {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 14px;
    }

    .erp-navbar.concept-a .erp-nav-actions {
        justify-content: space-between;
    }
}


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

@media (max-width: 576px) {
    .erp-navbar.concept-a {
        padding: 10px 12px;
    }

    .erp-navbar.concept-a .erp-logo-image {
        height: 44px;
        max-width: 150px;
    }

    .erp-navbar.concept-a .erp-brand-subtitle {
        display: none;
    }

    .erp-navbar.concept-a .erp-nav-item {
        font-size: 0.82rem;
        padding: 10px 12px;
    }

    .erp-navbar.concept-a .erp-nav-icon {
        width: 36px;
        height: 36px;
    }

    .erp-navbar.concept-a .erp-nav-actions .erp-nav-item {
        padding: 7px 10px;
        font-size: 0.8rem;
    }
}


/* ============================================================
   CUSTOMER PORTAL — NAVBAR IDENTITY OVERRIDES
   Scope: .erp-navbar.concept-a.customer-portal
============================================================ */

.erp-navbar.concept-a.customer-portal {
    --nav-bg: #ffffff;
    --nav-soft-bg: #f8fbff;
    --nav-border: var(--erp-border-light, #eaeef3);

    --nav-primary: #0dcaf0;
    --nav-primary-soft: #e6faff;
    --nav-primary-border: #bfefff;

    --nav-text: var(--erp-text-dark, #1a1d21);
    --nav-text-muted: #6c7a89;
}

/* Brand Subtitle */
.erp-navbar.concept-a.customer-portal .erp-brand-subtitle {
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--nav-text-muted);
}

/* Main Nav Group — Softer */
.erp-navbar.concept-a.customer-portal .erp-nav-main {
    background: linear-gradient(180deg, var(--nav-soft-bg), #ffffff);
}

/* Active State */
.erp-navbar.concept-a.customer-portal .erp-nav-item.active,
.erp-navbar.concept-a.customer-portal .erp-nav-item.active > a {
    background: linear-gradient(135deg, var(--nav-primary-soft), #f7fdff);
    border-color: var(--nav-primary-border);
    color: var(--nav-primary);
}

/* Hover */
.erp-navbar.concept-a.customer-portal .erp-nav-item:hover {
    background: #ffffff;
    border-color: var(--nav-primary-border);
    box-shadow: 0 4px 14px rgba(13, 202, 240, 0.12);
}

/* Dropdown */
.erp-navbar.concept-a.customer-portal .dropdown-menu {
    border-color: var(--nav-primary-border);
}

.erp-navbar.concept-a.customer-portal .dropdown-item:hover {
    background: var(--nav-primary-soft);
    color: var(--nav-primary);
}

/* Right Actions */
.erp-navbar.concept-a.customer-portal .erp-nav-actions .erp-nav-item {
    background: #ffffff;
    border-color: var(--nav-border);
}

.erp-navbar.concept-a.customer-portal .erp-nav-actions .erp-nav-item:hover {
    background: var(--nav-primary-soft);
    color: var(--nav-primary);
}