/* BENECO Executive Dashboard Theme (light green + yellow) Palette: light green backgrounds + yellow accents */ :root{ /* Core palette */ --theme-green: #16a34a; /* primary green */ --theme-green-50: #ecfdf5; /* very light green */ --theme-yellow: #f59e0b; /* accent yellow */ --theme-yellow-50: #fffbeb; /* pale yellow */ --theme-orange: #ff6600; /* new accent orange for headers */ /* Header */ --header-bg-start: #F9FAFB; /* light mode header */ --header-bg-end: #F9FAFB; --header-text: #064e3b; /* Sidebar (light) */ --sidebar-bg-start: #F9FAFB; /* light mode sidebar */ --sidebar-bg-end: #F9FAFB; --sidebar-border: #e5e5e5; --sidebar-text: #0f1724; --sidebar-icon: #2f5233; /* Surface / typography */ --surface: #ffffff; --surface-2: #f0f2f5; /* a touch darker than before */ --on-surface: #0f1724; --muted: #6b7280; /* Accent */ --accent: var(--theme-green); --accent-strong: var(--theme-yellow); --theme-purple: #8b5cf6; /* Card outlines differ by theme */ --card-outline: var(--theme-green); } /* Dark theme override: add the class "theme-dark" to or to enable */ .theme-dark { --header-bg-start: #121212; /* dark mode header */ --header-bg-end: #121212; --header-text: #e6f7ef; --sidebar-bg-start: #121212; /* dark mode sidebar */ --sidebar-bg-end: #121212; --sidebar-border: rgba(255,255,255,0.03); --sidebar-text: #e6f7ef; --sidebar-icon: #86efac; --surface: #0b1220; --surface-2: #0f1724; /* elevated surface for panels in dark mode */ --on-surface: #e6f7ef; --muted: #9aa6b2; --accent: #16a34a; --accent-strong: #f59e0b; /* card border for dark mode (yellow) */ --card-outline: #f59e0b; } /* ========================== 1. HEADER STYLING (light) ========================== */ .header { background: linear-gradient(135deg, var(--header-bg-start) 0%, var(--header-bg-end) 100%) !important; /* switched to orange accent for header border */ border-bottom: 3px solid var(--theme-orange) !important; box-shadow: 0 3px 8px rgba(6, 78, 59, 0.05) !important; height: 60px; left: 0; position: fixed; right: 0; top: 0; z-index: 1002; color: var(--text-dark); } .header .header-left { float: left; height: 60px; padding: 0 20px; position: relative; text-align: center; width: 230px; z-index: 1; transition: all 0.3s ease; /* use orange shade for header-left divider */ border-right: 2px solid rgba(255, 102, 0, 0.12); } .header .header-left .logo { display: inline-block; line-height: 60px; transition: transform 0.3s ease; } .header .header-left .logo:hover { transform: scale(1.05); } .page-title-box h3 { color: var(--text-dark) !important; font-size: 18px; font-weight: 600; margin: 0; } .bar-icon span { background-color: var(--theme-green) !important; } /* ========================== 2. SIDEBAR STYLING ========================== */ .sidebar { background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%) !important; border-right: 1px solid var(--sidebar-border) !important; bottom: 0; left: 0; margin-top: 0; position: fixed; top: 60px; transition: all 0.3s ease-in-out; width: 230px; z-index: 1001; box-shadow: 2px 0 18px rgba(2,6,23,0.25); } .sidebar-inner { height: 100%; transition: all 0.2s ease-in-out; background: inherit; } .sidebar-menu { padding: 15px 0; } .sidebar-menu ul { font-size: 14px; list-style-type: none; margin: 0; padding: 0; position: relative; } .sidebar-menu li a { color: var(--sidebar-text) !important; display: block; font-size: 14px; height: auto; padding: 12px 20px; border-left: 3px solid transparent; transition: all 0.2s ease; position: relative; } .sidebar-menu li a i { color: var(--sidebar-icon); margin-right: 10px; font-size: 16px; transition: all 0.2s ease; } .sidebar-menu li a:hover { color: #2F5233 !important; background-color: rgba(47, 82, 51, 0.08); border-left-color: #DBA40E; padding-left: 18px; } .sidebar-menu li a:hover i { color: #DBA40E; transform: translateX(2px); } .sidebar-menu li.active a { color: #2F5233 !important; background-color: rgba(47, 82, 51, 0.12); border-left: 3px solid #DBA40E; font-weight: 600; padding-left: 18px; } .sidebar-menu li.active a i { color: #DBA40E; } .menu-title { padding: 15px 20px 10px 20px !important; color: #DBA40E !important; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-top: 10px; } .menu-title:first-child { margin-top: 0; } .menu-title span { display: block; } /* Submenu styling */ .sidebar-menu ul ul { background-color: rgba(47, 82, 51, 0.03); border-left: 1px solid #DBA40E; margin-left: 0; } .sidebar-menu ul ul a { color: #555; padding-left: 35px !important; font-size: 13px; font-weight: 500; } .sidebar-menu ul ul a:hover { color: #2F5233 !important; border-left-color: #DBA40E; background-color: rgba(47, 82, 51, 0.08); } .sidebar-menu ul ul a.active { color: #2F5233 !important; border-left-color: #DBA40E; background-color: rgba(47, 82, 51, 0.12); } /* Menu arrow styling */ .sidebar-menu .menu-arrow { float: right; margin-top: 5px; border-width: 0 2px 2px 0; border-color: #2F5233; transition: all 0.3s ease; } .sidebar-menu li a.subdrop .menu-arrow { border-color: #DBA40E; transform: rotate(-45deg); } /* ========================== 3. USER MENU STYLING ========================== */ .user-menu.nav > li > a { color: #fff !important; font-size: 14px; line-height: 60px; padding: 0 15px; height: 60px; transition: all 0.2s ease; } .user-menu.nav > li > a:hover, .user-menu.nav > li > a:focus { background-color: rgba(219, 164, 14, 0.15); color: #DBA40E !important; } .main-drop .user-img img { border-radius: 50%; width: 30px; border: 2px solid #DBA40E; transition: all 0.2s ease; } .main-drop .user-img img:hover { transform: scale(1.1); } .user-img .status.online { background-color: #27ae60 !important; } /* ========================== 4. DROPDOWN MENU STYLING ========================== */ .dropdown-menu { border: none; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 8px 0; } .dropdown-menu .dropdown-item { color: #2d3436; padding: 8px 20px; transition: all 0.2s ease; border-left: 3px solid transparent; } .dropdown-menu .dropdown-item:hover { background-color: rgba(47, 82, 51, 0.08); color: #2F5233; border-left-color: #DBA40E; padding-left: 18px; } .dropdown-menu .dropdown-item.active { background-color: rgba(47, 82, 51, 0.12); color: #2F5233; border-left-color: #DBA40E; } .dropdown.show > .dropdown-menu, .dropdown-menu.show { display: block; opacity: 1; visibility: visible; z-index: 2000; } /* ========================== 5. RESPONSIVE SIDEBAR ========================== */ @media (max-width: 768px) { .sidebar { width: 250px; margin-left: -250px; transition: margin-left 0.3s ease; } .sidebar.opened { margin-left: 0; } .sidebar-menu li a { padding: 10px 15px; } .sidebar-menu ul ul a { padding-left: 30px !important; } } /* ========================== 6. LOADER OVERLAY ========================== */ #loader-overlay { background: rgba(47, 82, 51, 0.95) !important; } #loader-overlay .text-light { color: #fff !important; } #loader-overlay .spinner-border { border-color: rgba(219, 164, 14, 0.3) !important; border-right-color: #DBA40E !important; } /* ========================== 7. GENERAL ENHANCEMENTS ========================== */ body { background-color: var(--surface) !important; color: var(--on-surface); } /* Smooth transitions */ * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Focus states for accessibility */ a:focus, button:focus, input:focus, select:focus { outline: 2px solid #DBA40E; outline-offset: 2px; } /* ========================== 8. TOOLTIP & BADGE STYLING ========================== */ .badge { background-color: #DBA40E !important; color: #2F5233 !important; font-weight: 700; } .noti-dot { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }