/* ICANotes Color Palette */
:root {
    --color-primary-green: #7FB619; /* Lime Green */
    --color-secondary-blue: #124E6A; /* Dark Blue/Teal */
    --color-background-light: #F1F1F1; /* Off-White/Light Gray */
}

/* ========================================================= */
/* 1. ZOHO MOBILE MENU FIXES (Provided by Zoho Support)       */
/* ========================================================= */

/* Sets the Burger Menu Icon lines to Dark Blue */
.Header__menuicon .Header__menu, .Header__menuicon .Header__menu:after, .Header__menuicon .Header__menu:before {
    background-color: var(--color-secondary-blue);
}
/* Sets the menu toggle background to transparent */
.Header__navopen .Header__menuToggle {
    background-color: transparent;
}
/* Forces the background of the expanded menu tab to white on screens up to 1024px */
@media only screen and (max-width: 1024px) {
    .Header__navopen .Header__navbar .Header__menuTab, .Header__homeNavbarFixed.Header__navopen .Header__navbar .Header__menuTab {
        background-color: white !important;
    }
}

/* ========================================================= */
/* 2. HEADER AND MENU CUSTOMIZATIONS                         */
/* ========================================================= */

/* Forces the Navigation Bar background to White */
.Header__navbar {
    background-color: white !important;
    border-bottom: 1px solid var(--color-background-light);
}

/* Extreme fix: Forces WHITE background for the container in Mobile/Collapsed state (Overrides the stubborn black) */
.Header__navbar.mobile_header, 
#navBar.mobile_header,
.Header__menuListMobile {
    background-color: white !important; 
    background: white !important;
}

/* Dark Blue color for menu options text (Normal and Expanded) and Company Name */
.Header__menuList li a, 
.Header__name,
.Header__menuListMobile li a { 
    color: var(--color-secondary-blue) !important;
    font-weight: bold !important; 
}
/* Dark Blue color for the Close (X) icon */
.Header__menuicon .menuClose svg path {
    fill: var(--color-secondary-blue) !important;
}

/* ========================================================= */
/* 3. ICONS AND ZOHO BRAND COLORS (ICONS MUST BE GREEN)      */
/* ========================================================= */

/* 🔑 SOLUTION: Ensures brand fills (like Knowledge Base/Tickets icons) are LIME GREEN */
.commonStyle__zt3BrandFill, .commonStyle__zt3Brand {
    fill: var(--color-primary-green) !important;
    color: var(--color-primary-green) !important;
}
/* Ensures brand-colored borders are Green */
.SearchContainer__downArrow{
    border-top-color: var(--color-primary-green) !important;
}


/* ========================================================= */
/* 4. BUTTONS AND FOOTER                                     */
/* ========================================================= */

/* Home Banner: Light Gray background and Dark Blue text */
.Header__searchSection {
    background-color: var(--color-background-light) !important;
}
.Header__searchTitle, 
.Header__description {
    color: var(--color-secondary-blue) !important;
}

/* Footer: Dark Blue background and White text */
.Footer__footerCopyrigt {
    background: var(--color-secondary-blue) !important;
    color: white !important;
}
.Footer__footerCopyrigt span,
.Footer__footerCopyrigt a {
    color: white !important;
}

/* Buttons (Search, Submit Ticket, Back to Top) - Green with Dark Blue Hover */
.SearchContainer__searchIcon,
.AppContainer__backToTop,
.Button__footerBtn {
    background: var(--color-primary-green) !important;
    background-image: none !important;
    border: 1px solid var(--color-primary-green) !important;
    color: white !important; 
    transition: background-color 0.3s ease;
}
/* Sets HOVER state to DARK BLUE */
.SearchContainer__searchIcon:hover,
.Button__footerBtn:hover,
.AppContainer__backToTop:hover {
    background: var(--color-secondary-blue) !important;
    border-color: var(--color-secondary-blue) !important;
    color: white !important;
}
/* Ensures the hover state for other elements (if any) uses Dark Blue */
.SearchContainer__searchIcon:hover,
.AppContainer__backToTop:hover,
.Button__footerBtn:hover {
    background: var(--color-secondary-blue) !important;
}