/* 
   Custom CSS overrides for GN Constructions Dashboard
   Theme color: #13b657 (Green)
   Light variant: #e7f7ee
*/

:root,
[data-bs-theme=light] {
    --bs-primary: #13b657 !important;
    --bs-primary-rgb: 19, 182, 87 !important;
    --bs-primary-text-emphasis: #0c5c2c !important;
    --bs-primary-bg-subtle: #e7f7ee !important;
    --bs-primary-border-subtle: #a2e2bc !important;
    
    --bs-success: #13b657 !important;
    --bs-success-rgb: 19, 182, 87 !important;
    --bs-success-bg-subtle: #e7f7ee !important;
    --bs-success-border-subtle: #a2e2bc !important;
    --bs-success-text-emphasis: #0c5c2c !important;

    --bs-link-color: #13b657 !important;
    --bs-link-hover-color: #0f9246 !important;
    --bs-link-color-rgb: 19, 182, 87 !important;
    --bs-link-hover-color-rgb: 15, 146, 70 !important;

    --bs-header-bg-dark: #13b657 !important;
    --bs-header-bg: #fff !important;
}

[data-bs-theme=dark] {
    --bs-primary: #13b657 !important;
    --bs-primary-rgb: 19, 182, 87 !important;
    --bs-primary-text-emphasis: #7ee2a2 !important;
    --bs-primary-bg-subtle: #093c1e !important;
    --bs-primary-border-subtle: #116832 !important;
    
    --bs-success: #13b657 !important;
    --bs-success-rgb: 19, 182, 87 !important;
    --bs-success-bg-subtle: #093c1e !important;
    --bs-success-border-subtle: #116832 !important;
    --bs-success-text-emphasis: #7ee2a2 !important;

    --bs-link-color: #7ee2a2 !important;
    --bs-link-hover-color: #9eecc0 !important;
    --bs-link-color-rgb: 126, 226, 162 !important;
    --bs-link-hover-color-rgb: 158, 236, 192 !important;
}

/* Header Topbar brand box styling */
[data-topbar=dark] .navbar-brand-box {
    background-color: #e7f7ee !important;
    border-right: 1px solid rgba(19, 182, 87, 0.15) !important;
    border-bottom: 1px solid rgba(19, 182, 87, 0.15) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 70px !important;
}

/* Perfect alignment and centering for the logo image */
.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

.logo img {
    max-height: 48px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Fix double logo display by ensuring inactive logo theme is hidden */
[data-topbar=dark] .logo-dark {
    display: none !important;
}
[data-topbar=light] .logo-light {
    display: none !important;
}

/* Ensure hamburger menu toggle is always visible */
#vertical-menu-btn {
    display: block !important;
}

/* When sidebar is collapsed (closed), hamburger menu is over the green topbar, so make it white */
body[data-sidebar-size=sm] #vertical-menu-btn {
    color: #ffffff !important;
}

/* When sidebar is expanded (opened), hamburger menu is over the light brand box, so make it the header green color */
body:not([data-sidebar-size=sm]) #vertical-menu-btn {
    color: #13b657 !important;
}


/* Sidebar hover state in collapsed mode (show white background and green text for section name popups) */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #ffffff !important;
    color: #13b657 !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a span {
    color: #13b657 !important;
    font-weight: 600 !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a svg {
    color: #13b657 !important;
}

/* Sidebar Menu active state overrides */
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active {
    color: #13b657 !important;
    background-color: #e7f7ee !important;
    font-weight: 600;
}

#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li.mm-active > a svg,
#sidebar-menu ul li a.active i,
#sidebar-menu ul li a.active svg {
    color: #13b657 !important;
}

/* Sidebar Menu hover state overrides */
#sidebar-menu ul li a:hover {
    color: #13b657 !important;
    background-color: rgba(19, 182, 87, 0.08) !important;
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover svg {
    color: #13b657 !important;
}