/*

	Rename this file to custom.css to start using it. This CSS file will automatically be loaded by the template and will allow you to override any CSS.
	
	Learn more about customizing CSS: https://www.zomex.com/docs/whmcs-templates/how-to-add-custom-css/	
	
*/
	

:root {

	/* Primary color */
		
	--color-primary-background: #38a509;
	--color-primary-background-gradient-top: #30c940;
	--color-primary-background-gradient-bottom: #00dc00;
	--color-primary-background-border: #000;
	--color-primary-background-shadow: #000;	
	--color-primary-foreground: #000;
	--color-primary-foreground-shadow: #44a522;

}

/* WHMCS Client Area Dropdown: Black Background */
.navbar-nav .dropdown-menu {
    background-color: #000000 !important;
    border-color: #222222 !important;
}

/* Dropdown Text Links: White */
.navbar-nav .dropdown-menu a, 
.navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    background: transparent !important;
}

/* Hover State: Background stays dark, text shifts color */
.navbar-nav .dropdown-menu a:hover, 
.navbar-nav .dropdown-menu .dropdown-item:hover {
    color: #dddddd !important;
    background-color: #1a1a1a !important;
}

/* =========================================
   FORCE DARK MODE (Global Override)
   ========================================= */

/* 1. Force the system browser controls to dark mode */
:root, 
html, 
body {
    color-scheme: dark !important;
}

/* 2. Force WHMCS and Twenty-One framework variables to dark mode */
:root,
html,
body,
html[data-theme],
body[data-theme],
html[data-theme="light"],
body[data-theme="light"] {
    --twentyone-dark-mode: 1 !important;
    --theme-dark-mode: 1 !important;
    --style-dark-mode: 1 !important;
}

/* 3. Disable any CSS that tries to revert back to light styling */
@media (prefers-color-scheme: light) {
    :root, html, body {
        color-scheme: dark !important;
        --twentyone-dark-mode: 1 !important;
    }
}