/* =============================================
   SIDEBAR / NAV MENU STYLES
   ============================================= */

.sidebar-container {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: 100vh;
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

body.sidebar-collapsed .sidebar-container {
    transform: translateX(-260px);
}

/* ---- Logo ---- */

.logo-area {
    width: 260px;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px;
}

.logo-img {
    width: 136px;
    height: 100px;
    object-fit: contain;
    display: block;
}

/* ---- Menu wrapper ---- */

.menu-items-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    gap: 6px;
    overflow-y: auto;
    box-sizing: border-box;
}

.menu-items-wrapper::-webkit-scrollbar { width: 4px; }
.menu-items-wrapper::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 2px;
}

/* =============================================
   MAIN NAV ITEM (shared base for <a> and <button>)
   ============================================= */

.menu-item-link {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #4a4a4a;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.15s, color 0.15s;
    line-height: 42px;
    height: 42px;
    width: 100%;
    box-sizing: border-box;
    /* reset button defaults */
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.menu-item-link:hover:not(.nav-active) {
    background-color: #f5f5f5;
    color: #111111;
}

/* =============================================
   ACTIVE STATE  —  dark pill
   ============================================= */

.menu-item-link.nav-active {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600 !important;
}

.menu-item-link.nav-active .menu-icon svg {
    stroke: #ffffff !important;
    fill: none;
}

.menu-item-link.nav-active .menu-icon svg.fill-icon {
    fill: #ffffff !important;
    stroke: none;
}

/* Santej active icon — turn white */
.menu-item-link.nav-active .nav-icon {
    filter: brightness(0) invert(1);
}

.menu-item-link.nav-active .expand-icon {
    color: #ffffff;
}

/* =============================================
   ICON + TEXT
   ============================================= */

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}

.menu-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #555555;
    stroke-width: 1.8;
}

.menu-icon svg.fill-icon {
    fill: #555555;
    stroke: none;
}

/* SVG img icon */
.nav-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    /* default: keep original SVG colors */
    filter: none;
    transition: filter 0.15s;
}

.menu-text {
    flex: 1;
    white-space: nowrap;
}

/* =============================================
   EXPAND CHEVRON  (Reports collapse)
   ============================================= */

.expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    color: #777777;
}

.expand-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    transition: transform 0.2s ease;
}

/* chevron rotates up when open */
.expand-icon.expanded svg {
    transform: rotate(180deg);
}

/* =============================================
   SUB-MENU ITEMS
   ============================================= */

.menu-sub-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 4px 14px;
}

.menu-sub-link {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    color: #aaaaaa;          /* muted/grey by default (unselected) */
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.3;
    transition: color 0.15s;
}

.menu-sub-link:hover:not(.menu-sub-active) {
    color: #555555;
}

/* Selected sub-item — dark text only, no background pill */
.menu-sub-link.menu-sub-active {
    color: #1a1a1a !important;
    font-weight: 700;
    background-color: transparent !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
    .sidebar-container {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    .logo-area { margin: 0 auto; }
    .menu-items-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 8px;
        gap: 6px;
    }
    .menu-item-link {
        height: auto;
        padding: 6px 12px;
        line-height: 1.5;
    }
}

/* =============================================
   HAJIPUR BRANCH — active item override
   Light blue pill + dark-blue left border
   ============================================= */

.hajipur-nav .menu-item-link.nav-active {
    background-color: #E8ECFF !important;
    color: #1A2DB5 !important;
    border-radius: 8px !important;
    border-left: 4px solid #1A2DB5 !important;
    font-weight: 700 !important;
}

.hajipur-nav .menu-item-link.nav-active .menu-icon svg {
    stroke: #1A2DB5 !important;
    fill: none !important;
}

.hajipur-nav .menu-item-link.nav-active .menu-icon svg.fill-icon {
    fill: #1A2DB5 !important;
    stroke: none !important;
}

.hajipur-nav .menu-item-link.nav-active .expand-icon {
    color: #1A2DB5 !important;
}

/* Hajipur active icon — turn purple/dark-blue */
.hajipur-nav .menu-item-link.nav-active .nav-icon {
    /* invert(21%) sepia(96%) saturate(2000%) hue-rotate(214deg) = approx #1A2DB5 */
    filter: invert(21%) sepia(96%) saturate(700%) hue-rotate(214deg) brightness(80%) !important;
}

.hajipur-nav .menu-item-link:hover:not(.nav-active) {
    background-color: #f0f3ff;
    color: #1A2DB5;
}