/* ———————————————— Neon Glass Theme for Hydrowise Light and Dark mode overrides for existing classes Apply light: document.documentElement.setAttribute('data-theme', 'light') Apply dark: document.documentElement.setAttribute('data-theme', 'dark') Remove: document.documentElement.removeAttribute('data-theme') ———————————————— */ /* ════════════════════════════════════════════════════════════════════════════ CRITICAL FIXES - Dashboard Pages, Sidebars, Tiles Panel ════════════════════════════════════════════════════════════════════════════ */ /* default: dark theme shows dark logo */ .logo-dark { display : inline-block; } .logo-light { display : none; } /* when theme is light, swap */ html[data-theme="light"] .logo-dark { display : none; } html[data-theme="light"] .logo-light { display : inline-block; } /* FIX: Left sidebar menu - force dark background with visible text */ html[data-theme="dark"] .sidemenu { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .navigatordiv { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .sidebar-container { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .neo-sidemenu { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .sidebar_card_container { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .sidemenu_card_container { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .sidemenucontainer-title { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .sidemenucontainer-label { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .sidemenucontainer-div { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] .builder-footer-div .navigatordiv { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] [id*="PopupMenu"] { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] [class*="popup"] { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] [class*="Popup"] { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; } /* FIX: Menu items inside the sidebar - transparent background */ html[data-theme="dark"] .sidemenucontainer-div > div{ background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] .navigatordiv > div{ background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] [id*="PopupMenu"] > div{ background : transparent !important; background-color : transparent !important; } /* FIX: sidemenucontainer-div (settings section in sidebar) */ html[data-theme="dark"] .sidemenucontainer-div { background : transparent !important; background-color : transparent !important; color : #F2F2F2 !important; } /* FIX: Builder footer - the bottom bar with plus icon, tiles, help */ html[data-theme="dark"] .builder-footer-div { background : #0F1219 !important; background-color : #0F1219 !important; border-top : 1px solid rgba(0, 255, 255, 0.15) !important; } /* FIX: Status message div (bottom left - BETA VERSION etc) */ html[data-theme="dark"] .builder-footer-div { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] .sidebar_card_container { background : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] .sidemenu_card_container { background : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] .sidebar_card_title { color : #F2F2F2 !important; } html[data-theme="dark"] .sidebar_card_title label { color : #F2F2F2 !important; } html[data-theme="dark"] .sidemenu_card_container label { color : #F2F2F2 !important; } /* FIX: Tiles slide-out panel - keep original styling */ html[data-theme="dark"] .tiles-panel { background : #0F1219 !important; } html[data-theme="dark"] .tiles-container { background : #0F1219 !important; } html[data-theme="dark"] .slide-panel { background : #0F1219 !important; } html[data-theme="dark"] .slidepanel { background : #0F1219 !important; } html[data-theme="dark"] .tile-image-card { background : transparent !important; box-shadow : none !important; } html[data-theme="dark"] .neo-image-card { background : transparent !important; box-shadow : none !important; } html[data-theme="dark"] .dashboard-imagecard { background : transparent !important; box-shadow : none !important; } html[data-theme="dark"] .tile-image-card::before { display : none !important; content : none !important; } html[data-theme="dark"] .neo-image-card::before { display : none !important; content : none !important; } html[data-theme="dark"] .dashboard-imagecard::before { display : none !important; content : none !important; } html[data-theme="dark"] .tile-image-card::after { display : none !important; content : none !important; } html[data-theme="dark"] .neo-image-card::after { display : none !important; content : none !important; } html[data-theme="dark"] .dashboard-imagecard::after { display : none !important; content : none !important; } html[data-theme="dark"] .tile-image-card img { filter : none !important; opacity : 1 !important; } html[data-theme="dark"] .neo-image-card img { filter : none !important; opacity : 1 !important; } html[data-theme="dark"] .dashboard-imagecard img { filter : none !important; opacity : 1 !important; } html[data-theme="dark"] .login-card { background : rgba(23, 28, 40, 0.9) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .login-box { background : rgba(23, 28, 40, 0.9) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4) !important; } /* FIX: Top left logo/icon - make visible */ html[data-theme="dark"] .logo-icon { opacity : 1 !important; filter : brightness(1.2) !important; } html[data-theme="dark"] .header-logo { opacity : 1 !important; filter : brightness(1.2) !important; } html[data-theme="dark"] .menubar-logo { opacity : 1 !important; filter : brightness(1.2) !important; } html[data-theme="dark"] .logo-icon i { color : #00FFFF !important; } html[data-theme="dark"] .header-logo i { color : #00FFFF !important; } /* Dashboard canvas and card fixes are at BOTTOM of file */ /* FIX: ECharts / chart legend and axis - dark background */ html[data-theme="dark"] .echarts-legend { background-color : transparent !important; background : transparent !important; color : #94a3b8 !important; } html[data-theme="dark"] [class*="echarts"] { background-color : transparent !important; background : transparent !important; color : #94a3b8 !important; } html[data-theme="dark"] canvas + div { background-color : transparent !important; background : transparent !important; color : #94a3b8 !important; } html[data-theme="dark"] .chart-legend { background-color : transparent !important; background : transparent !important; color : #94a3b8 !important; } html[data-theme="dark"] .legend-container { background-color : transparent !important; background : transparent !important; color : #94a3b8 !important; } /* FIX: Neo image cards in dark mode - remove grey background and shadows */ html[data-theme="dark"] .neo-image-card { background : #171C28 !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] .neo-image-card-title { background : rgba(23, 28, 40, 0.95) !important; color : #F2F2F2 !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] .neo-image-card-image { background-color : transparent !important; box-shadow : none !important; } html[data-theme="dark"] .neo-image { background : transparent !important; } html[data-theme="dark"] .neo-image-card-body { color : #94a3b8 !important; } html[data-theme="dark"] .neo-image-card-footer { color : #64748b !important; } /* FIX: Sidebar panel by ID */ html[data-theme="dark"] #css_top_panel_card_id { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] #css_top_panel_icons { background : #0F1219 !important; background-color : #0F1219 !important; color : #F2F2F2 !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } /* FIX: TMS TreeView in dark mode */ html[data-theme="dark"] .TMSFNCTreeView { background : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] [class*="TreeView"] { background : #0F1219 !important; color : #F2F2F2 !important; } /* FIX: WebScrollBox backgrounds */ html[data-theme="dark"] .SlidePanelScrollBox { background : #0F1219 !important; } html[data-theme="dark"] [class*="ScrollBox"] { background : #0F1219 !important; } /* FIX: WebPanel backgrounds that might be white */ html[data-theme="dark"] .TopPanel { background : #0F1219 !important; } html[data-theme="dark"] [id*="TopPanel"] { background : #0F1219 !important; } /* FIX: Dashboard clean.css overrides - card headers, sidebars */ html[data-theme="dark"] .card_headerdiv { background-color : rgba(23, 28, 40, 0.95) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 1px 8px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .card_headerdiv:hover { background-color : rgba(0, 255, 255, 0.1) !important; box-shadow : 0 0 10px rgba(0, 255, 255, 0.3) !important; } html[data-theme="dark"] .card_title { color : #F2F2F2 !important; } html[data-theme="dark"] .card_subtitle { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-left-paneldiv { background-color : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] .dashboard-topleft-cornerdiv { border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 5px 0px 10px 1px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .createdashboarddiv { background : transparent !important; } /* FIX: Dashboard icon visibility */ html[data-theme="dark"] .dashboard-icon { color : #00FFFF !important; } html[data-theme="dark"] .dashboard-icon i { color : #00FFFF !important; } html[data-theme="dark"] .dashboard-title { color : #F2F2F2 !important; } html[data-theme="dark"] .large_icon { color : #00FFFF !important; } html[data-theme="dark"] .large_icon i { color : #00FFFF !important; } /* FIX: Icon buttons in headers */ html[data-theme="dark"] .icon-button-medium { color : #94a3b8 !important; } html[data-theme="dark"] .icon-button-medium i { color : #94a3b8 !important; } html[data-theme="dark"] .icon-button-medium:hover { color : #00FFFF !important; } html[data-theme="dark"] .icon-button-medium:hover i { color : #00FFFF !important; } /* FIX: Dashboard card list (sidebar items) */ html[data-theme="dark"] .dashboard-card-list { background : #0F1219 !important; } html[data-theme="dark"] .dashboard-card-list > div { background : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-card-list > div:hover { background : rgba(0, 255, 255, 0.1) !important; border-color : rgba(0, 255, 255, 0.25) !important; } /* FIX: Horizontal/vertical div containers */ html[data-theme="dark"] .horizontal-leftcenter { background : transparent !important; } html[data-theme="dark"] .horizontal-div-rightaligned { background : transparent !important; } html[data-theme="dark"] .vertical-div-container { background : transparent !important; } /* FIX: Login page form container - override clWhite */ html[data-theme="dark"] .LoginView { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] [class*="Login"] { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] .logindiv { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] .logintable { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] .content { background : rgba(23, 28, 40, 0.9) !important; box-shadow : -3px -3px 7px rgba(0, 255, 255, 0.1), 2px 2px 5px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .content .text { color : #F2F2F2 !important; } html[data-theme="dark"] .field .input { background : rgba(20, 25, 40, 0.8) !important; color : #F2F2F2 !important; box-shadow : inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .field .input:focus { box-shadow : inset 1px 1px 2px rgba(0, 0, 0, 0.3), inset -1px -1px 2px rgba(255, 255, 255, 0.03), 0 0 0 2px rgba(0, 255, 255, 0.2) !important; } html[data-theme="dark"] .field .label { color : #94a3b8 !important; } html[data-theme="dark"] .forgot-pass a { color : #94a3b8 !important; } html[data-theme="dark"] .sign-up { color : #94a3b8 !important; } html[data-theme="dark"] .sign-up a { color : #00FFFF !important; } html[data-theme="dark"] .button { background : linear-gradient(135deg, #00FFFF 0%, #0EA5E9 100%) !important; color : #0F1219 !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.3) !important; } html[data-theme="dark"] .button:focus { color : #0F1219 !important; box-shadow : inset 2px 2px 5px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 255, 255, 0.4) !important; } /* FIX: WebGridPanel with Color=clWhite */ html[data-theme="dark"] [class*="GridPanel"] { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] [class*="WebGridPanel"] { background : transparent !important; background-color : transparent !important; } /* FIX: Generic panel/div with white background */ html[data-theme="dark"] .WebPanel { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] [class*="Panel"][style*="background"] { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] div[style*="background-color: white"] { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] div[style*="background-color: rgb(255, 255, 255)"] { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] div[style*="background: white"] { background : transparent !important; background-color : transparent !important; } html[data-theme="dark"] div[style*="background: rgb(255, 255, 255)"] { background : transparent !important; background-color : transparent !important; } /* FIX: navigatordiv - the main sidebar container */ html[data-theme="dark"] .navigatordiv { background : #0F1219 !important; background-color : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.15) !important; } /* FIX: PanelHeaderFont - sidebar title text */ html[data-theme="dark"] .PanelHeaderFont { color : #F2F2F2 !important; } /* FIX: TWebSideBar items */ html[data-theme="dark"] .TWebSideBar { background : #0F1219 !important; } html[data-theme="dark"] [class*="SideBar"] { background : #0F1219 !important; } html[data-theme="dark"] .TWebSideBar > div { background : #171C28 !important; color : #F2F2F2 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] [class*="SideBar"] > div { background : #171C28 !important; color : #F2F2F2 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } /* FIX: horizcenterdivcontainer - main container */ html[data-theme="dark"] .horizcenterdivcontainer { background : #214a87 !important; } html[data-theme="dark"] { background-color : #293453 !important ; /*#0F1219 !important; */ background-size : 40px 40px !important; color : #F2F2F2 !important; } html[data-theme="dark"] body { background-color : #293453 !important ; /*#0F1219 !important; */ background-size : 40px 40px !important; color : #F2F2F2 !important; } /* Force all major containers */ html[data-theme="dark"] .homepagecontainer{ background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .dashboard-container { background-color : #214a87 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; padding-right : 20px !important; } html[data-theme="dark"] .tile-container{ background-color : #9ac1ff !important ; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; padding : 6px; } html[data-theme="dark"] .builder-main-div{ background-color : #214a87 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .container { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .main-content { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .dashboardbodydiv { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .hero-panel { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } /*#00ffff1a */ /* Force cards to be #171C28 with cyan border */ html[data-theme="dark"] .carddiv { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } html[data-theme="dark"] .card { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } html[data-theme="dark"] .tilecard { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } html[data-theme="dark"] .feature-card { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } html[data-theme="dark"] .benefit-card { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } html[data-theme="dark"] .dashboard-card { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } html[data-theme="dark"] .neo-card { background : #171C28 !important; background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.25) !important; } /* Force card content areas */ html[data-theme="dark"] .card_contentdiv { background : #171C28 !important; background-color : #171C28 !important; } html[data-theme="dark"] .tilecontentpanel { background : #171C28 !important; background-color : #171C28 !important; } html[data-theme="dark"] .tile-content { background : #171C28 !important; background-color : #171C28 !important; } html[data-theme="dark"] .dashboard-content { background : #171C28 !important; background-color : #171C28 !important; } /* Force sidebar */ html[data-theme="dark"] .sidemenu { background : #0F1219 !important; background-color : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .navigatordiv { background : #0F1219 !important; background-color : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .sidebar-container { background : #0F1219 !important; background-color : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } /* Force header */ html[data-theme="dark"] .home_menubar_container { background : rgba(15, 18, 25, 0.95) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } html[data-theme="dark"] .slider-header-div { background : rgba(15, 18, 25, 0.95) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } /* Force footer */ html[data-theme="dark"] .footer { background : #0F1219 !important; background-color : #0F1219 !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .builder-footer-div { background : #0F1219 !important; background-color : #0F1219 !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } /* Force text colors */ html[data-theme="dark"] h1 { color : #F2F2F2; } html[data-theme="dark"] h2 { color : #F2F2F2; } html[data-theme="dark"] h3 { color : #F2F2F2; } html[data-theme="dark"] h4 { color : #F2F2F2; } html[data-theme="dark"] h5 { color : #F2F2F2; } html[data-theme="dark"] h6 { color : #F2F2F2; } html[data-theme="dark"] p { color : #F2F2F2; } html[data-theme="dark"] span { color : #F2F2F2; } html[data-theme="dark"] label { color : #F2F2F2; } /* CRITICAL: text-rain is MAGENTA like React "Flood" */ html[data-theme="dark"] .text-rain { color : #FF33CC !important; text-shadow : 0 0 15px rgba(255, 51, 204, 0.5), 0 0 30px rgba(255, 51, 204, 0.3) !important; -webkit-text-fill-color : #FF33CC !important; } /* Plain cyan text with glow */ html[data-theme="dark"] .text-cyan { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3) !important; } /* Magenta text with glow */ html[data-theme="dark"] .text-flood { color : #FF33CC !important; text-shadow : 0 0 10px rgba(255, 51, 204, 0.5), 0 0 20px rgba(255, 51, 204, 0.3) !important; } html[data-theme="dark"] .text-magenta { color : #FF33CC !important; text-shadow : 0 0 10px rgba(255, 51, 204, 0.5), 0 0 20px rgba(255, 51, 204, 0.3) !important; } html[data-theme="dark"] .text-accent { color : #FF33CC !important; text-shadow : 0 0 10px rgba(255, 51, 204, 0.5), 0 0 20px rgba(255, 51, 204, 0.3) !important; } /* Gradient text with glow */ html[data-theme="dark"] .gradient-text { background : linear-gradient(135deg, #00FFFF 0%, #FF33CC 100%) !important; -webkit-background-clip : text !important; -webkit-text-fill-color : transparent !important; background-clip : text !important; filter : drop-shadow(0 0 10px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(255, 51, 204, 0.4)) !important; } html[data-theme="dark"] .text-gradient { background : linear-gradient(135deg, #00FFFF 0%, #FF33CC 100%) !important; -webkit-background-clip : text !important; -webkit-text-fill-color : transparent !important; background-clip : text !important; filter : drop-shadow(0 0 10px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(255, 51, 204, 0.4)) !important; } /* Force buttons - NO GLOW, simple gradient like React */ html[data-theme="dark"] .btn-primary { background : linear-gradient(135deg, #14F4F4 0%, #0EA5E9 100%) !important; color : #0F1219 !important; border : none !important; border-radius : 9999px !important; box-shadow : none !important; font-weight : 600 !important; padding : 0.75rem 1.5rem !important; } html[data-theme="dark"] .btn.btn-primary { background : linear-gradient(135deg, #14F4F4 0%, #0EA5E9 100%) !important; color : #0F1219 !important; border : none !important; border-radius : 9999px !important; box-shadow : none !important; font-weight : 600 !important; padding : 0.75rem 1.5rem !important; } html[data-theme="dark"] .btn-primary:hover { opacity : 0.9; } html[data-theme="dark"] .btn.btn-primary:hover { opacity : 0.9; } /* Outline button - dark with border, NO GLOW */ html[data-theme="dark"] .btn-outline-primary { background : rgba(255, 255, 255, 0.05) !important; color : #F2F2F2 !important; border : 1px solid rgba(255, 255, 255, 0.2) !important; border-radius : 9999px !important; box-shadow : none !important; padding : 0.75rem 1.5rem !important; font-weight : 500 !important; } html[data-theme="dark"] .btn-outline { background : rgba(255, 255, 255, 0.05) !important; color : #F2F2F2 !important; border : 1px solid rgba(255, 255, 255, 0.2) !important; border-radius : 9999px !important; box-shadow : none !important; padding : 0.75rem 1.5rem !important; font-weight : 500 !important; } html[data-theme="dark"] .btn.btn-outline-primary { background : rgba(255, 255, 255, 0.05) !important; color : #F2F2F2 !important; border : 1px solid rgba(255, 255, 255, 0.2) !important; border-radius : 9999px !important; box-shadow : none !important; padding : 0.75rem 1.5rem !important; font-weight : 500 !important; } html[data-theme="dark"] .btn-outline-primary:hover { background : rgba(255, 255, 255, 0.1) !important; border-color : rgba(255, 255, 255, 0.3) !important; box-shadow : none !important; } html[data-theme="dark"] .btn-outline:hover { background : rgba(255, 255, 255, 0.1) !important; border-color : rgba(255, 255, 255, 0.3) !important; box-shadow : none !important; } html[data-theme="dark"] .btn.btn-outline-primary:hover { background : rgba(255, 255, 255, 0.1) !important; border-color : rgba(255, 255, 255, 0.3) !important; box-shadow : none !important; } /* Plus icon with gradient glow */ html[data-theme="dark"] .plusicon { background : linear-gradient(180deg, #00FFFF 0%, #FF33CC 100%) !important; border : none !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(255, 51, 204, 0.3), 0 8px 25px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .plusicon-button { background : linear-gradient(180deg, #00FFFF 0%, #FF33CC 100%) !important; border : none !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(255, 51, 204, 0.3), 0 8px 25px rgba(0, 0, 0, 0.4) !important; } /* Feature icons with colored backgrounds */ html[data-theme="dark"] .feature-icon { width : 48px !important; height : 48px !important; border-radius : 12px !important; display : inline-flex !important; align-items : center !important; justify-content : center !important; font-size : 20px !important; } /* Feature 1 - Cyan */ html[data-theme="dark"] #feature-1-icon { background : linear-gradient(to bottom right, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.1)) !important; color : #00FFFF !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.25) !important; } /* Feature 2 - Purple */ html[data-theme="dark"] #feature-2-icon { background : linear-gradient(to bottom right, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1)) !important; color : #8B5CF6 !important; box-shadow : 0 0 20px rgba(139, 92, 246, 0.25) !important; } /* Feature 3 - Green */ html[data-theme="dark"] #feature-3-icon { background : linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1)) !important; color : #22C55E !important; box-shadow : 0 0 20px rgba(34, 197, 94, 0.25) !important; } /* Feature 4 - Magenta/Pink */ html[data-theme="dark"] #feature-4-icon { background : linear-gradient(to bottom right, rgba(255, 51, 204, 0.3), rgba(255, 51, 204, 0.1)) !important; color : #FF33CC !important; box-shadow : 0 0 20px rgba(255, 51, 204, 0.25) !important; } /* Condition cards - subtle like React */ html[data-theme="dark"] .condition-card { background : rgba(23, 28, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .stat-card { background : rgba(23, 28, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .condition-label { color : #94a3b8 !important; } /* Condition VALUES are CYAN like React - HIGHER SPECIFICITY */ html[data-theme="dark"] .condition-value { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.4) !important; -webkit-text-fill-color : #00FFFF !important; } html[data-theme="dark"] .conditions-grid .condition-value { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.4) !important; -webkit-text-fill-color : #00FFFF !important; } html[data-theme="dark"] #temp-value { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.4) !important; -webkit-text-fill-color : #00FFFF !important; } html[data-theme="dark"] #rain-value { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.4) !important; -webkit-text-fill-color : #00FFFF !important; } html[data-theme="dark"] #humidity-value { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.4) !important; -webkit-text-fill-color : #00FFFF !important; } /* Current conditions panel */ html[data-theme="dark"] .current-conditions { background : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } /* Alert box - amber/warning style */ html[data-theme="dark"] .alert-box { background : rgba(245, 158, 11, 0.15) !important; border : 1px solid rgba(245, 158, 11, 0.3) !important; border-left : 3px solid #F59E0B !important; } html[data-theme="dark"] .alert-title { color : #F59E0B !important; } /* Features section - grid only, NO purple glow */ html[data-theme="dark"] #features-section { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .features-panel { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } html[data-theme="dark"] .features-grid { background-color : #0F1219 !important; background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0,255,255,0.08)' stroke-width='1'/%3E%3C/svg%3E") !important; background-size : 40px 40px !important; } /* Feature cards - glass effect */ html[data-theme="dark"] .feature-card { background : rgba(23, 28, 40, 0.7) !important; backdrop-filter : blur(10px) !important; -webkit-backdrop-filter : blur(10px) !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; border-radius : 16px !important; } html[data-theme="dark"] .feature-card:hover { border-color : rgba(0, 255, 255, 0.25) !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.1) !important; } /* Section titles */ html[data-theme="dark"] .section-title { color : #F2F2F2 !important; } html[data-theme="dark"] #features-title { color : #F2F2F2 !important; } /* Feature titles */ html[data-theme="dark"] .feature-title { color : #F2F2F2 !important; font-weight : 600 !important; } /* Feature descriptions */ html[data-theme="dark"] .feature-description { color : #94a3b8 !important; } /* Section descriptions */ html[data-theme="dark"] .section-description { color : #94a3b8 !important; } html[data-theme="dark"] #features-description { color : #94a3b8 !important; } /* ════════════════════════════════════════════════════════════════════════════ LIGHT THEME (Neo-Glass) ════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --primary-bg : #ffffff; --text-color : #1A1F2C; --rain-color : #0071e3; --rain-dark : #0058b0; --rain-light : #e8f4fd; --flood-color : #3b82f6; --flood-light : #dbeafe; --flood-dark : #2563eb; --glass-bg : rgba(255, 255, 255, 0.7); --glass-border : rgba(255, 255, 255, 0.3); --shadow : 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-md : 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-lg : 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03); --neo-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff; --neo-shadow-inset : inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff; } /* ———————————————— Light Theme - Glass Cards ———————————————— */ [data-theme="light"] .carddiv { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .tilecard { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .feature-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .benefit-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .monitoring-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .display-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .modern-grid-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .modern-flex-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .tiles-flex-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .neo-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .card-flex { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .dashboard-card { background : rgba(255, 255, 255, 0.7) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .carddiv:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .card:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .tilecard:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .feature-card:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .benefit-card:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .modern-grid-card:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .dashboard-card:hover { box-shadow : 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff, 0 0 20px rgba(0, 113, 227, 0.1) !important; } /* ———————————————— Light Theme - Card Headers ———————————————— */ [data-theme="light"] .cardtitlediv { background : linear-gradient(135deg, rgba(0, 113, 227, 0.1), rgba(59, 130, 246, 0.05)) !important; border-bottom : 1px solid rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .card-title { background : linear-gradient(135deg, rgba(0, 113, 227, 0.1), rgba(59, 130, 246, 0.05)) !important; border-bottom : 1px solid rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .modern-card-title { background : linear-gradient(135deg, rgba(0, 113, 227, 0.1), rgba(59, 130, 246, 0.05)) !important; border-bottom : 1px solid rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .card_headerdiv { background : linear-gradient(135deg, rgba(0, 113, 227, 0.1), rgba(59, 130, 246, 0.05)) !important; border-bottom : 1px solid rgba(0, 113, 227, 0.1) !important; } /* ———————————————— Light Theme - Panels and Containers ———————————————— */ [data-theme="light"] .neo-grid-card--base { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff !important; } [data-theme="light"] .neo-grid-card { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff !important; } [data-theme="light"] .modern-option-section-across { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff !important; } [data-theme="light"] .modern-option-section-down { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff !important; } [data-theme="light"] .container { background : linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important; } [data-theme="light"] .homepagecontainer { background : linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important; } [data-theme="light"] .dashboard-container { background : linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important; } [data-theme="light"] .builder-main-div { background : linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important; } /* ———————————————— Light Theme - Navigation ———————————————— */ [data-theme="light"] .home_menubar_container { background : rgba(255, 255, 255, 0.85) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-bottom : 1px solid rgba(0, 113, 227, 0.1) !important; box-shadow : 0 2px 20px rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .slider-header-div { background : rgba(255, 255, 255, 0.85) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-bottom : 1px solid rgba(0, 113, 227, 0.1) !important; box-shadow : 0 2px 20px rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .sidemenu { background : rgba(255, 255, 255, 0.9) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-right : 1px solid rgba(0, 113, 227, 0.08) !important; } [data-theme="light"] .navigatordiv { background : rgba(255, 255, 255, 0.9) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-right : 1px solid rgba(0, 113, 227, 0.08) !important; } [data-theme="light"] .neo-sidemenu { background : rgba(255, 255, 255, 0.9) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-right : 1px solid rgba(0, 113, 227, 0.08) !important; } /* ———————————————— Light Theme - Tabs ———————————————— */ [data-theme="light"] .tabs-list { background : rgba(255, 255, 255, 0.8) !important; backdrop-filter : blur(12px) !important; -webkit-backdrop-filter : blur(12px) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .tab-button:hover { background-color : rgba(0, 113, 227, 0.08) !important; color : var(--rain-color) !important; } [data-theme="light"] .tab-button.active { background : linear-gradient(135deg, #0071e3, #3b82f6) !important; color : #ffffff !important; box-shadow : 0 4px 15px rgba(0, 113, 227, 0.3) !important; } /* ———————————————— Light Theme - Buttons ———————————————— */ [data-theme="light"] .btn-primary { background : linear-gradient(135deg, #0071e3, #3b82f6) !important; color : #ffffff !important; border : none !important; box-shadow : 0 4px 15px rgba(0, 113, 227, 0.25) !important; } [data-theme="light"] .btn-primary-large { background : linear-gradient(135deg, #0071e3, #3b82f6) !important; color : #ffffff !important; border : none !important; box-shadow : 0 4px 15px rgba(0, 113, 227, 0.25) !important; } [data-theme="light"] .btn-primary-small { background : linear-gradient(135deg, #0071e3, #3b82f6) !important; color : #ffffff !important; border : none !important; box-shadow : 0 4px 15px rgba(0, 113, 227, 0.25) !important; } [data-theme="light"] .btn-primary:hover { box-shadow : 0 6px 20px rgba(0, 113, 227, 0.35) !important; transform : translateY(-1px); } [data-theme="light"] .btn-primary-large:hover { box-shadow : 0 6px 20px rgba(0, 113, 227, 0.35) !important; transform : translateY(-1px); } [data-theme="light"] .btn-primary-small:hover { box-shadow : 0 6px 20px rgba(0, 113, 227, 0.35) !important; transform : translateY(-1px); } [data-theme="light"] .btn-outline { background : rgba(255, 255, 255, 0.6) !important; color : var(--rain-color) !important; border : 1px solid rgba(0, 113, 227, 0.2) !important; box-shadow : 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff !important; } [data-theme="light"] .btn-outline-white { background : rgba(255, 255, 255, 0.6) !important; color : var(--rain-color) !important; border : 1px solid rgba(0, 113, 227, 0.2) !important; box-shadow : 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff !important; } [data-theme="light"] .btn-outline:hover { background : rgba(0, 113, 227, 0.05) !important; border-color : var(--rain-color) !important; } [data-theme="light"] .btn-outline-white:hover { background : rgba(0, 113, 227, 0.05) !important; border-color : var(--rain-color) !important; } [data-theme="light"] .plusicon { background : linear-gradient(180deg, #0071e3, #3b82f6) !important; box-shadow : 0 8px 25px rgba(0, 113, 227, 0.3) !important; } [data-theme="light"] .plusicon-button { background : linear-gradient(180deg, #0071e3, #3b82f6) !important; box-shadow : 0 8px 25px rgba(0, 113, 227, 0.3) !important; } /* ———————————————— Light Theme - Inputs ———————————————— */ [data-theme="light"] .editbox { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] .modern-input { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] .modern-input-large { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] input[type="text"] { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] input[type="email"] { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] input[type="password"] { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] input[type="number"] { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] textarea { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] select { background : rgba(255, 255, 255, 0.8) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] .editbox:focus { border-color : var(--rain-color) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .modern-input:focus { border-color : var(--rain-color) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] input:focus { border-color : var(--rain-color) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] textarea:focus { border-color : var(--rain-color) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] select:focus { border-color : var(--rain-color) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(0, 113, 227, 0.1) !important; } /* ———————————————— Light Theme - Sidebar Cards ———————————————— */ [data-theme="light"] .sidebar_card_container { background : rgba(255, 255, 255, 0.7) !important; box-shadow : 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff !important; } [data-theme="light"] .sidemenu_card_container { background : rgba(255, 255, 255, 0.7) !important; box-shadow : 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff !important; } [data-theme="light"] .sidebar_card_container-top { background : rgba(255, 255, 255, 0.7) !important; box-shadow : 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff !important; } [data-theme="light"] .sidebar_card_container:hover { background : rgba(0, 113, 227, 0.05) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .sidemenu_card_container:hover { background : rgba(0, 113, 227, 0.05) !important; box-shadow : 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important; } [data-theme="light"] .sidebar_card_container.selected { background : rgba(0, 113, 227, 0.08) !important; border : 1px solid rgba(0, 113, 227, 0.2) !important; box-shadow : inset 4px 4px 8px rgba(0, 113, 227, 0.1), inset -4px -4px 8px #ffffff !important; } /* ———————————————— Light Theme - Grids ———————————————— */ [data-theme="light"] .neo-grid { background : rgba(255, 255, 255, 0.6) !important; border-color : rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .neo-grid-table { background : rgba(255, 255, 255, 0.6) !important; border-color : rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .neo-flex-table { background : rgba(255, 255, 255, 0.6) !important; border-color : rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .rw-grid { background : rgba(255, 255, 255, 0.6) !important; border-color : rgba(0, 113, 227, 0.1) !important; } [data-theme="light"] .neo-grid-table tr:hover { background-color : rgba(0, 113, 227, 0.05) !important; } [data-theme="light"] .rw-grid-row:hover { background-color : rgba(0, 113, 227, 0.05) !important; } [data-theme="light"] .rw-grid-header { background : linear-gradient(135deg, rgba(0, 113, 227, 0.1), rgba(59, 130, 246, 0.05)) !important; } /* ———————————————— Light Theme - Alerts and Status ———————————————— */ [data-theme="light"] .alert-box { background : rgba(0, 113, 227, 0.05) !important; border : 1px solid rgba(0, 113, 227, 0.15) !important; box-shadow : 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff !important; } [data-theme="light"] .badge-status-good { background : rgba(16, 185, 129, 0.1) !important; box-shadow : 0 2px 8px rgba(16, 185, 129, 0.2) !important; } [data-theme="light"] .level-status.normal { background : rgba(16, 185, 129, 0.1) !important; box-shadow : 0 2px 8px rgba(16, 185, 129, 0.2) !important; } [data-theme="light"] .badge-status-warning { background : rgba(245, 158, 11, 0.1) !important; box-shadow : 0 2px 8px rgba(245, 158, 11, 0.2) !important; } [data-theme="light"] .level-status.warning { background : rgba(245, 158, 11, 0.1) !important; box-shadow : 0 2px 8px rgba(245, 158, 11, 0.2) !important; } [data-theme="light"] .badge-status-error { background : rgba(239, 68, 68, 0.1) !important; box-shadow : 0 2px 8px rgba(239, 68, 68, 0.2) !important; } [data-theme="light"] .level-status.danger { background : rgba(239, 68, 68, 0.1) !important; box-shadow : 0 2px 8px rgba(239, 68, 68, 0.2) !important; } /* ———————————————— Light Theme - Progress Bars ———————————————— */ [data-theme="light"] .progress-bar-container { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] .level-bar { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] .progress-bar-fill { background : linear-gradient(90deg, #0071e3, #3b82f6) !important; box-shadow : 0 2px 8px rgba(0, 113, 227, 0.3) !important; } [data-theme="light"] .level-fill { background : linear-gradient(90deg, #0071e3, #3b82f6) !important; box-shadow : 0 2px 8px rgba(0, 113, 227, 0.3) !important; } /* ———————————————— Light Theme - Tooltips and Popups ———————————————— */ [data-theme="light"] .custom-tooltip { background : rgba(255, 255, 255, 0.95) !important; backdrop-filter : blur(12px) !important; -webkit-backdrop-filter : blur(12px) !important; border : 1px solid rgba(0, 113, 227, 0.1) !important; box-shadow : 8px 8px 20px #d1d9e6, -8px -8px 20px #ffffff !important; } [data-theme="light"] .popup-menu { background : rgba(255, 255, 255, 0.95) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; box-shadow : 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff !important; } [data-theme="light"] .period-menu { background : rgba(255, 255, 255, 0.95) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; box-shadow : 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff !important; } [data-theme="light"] .period-option:hover { background-color : rgba(0, 113, 227, 0.08) !important; } [data-theme="light"] .period-option.is-selected { background : linear-gradient(135deg, #0071e3, #3b82f6) !important; color : #ffffff !important; } /* ———————————————— Light Theme - Footer ———————————————— */ [data-theme="light"] .footer { background : rgba(255, 255, 255, 0.9) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-top : 1px solid rgba(0, 113, 227, 0.08) !important; } [data-theme="light"] .builder-footer-div { background : rgba(255, 255, 255, 0.9) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-top : 1px solid rgba(0, 113, 227, 0.08) !important; } [data-theme="light"] .sidemenucontainer-div { background : rgba(255, 255, 255, 0.9) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-top : 1px solid rgba(0, 113, 227, 0.08) !important; } /* ———————————————— Light Theme - Hero Section ———————————————— */ [data-theme="light"] .hero { background : linear-gradient(135deg, #f8fafc 0%, #eef2f7 50%, #e8f4fd 100%) !important; } /* ———————————————— Light Theme - Sections ———————————————— */ [data-theme="light"] .features { background : linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; } [data-theme="light"] .benefits { background : linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; } [data-theme="light"] .monitoring { background : linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; } [data-theme="light"] .current-conditions { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } [data-theme="light"] .chart-box { background : rgba(248, 250, 252, 0.8) !important; box-shadow : inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff !important; } /* ———————————————— Light Theme - Scrollbars ———————————————— */ [data-theme="light"] ::-webkit-scrollbar { width : 8px; height : 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background : #f1f5f9; } [data-theme="light"] ::-webkit-scrollbar-thumb { background : rgba(0, 113, 227, 0.2); border-radius : 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background : rgba(0, 113, 227, 0.35); } /* ════════════════════════════════════════════════════════════════════════════ DARK THEME (Neon Glass) ════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --primary-bg : #0F1219; --card-bg : #171C28; --text-color : #F2F2F2; --rain-color : #00FFFF; --rain-dark : #00BFFF; --rain-light : #003344; --flood-color : #FF33CC; --flood-light : #FF66DD; --flood-dark : #CC0099; --border-color : #2D3548; --secondary-bg : #252C3D; --gray-50 : #1e293b; --gray-100 : #171C28; --gray-200 : #252C3D; --gray-300 : #2D3548; --gray-400 : #64748b; --gray-500 : #94a3b8; --gray-600 : #cbd5e1; --gray-700 : #e2e8f0; --gray-800 : #f1f5f9; --gray-900 : #f8fafc; --glow-primary : 0 0 40px hsla(180, 100%, 50%, 0.4), 0 0 80px hsla(180, 100%, 50%, 0.2); --glow-accent : 0 0 40px hsla(320, 100%, 60%, 0.4), 0 0 80px hsla(320, 100%, 60%, 0.2); --shadow : 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-md : 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-lg : 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ———————————————— Base Elements - FORCE dark background ———————————————— */ [data-theme="dark"] { background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } [data-theme="dark"] html { background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } [data-theme="dark"] body { background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] { background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } html[data-theme="dark"] body { background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } [data-theme="dark"] .main-container { background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } [data-theme="dark"] .main-content{ background-color : #0F1219 !important; background : #0F1219 !important; color : #F2F2F2 !important; } /* ———————————————— Grid Pattern Background - FORCE on all containers ———————————————— */ [data-theme="dark"] .homepagecontainer { background-color : #0F1219 !important; } [data-theme="dark"] .container { background-color : #0F1219 !important; } /* ———————————————— Gradient Orb Decorations (via pseudo-elements) ———————————————— */ [data-theme="dark"] .homepagecontainer::before { content : ''; position : absolute; top : 10%; right : -10%; width : 600px; height : 600px; border-radius : 50%; filter : blur(80px); pointer-events : none; z-index : 0; } [data-theme="dark"] .homepagecontainer::after { content : ''; position : absolute; bottom : 20%; left : -10%; width : 500px; height : 500px; border-radius : 50%; filter : blur(80px); pointer-events : none; z-index : 0; } [data-theme="dark"] h1 { color : var(--text-color) !important; } [data-theme="dark"] h2 { color : var(--text-color) !important; } [data-theme="dark"] h3 { color : var(--text-color) !important; } [data-theme="dark"] h4 { color : var(--text-color) !important; } [data-theme="dark"] h5 { color : var(--text-color) !important; } [data-theme="dark"] h6 { color : var(--text-color) !important; } [data-theme="dark"] p { color : var(--text-color) !important; } [data-theme="dark"] .text-xl { color : var(--text-color) !important; } [data-theme="dark"] .text-sm { color : var(--text-color) !important; } [data-theme="dark"] .text-sm-grey { color : var(--text-color) !important; } /* ———————————————— Gradient Text Effect with Glow ———————————————— */ [data-theme="dark"] .gradient-text { background : linear-gradient(135deg, #00FFFF 0%, #FF33CC 100%) !important; -webkit-background-clip : text !important; -webkit-text-fill-color : transparent !important; background-clip : text !important; filter : drop-shadow(0 0 8px rgba(0, 255, 255, 0.4)) drop-shadow(0 0 15px rgba(255, 51, 204, 0.3)) !important; } [data-theme="dark"] .hero-gradient-text { background : linear-gradient(135deg, #00FFFF 0%, #FF33CC 100%) !important; -webkit-background-clip : text !important; -webkit-text-fill-color : transparent !important; background-clip : text !important; filter : drop-shadow(0 0 8px rgba(0, 255, 255, 0.4)) drop-shadow(0 0 15px rgba(255, 51, 204, 0.3)) !important; } [data-theme="dark"] .text-gradient { background : linear-gradient(135deg, #00FFFF 0%, #FF33CC 100%) !important; -webkit-background-clip : text !important; -webkit-text-fill-color : transparent !important; background-clip : text !important; filter : drop-shadow(0 0 8px rgba(0, 255, 255, 0.4)) drop-shadow(0 0 15px rgba(255, 51, 204, 0.3)) !important; } [data-theme="dark"] .text-rain { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3) !important; } [data-theme="dark"] .text-cyan { color : #00FFFF !important; text-shadow : 0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3) !important; } [data-theme="dark"] .text-flood { color : #FF33CC !important; text-shadow : 0 0 10px rgba(255, 51, 204, 0.5), 0 0 20px rgba(255, 51, 204, 0.3) !important; } [data-theme="dark"] .text-accent { color : #FF33CC !important; text-shadow : 0 0 10px rgba(255, 51, 204, 0.5), 0 0 20px rgba(255, 51, 204, 0.3) !important; } [data-theme="dark"] .text-magenta { color : #FF33CC !important; text-shadow : 0 0 10px rgba(255, 51, 204, 0.5), 0 0 20px rgba(255, 51, 204, 0.3) !important; } /* ———————————————— Glass Effect Mixin (applied to cards) ———————————————— */ [data-theme="dark"] .carddiv { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .tilecard { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .feature-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .benefit-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .monitoring-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .display-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .modern-grid-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .modern-flex-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .tiles-flex-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .neo-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .card-flex { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .dashboard-card { background : #171C28 !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .carddiv:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .card:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .tilecard:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .feature-card:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .benefit-card:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .modern-grid-card:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] .dashboard-card:hover { border-color : rgba(0, 255, 255, 0.35) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* ———————————————— Card Headers / Title Bars ———————————————— */ [data-theme="dark"] .cardtitlediv { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.1)) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; color : var(--text-color) !important; } [data-theme="dark"] .card-title { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.1)) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; color : var(--text-color) !important; } [data-theme="dark"] .modern-card-title { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.1)) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; color : var(--text-color) !important; } [data-theme="dark"] .neon-card-title { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.1)) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; color : var(--text-color) !important; } [data-theme="dark"] .card_headerdiv { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.1)) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; color : var(--text-color) !important; } /* ———————————————— Panels and Containers ———————————————— */ [data-theme="dark"] .panelcontent { background : transparent !important; } [data-theme="dark"] .innercarddiv { background : transparent !important; } [data-theme="dark"] .paneltitle { background : rgba(15, 18, 25, 0.5) !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .cardfooter { background : rgba(15, 18, 25, 0.5) !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .modern-card-footer { background : rgba(15, 18, 25, 0.5) !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .shadedframecontainer { background-color : var(--primary-bg) !important; } [data-theme="dark"] .neo-grid-card--base { background-color : var(--primary-bg) !important; } [data-theme="dark"] .neo-grid-card { background-color : var(--primary-bg) !important; } [data-theme="dark"] .container { background-color : #0F1219 !important; background-size : 40px 40px !important; } [data-theme="dark"] .homepagecontainer { background-color : #0F1219 !important; background-size : 40px 40px !important; } /* ———————————————— Navigation and Menus ———————————————— */ [data-theme="dark"] .home_menubar_container { background : rgba(15, 18, 25, 0.95) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 2px 20px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .slider-header-div { background : rgba(15, 18, 25, 0.95) !important; backdrop-filter : blur(20px) !important; -webkit-backdrop-filter : blur(20px) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; box-shadow : 0 2px 20px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .sidemenu { background : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .navigatordiv { background : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .neo-sidemenu { background : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .sidebar-container { background : #0F1219 !important; border-right : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .menu_item { color : var(--rain-color) !important; } [data-theme="dark"] .menu_item:hover { border-bottom-color : var(--rain-color) !important; } /* ———————————————— Tabs ———————————————— */ [data-theme="dark"] .tabs-list { background-color : rgba(20, 25, 40, 0.9) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .tab-button { color : var(--gray-500) !important; } [data-theme="dark"] .tab-button:hover { color : var(--rain-color) !important; background-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .tab-button.active { color : #ffffff !important; background : linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(255, 51, 204, 0.2)) !important; border-bottom-color : var(--rain-color) !important; } /* ———————————————— Buttons ———————————————— */ [data-theme="dark"] .btn-primary { background : linear-gradient(135deg, #00FFFF 0%, #06B6D4 100%) !important; color : #0F1219 !important; border : none !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3) !important; font-weight : 600 !important; text-shadow : none !important; } [data-theme="dark"] .btn-primary-large { background : linear-gradient(135deg, #00FFFF 0%, #06B6D4 100%) !important; color : #0F1219 !important; border : none !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3) !important; font-weight : 600 !important; text-shadow : none !important; } [data-theme="dark"] .btn-primary-small { background : linear-gradient(135deg, #00FFFF 0%, #06B6D4 100%) !important; color : #0F1219 !important; border : none !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.2), 0 4px 15px rgba(0, 0, 0, 0.3) !important; font-weight : 600 !important; text-shadow : none !important; } [data-theme="dark"] .btn-primary:hover { box-shadow : 0 0 25px rgba(0, 255, 255, 0.6), 0 0 50px rgba(0, 255, 255, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4) !important; transform : translateY(-2px); } [data-theme="dark"] .btn-primary-large:hover { box-shadow : 0 0 25px rgba(0, 255, 255, 0.6), 0 0 50px rgba(0, 255, 255, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4) !important; transform : translateY(-2px); } [data-theme="dark"] .btn-primary-small:hover { box-shadow : 0 0 25px rgba(0, 255, 255, 0.6), 0 0 50px rgba(0, 255, 255, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4) !important; transform : translateY(-2px); } [data-theme="dark"] .btn-outline { background : transparent !important; color : var(--text-color) !important; border : 1px solid var(--border-color) !important; } [data-theme="dark"] .btn-outline-white { background : transparent !important; color : var(--text-color) !important; border : 1px solid var(--border-color) !important; } [data-theme="dark"] .btn-outline:hover { background : rgba(255, 255, 255, 0.05) !important; border-color : rgba(255, 255, 255, 0.3) !important; } [data-theme="dark"] .btn-outline-white:hover { background : rgba(255, 255, 255, 0.05) !important; border-color : rgba(255, 255, 255, 0.3) !important; } [data-theme="dark"] .plusicon { background : linear-gradient(180deg, #00FFFF 0%, #FF33CC 100%) !important; border : none !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(255, 51, 204, 0.3), 0 8px 25px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .plusicon-button { background : linear-gradient(180deg, #00FFFF 0%, #FF33CC 100%) !important; border : none !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(255, 51, 204, 0.3), 0 8px 25px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .plusicon:hover { box-shadow : 0 0 30px rgba(0, 255, 255, 0.7), 0 0 60px rgba(255, 51, 204, 0.4), 0 10px 30px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .plusicon-button:hover { box-shadow : 0 0 30px rgba(0, 255, 255, 0.7), 0 0 60px rgba(255, 51, 204, 0.4), 0 10px 30px rgba(0, 0, 0, 0.5) !important; } /* ———————————————— Inputs and Form Controls ———————————————— */ [data-theme="dark"] .editbox { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] .modern-input { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] .modern-input-large { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] input[type="text"] { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] input[type="email"] { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] input[type="password"] { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] input[type="number"] { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] textarea { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] select { background : rgba(20, 25, 40, 0.6) !important; border : 1px solid rgba(255, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] .editbox:focus { border-color : var(--rain-color) !important; box-shadow : 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1) !important; outline : none !important; } [data-theme="dark"] .modern-input:focus { border-color : var(--rain-color) !important; box-shadow : 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1) !important; outline : none !important; } [data-theme="dark"] input:focus { border-color : var(--rain-color) !important; box-shadow : 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1) !important; outline : none !important; } [data-theme="dark"] textarea:focus { border-color : var(--rain-color) !important; box-shadow : 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1) !important; outline : none !important; } [data-theme="dark"] select:focus { border-color : var(--rain-color) !important; box-shadow : 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.1) !important; outline : none !important; } /* ———————————————— Sidebar Cards ———————————————— */ [data-theme="dark"] .sidebar_card_container { background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; box-shadow : inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.02) !important; } [data-theme="dark"] .sidemenu_card_container { background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; box-shadow : inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.02) !important; } [data-theme="dark"] .sidebar_card_container-top { background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; box-shadow : inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.02) !important; } [data-theme="dark"] .sidebar_card_container:hover { background-color : rgba(0, 255, 255, 0.08) !important; border-color : rgba(0, 255, 255, 0.25) !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .sidemenu_card_container:hover { background-color : rgba(0, 255, 255, 0.08) !important; border-color : rgba(0, 255, 255, 0.25) !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .sidebar_card_container.selected { background-color : rgba(0, 255, 255, 0.12) !important; border : 1px solid rgba(0, 255, 255, 0.35) !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.05) !important; } /* ———————————————— Grids and Tables ———————————————— */ [data-theme="dark"] .neo-grid { background : rgba(20, 25, 40, 0.6) !important; border-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .neo-grid-table { background : rgba(20, 25, 40, 0.6) !important; border-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .neo-flex-table { background : rgba(20, 25, 40, 0.6) !important; border-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .rw-grid { background : rgba(20, 25, 40, 0.6) !important; border-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .neo-grid-table tr { border-bottom-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .rw-grid-row { border-bottom-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .neo-grid-table tr:hover { background-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .rw-grid-row:hover { background-color : rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .rw-grid-header { background : linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 51, 204, 0.1)) !important; color : var(--text-color) !important; } /* ———————————————— Status and Alerts ———————————————— */ [data-theme="dark"] .alert-box { background : rgba(0, 255, 255, 0.1) !important; border-color : rgba(0, 255, 255, 0.3) !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .alert-neon-info { background : rgba(0, 255, 255, 0.1) !important; border-color : rgba(0, 255, 255, 0.3) !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .badge-status-good { background : rgba(16, 185, 129, 0.2) !important; box-shadow : 0 0 15px rgba(16, 185, 129, 0.3) !important; } [data-theme="dark"] .level-status.normal { background : rgba(16, 185, 129, 0.2) !important; box-shadow : 0 0 15px rgba(16, 185, 129, 0.3) !important; } [data-theme="dark"] .badge-status-warning { background : rgba(245, 158, 11, 0.2) !important; box-shadow : 0 0 15px rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .level-status.warning { background : rgba(245, 158, 11, 0.2) !important; box-shadow : 0 0 15px rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .badge-status-error { background : rgba(239, 68, 68, 0.2) !important; box-shadow : 0 0 15px rgba(239, 68, 68, 0.3) !important; } [data-theme="dark"] .level-status.danger { background : rgba(239, 68, 68, 0.2) !important; box-shadow : 0 0 15px rgba(239, 68, 68, 0.3) !important; } /* ———————————————— Footer ———————————————— */ [data-theme="dark"] .footer { background-color : #0F1219 !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .builder-footer-div { background-color : #0F1219 !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .sidemenucontainer-div { background-color : #0F1219 !important; border-top : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .footer-nav .icon-container:hover { background : rgba(0, 255, 255, 0.1) !important; } /* ———————————————— Dashboard Specific ———————————————— */ [data-theme="dark"] .builder-main-div { background-color : var(--primary-bg) !important; } [data-theme="dark"] .dashboard-headerdiv { background-color : rgba(20, 25, 40, 0.9) !important; border-bottom-color : rgba(0, 255, 255, 0.2) !important; } /* ———————————————— Progress Bars ———————————————— */ [data-theme="dark"] .progress-bar-container { background : rgba(30, 35, 50, 0.8) !important; } [data-theme="dark"] .level-bar { background : rgba(30, 35, 50, 0.8) !important; } [data-theme="dark"] .progress-bar-fill { background : linear-gradient(90deg, #00FFFF, #FF33CC) !important; box-shadow : 0 0 10px rgba(0, 255, 255, 0.5) !important; } [data-theme="dark"] .level-fill { background : linear-gradient(90deg, #00FFFF, #FF33CC) !important; box-shadow : 0 0 10px rgba(0, 255, 255, 0.5) !important; } /* ———————————————— Tooltips and Popups ———————————————— */ [data-theme="dark"] .custom-tooltip { background : rgba(20, 25, 40, 0.95) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 255, 0.1) !important; color : var(--text-color) !important; } [data-theme="dark"] .popup-menu { background-color : rgba(20, 25, 40, 0.95) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 10px 40px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .period-menu { background-color : rgba(20, 25, 40, 0.95) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 10px 40px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .period-option { background-color : rgba(30, 35, 50, 0.8) !important; color : var(--text-color) !important; } [data-theme="dark"] .period-option:hover { background-color : rgba(0, 255, 255, 0.15) !important; color : var(--rain-color) !important; } [data-theme="dark"] .period-option.is-selected { background : linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(255, 51, 204, 0.2)) !important; color : #ffffff !important; } /* ———————————————— Scrollbars ———————————————— */ [data-theme="dark"] ::-webkit-scrollbar { width : 8px; height : 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background : rgba(20, 25, 40, 0.5); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background : rgba(0, 255, 255, 0.3); border-radius : 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background : rgba(0, 255, 255, 0.5); } /* ———————————————— Icons ———————————————— */ [data-theme="dark"] .card-icon-small i { color : var(--rain-color) !important; } [data-theme="dark"] .feature-icon-small i { color : var(--rain-color) !important; } [data-theme="dark"] .card_resizeicon i { color : var(--rain-color) !important; } [data-theme="dark"] .card_resizeicon:hover i { color : var(--flood-color) !important; } /* ———————————————— Feature Icon Backgrounds (colored gradients) ———————————————— */ [data-theme="dark"] .feature-icon { width : 48px !important; height : 48px !important; border-radius : 12px !important; display : flex !important; align-items : center !important; justify-content : center !important; background : linear-gradient(to bottom right, rgba(0, 255, 255, 0.25), rgba(0, 255, 255, 0.08)) !important; color : #00FFFF !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .icon-bg { width : 48px !important; height : 48px !important; border-radius : 12px !important; display : flex !important; align-items : center !important; justify-content : center !important; background : linear-gradient(to bottom right, rgba(0, 255, 255, 0.25), rgba(0, 255, 255, 0.08)) !important; color : #00FFFF !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .feature-card .icon { width : 48px !important; height : 48px !important; border-radius : 12px !important; display : flex !important; align-items : center !important; justify-content : center !important; background : linear-gradient(to bottom right, rgba(0, 255, 255, 0.25), rgba(0, 255, 255, 0.08)) !important; color : #00FFFF !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .benefit-card .icon { width : 48px !important; height : 48px !important; border-radius : 12px !important; display : flex !important; align-items : center !important; justify-content : center !important; background : linear-gradient(to bottom right, rgba(0, 255, 255, 0.25), rgba(0, 255, 255, 0.08)) !important; color : #00FFFF !important; box-shadow : 0 0 15px rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .icon-cyan { background : linear-gradient(to bottom right, rgba(6, 182, 212, 0.35), rgba(6, 182, 212, 0.1)) !important; color : #06B6D4 !important; box-shadow : 0 0 15px rgba(6, 182, 212, 0.3) !important; } [data-theme="dark"] .feature-icon.cyan { background : linear-gradient(to bottom right, rgba(6, 182, 212, 0.35), rgba(6, 182, 212, 0.1)) !important; color : #06B6D4 !important; box-shadow : 0 0 15px rgba(6, 182, 212, 0.3) !important; } [data-theme="dark"] .feature-card:nth-child(1) .icon { background : linear-gradient(to bottom right, rgba(6, 182, 212, 0.35), rgba(6, 182, 212, 0.1)) !important; color : #06B6D4 !important; box-shadow : 0 0 15px rgba(6, 182, 212, 0.3) !important; } [data-theme="dark"] .icon-purple { background : linear-gradient(to bottom right, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.1)) !important; color : #8B5CF6 !important; box-shadow : 0 0 15px rgba(139, 92, 246, 0.3) !important; } [data-theme="dark"] .feature-icon.purple { background : linear-gradient(to bottom right, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.1)) !important; color : #8B5CF6 !important; box-shadow : 0 0 15px rgba(139, 92, 246, 0.3) !important; } [data-theme="dark"] .feature-card:nth-child(2) .icon { background : linear-gradient(to bottom right, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.1)) !important; color : #8B5CF6 !important; box-shadow : 0 0 15px rgba(139, 92, 246, 0.3) !important; } [data-theme="dark"] .icon-green { background : linear-gradient(to bottom right, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.1)) !important; color : #22C55E !important; box-shadow : 0 0 15px rgba(34, 197, 94, 0.3) !important; } [data-theme="dark"] .feature-icon.green { background : linear-gradient(to bottom right, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.1)) !important; color : #22C55E !important; box-shadow : 0 0 15px rgba(34, 197, 94, 0.3) !important; } [data-theme="dark"] .feature-card:nth-child(3) .icon { background : linear-gradient(to bottom right, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.1)) !important; color : #22C55E !important; box-shadow : 0 0 15px rgba(34, 197, 94, 0.3) !important; } [data-theme="dark"] .icon-pink { background : linear-gradient(to bottom right, rgba(255, 51, 204, 0.35), rgba(255, 51, 204, 0.1)) !important; color : #FF33CC !important; box-shadow : 0 0 15px rgba(255, 51, 204, 0.3) !important; } [data-theme="dark"] .icon-magenta { background : linear-gradient(to bottom right, rgba(255, 51, 204, 0.35), rgba(255, 51, 204, 0.1)) !important; color : #FF33CC !important; box-shadow : 0 0 15px rgba(255, 51, 204, 0.3) !important; } [data-theme="dark"] .feature-icon.pink { background : linear-gradient(to bottom right, rgba(255, 51, 204, 0.35), rgba(255, 51, 204, 0.1)) !important; color : #FF33CC !important; box-shadow : 0 0 15px rgba(255, 51, 204, 0.3) !important; } [data-theme="dark"] .feature-card:nth-child(4) .icon { background : linear-gradient(to bottom right, rgba(255, 51, 204, 0.35), rgba(255, 51, 204, 0.1)) !important; color : #FF33CC !important; box-shadow : 0 0 15px rgba(255, 51, 204, 0.3) !important; } [data-theme="dark"] .icon-amber { background : linear-gradient(to bottom right, rgba(245, 158, 11, 0.35), rgba(245, 158, 11, 0.1)) !important; color : #F59E0B !important; box-shadow : 0 0 15px rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .icon-yellow { background : linear-gradient(to bottom right, rgba(245, 158, 11, 0.35), rgba(245, 158, 11, 0.1)) !important; color : #F59E0B !important; box-shadow : 0 0 15px rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .feature-icon.amber { background : linear-gradient(to bottom right, rgba(245, 158, 11, 0.35), rgba(245, 158, 11, 0.1)) !important; color : #F59E0B !important; box-shadow : 0 0 15px rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .icon-blue { background : linear-gradient(to bottom right, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.1)) !important; color : #3B82F6 !important; box-shadow : 0 0 15px rgba(59, 130, 246, 0.3) !important; } [data-theme="dark"] .feature-icon.blue { background : linear-gradient(to bottom right, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.1)) !important; color : #3B82F6 !important; box-shadow : 0 0 15px rgba(59, 130, 246, 0.3) !important; } /* ———————————————— Loading States ———————————————— */ [data-theme="dark"] .dashboard-loading-overlay { background : rgba(15, 18, 25, 0.9) !important; } [data-theme="dark"] .dashboard-loading-spinner { border-color : rgba(0, 255, 255, 0.2) !important; border-top-color : var(--rain-color) !important; } [data-theme="dark"] .shimmer::after { background : linear-gradient( 90deg, transparent 0%, rgba(0, 255, 255, 0.2) 50%, transparent 100% ) !important; } /* ———————————————— Glow Animation ———————————————— */ [data-theme="dark"] .glow-pulse { animation : glow-pulse-dark 2s infinite alternate; } @keyframes glow-pulse-dark { 0% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } 100% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.4); } } /* ———————————————— Live Indicator ———————————————— */ [data-theme="dark"] .live-indicator::before { box-shadow : 0 0 10px var(--green-500) !important; } /* ———————————————— Hero Section ———————————————— */ [data-theme="dark"] .hero { background : linear-gradient(to bottom, var(--primary-bg) 0%, rgba(20, 25, 40, 1) 100%) !important; } /* ———————————————— Section Backgrounds ———————————————— */ [data-theme="dark"] .features { background-color : var(--primary-bg) !important; } [data-theme="dark"] .benefits { background-color : var(--primary-bg) !important; } [data-theme="dark"] .monitoring { background-color : var(--primary-bg) !important; } [data-theme="dark"] .current-conditions { background : rgba(30, 35, 50, 0.6) !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .chart-box { background : rgba(30, 35, 50, 0.6) !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .modern-option-section-across { background : rgba(30, 35, 50, 0.6) !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .modern-option-section-down { background : rgba(30, 35, 50, 0.6) !important; border : 1px solid rgba(0, 255, 255, 0.1) !important; } /* ════════════════════════════════════════════════════════════════════════════ DARK THEME FIXES - Card Content Areas and Specific Components ════════════════════════════════════════════════════════════════════════════ */ /* ———————————————— FIX: Card Content Areas (white → dark) ———————————————— */ [data-theme="dark"] .card_contentdiv { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .tilecontentpanel { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .tilepagediv { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .tile-content { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .chart-div { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .graph { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .innerfullscreendiv { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .dashboard-content { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .rainmap-container { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .rainmap-map { background-color : #171C28 !important; background : #171C28 !important; color : #F2F2F2 !important; } [data-theme="dark"] .tilecard { background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .tile { background-color : #171C28 !important; border : 1px solid rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .tilecontentpanel:nth-of-type(2) { background-color : #171C28 !important; } [data-theme="dark"] .titlepanel { background-color : rgba(20, 25, 40, 0.95) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .tilecontentpanel:first-of-type { background-color : rgba(20, 25, 40, 0.95) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } /* ———————————————— FIX: Popup/Modal Backgrounds ———————————————— */ [data-theme="dark"] .container-popup { background : rgba(20, 25, 40, 0.98) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .container-modal-centered { background : rgba(20, 25, 40, 0.98) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .popup-form { background : rgba(20, 25, 40, 0.98) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .sliding-popup-form { background : rgba(20, 25, 40, 0.98) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.1) !important; } [data-theme="dark"] .form-container-sliding { background : rgba(20, 25, 40, 0.98) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.1) !important; } /* ———————————————— FIX: Grid/Table Backgrounds (Permissions grid etc) ———————————————— */ [data-theme="dark"] table { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .rw-grid { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .rw-grid-row { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .rw-grid-cell { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .neo-grid-table tbody { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .neo-grid-table tr { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .neo-grid-table td { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] table tr { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] table td { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] table tbody { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .rw-grid-header { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.08)) !important; color : var(--text-color) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .rw-grid-header th { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.08)) !important; color : var(--text-color) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .neo-grid-table thead { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.08)) !important; color : var(--text-color) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .neo-grid-table th { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.08)) !important; color : var(--text-color) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] table th { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.08)) !important; color : var(--text-color) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] table thead { background : linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 51, 204, 0.08)) !important; color : var(--text-color) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.2) !important; } [data-theme="dark"] .rw-grid-row:nth-child(2n) { background-color : #1E2433 !important; } [data-theme="dark"] .neo-grid-table tr:nth-child(2n) { background-color : #1E2433 !important; } [data-theme="dark"] table tr:nth-child(2n) { background-color : #1E2433 !important; } /* ———————————————— FIX: Condition Cards (stat cards - RainFall, River Level, etc) ———————————————— */ [data-theme="dark"] .condition-card { background : rgba(23, 28, 40, 0.9) !important; border : 1px solid rgba(45, 53, 72, 0.8) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .stat-card { background : rgba(23, 28, 40, 0.9) !important; border : 1px solid rgba(45, 53, 72, 0.8) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .stat { background : rgba(23, 28, 40, 0.9) !important; border : 1px solid rgba(45, 53, 72, 0.8) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .condition-label { color : var(--gray-500) !important; } [data-theme="dark"] .stat-label { color : var(--gray-500) !important; } [data-theme="dark"] .condition-value { color : var(--text-color) !important; } [data-theme="dark"] .stat-value { color : var(--text-color) !important; } /* ———————————————— FIX: Menu Items and Dropdowns ———————————————— */ [data-theme="dark"] .az_listbox { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .az_listbox td { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .az_listbox option { background-color : #171C28 !important; color : var(--text-color) !important; } [data-theme="dark"] .az_listbox td.selected { background-color : rgba(0, 255, 255, 0.2) !important; border-color : var(--rain-color) !important; } [data-theme="dark"] .az_listbox option:checked { background-color : rgba(0, 255, 255, 0.2) !important; border-color : var(--rain-color) !important; } [data-theme="dark"] .items-bottom { background-color : #171C28 !important; } [data-theme="dark"] .items-top { background-color : #171C28 !important; } /* ———————————————— FIX: Scrollbox and Inner Containers ———————————————— */ [data-theme="dark"] .scrollbox { background-color : #171C28 !important; } [data-theme="dark"] .scrollbox > div { background-color : #171C28 !important; } [data-theme="dark"] .sidebarscroll { background-color : #171C28 !important; } /* ———————————————— FIX: Dashboard Sidebar Panel ———————————————— */ [data-theme="dark"] .dashboard-sidebar-container { background-color : rgba(20, 25, 40, 0.98) !important; border-left : 1px solid rgba(0, 255, 255, 0.15) !important; height : calc(100% - 200px) !important; } [data-theme="dark"] .slidepanel { background-color : rgba(20, 25, 40, 0.98) !important; border-left : 1px solid rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] .slidepanel_version1 { background-color : rgba(20, 25, 40, 0.98) !important; border-left : 1px solid rgba(0, 255, 255, 0.15) !important; } [data-theme="dark"] #css_top_panel_icons { background-color : rgba(20, 25, 40, 0.95) !important; border-bottom : 1px solid rgba(0, 255, 255, 0.15) !important; } /* ———————————————— FIX: Checkbox styling in dark mode ———————————————— */ [data-theme="dark"] input[type="checkbox"] { background-color : #1a1f2c !important; border-color : rgba(0, 255, 255, 0.3) !important; } [data-theme="dark"] input[type="checkbox"]:checked { background-color : var(--rain-color) !important; border-color : var(--rain-color) !important; } /* ———————————————— FIX: White text in dark areas ———————————————— */ [data-theme="dark"] .sidebar_card_title { color : var(--text-color) !important; } [data-theme="dark"] .sidebar_card_subtitle { color : var(--text-color) !important; } [data-theme="dark"] .sidebar_card_title label { color : var(--text-color) !important; } [data-theme="dark"] .sidebar_card_subtitle label { color : var(--text-color) !important; } [data-theme="dark"] .sidemenucontainer-label { color : var(--text-color) !important; } [data-theme="dark"] .sidemenucontainer-title { color : var(--text-color) !important; } [data-theme="dark"] label { color : var(--text-color) !important; } [data-theme="dark"] .card_title { color : var(--text-color) !important; } [data-theme="dark"] .card_subtitle { color : var(--text-color) !important; } /* ———————————————— FIX: Footer area text ———————————————— */ [data-theme="dark"] .sidemenucontainer-label { color : var(--gray-500) !important; } [data-theme="dark"] .sidemenucontainer-label:hover { background-color : rgba(0, 255, 255, 0.1) !important; color : var(--rain-color) !important; } /* ———————————————— FIX: Form containers and white backgrounds ———————————————— */ [data-theme="dark"] .createdashboarddiv { background-color : transparent !important; } [data-theme="dark"] .logindiv { background-color : transparent !important; } [data-theme="dark"] .verticalpanel { background-color : transparent !important; } [data-theme="dark"] .logintable { background-color : transparent !important; } [data-theme="dark"] .forgotpasswrd { background-color : transparent !important; } [data-theme="dark"] .forgotpassword--email { background-color : transparent !important; } [data-theme="dark"] .pagecontrol_outer_container { background-color : transparent !important; } [data-theme="dark"] .pagecontrol_generic { background-color : transparent !important; } [data-theme="dark"] .tabsheet { background-color : transparent !important; border : 1px solid #F2F2F2 !important; } [data-theme="dark"] .neo-tabsheet { background-color : transparent !important; } [data-theme="dark"] .neo-tabsheet-full { background-color : transparent !important; } /* ———————————————— FIX: Status bar backgrounds ———————————————— */ [data-theme="dark"] .statusbar-div { background-color : rgba(20, 25, 40, 0.95) !important; color : var(--text-color) !important; } [data-theme="dark"] .statusbar-div > div { background-color : rgba(20, 25, 40, 0.95) !important; color : var(--text-color) !important; } [data-theme="dark"] .toolsbar-div { background-color : rgba(20, 25, 40, 0.95) !important; color : var(--text-color) !important; } [data-theme="dark"] .toolsbar-div > div { background-color : rgba(20, 25, 40, 0.95) !important; color : var(--text-color) !important; } /* ———————————————— FIX: Message and info containers ———————————————— */ [data-theme="dark"] .message-div { background-color : rgba(20, 25, 40, 0.8) !important; color : var(--text-color) !important; } [data-theme="dark"] .card_info_contentdiv { background-color : rgba(20, 25, 40, 0.8) !important; color : var(--text-color) !important; } /* ———————————————— FIX: Settings and option sections ———————————————— */ [data-theme="dark"] .settingscontentdiv { background-color : transparent !important; } [data-theme="dark"] .settingsheaderdiv { background-color : transparent !important; } [data-theme="dark"] .left-flex { background-color : rgba(20, 25, 40, 0.8) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .right-flex { background-color : rgba(20, 25, 40, 0.8) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .left-card--flex { background-color : rgba(20, 25, 40, 0.8) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3) !important; } /* ———————————————— FIX: Tile card image and content areas ———————————————— */ [data-theme="dark"] .dashboard_card_container { background-color : #171C28 !important; } [data-theme="dark"] .dashboard-imagecard-container { background-color : #171C28 !important; } [data-theme="dark"] .dashboard-imagecard { background-color : #171C28 !important; } /* ———————————————— FIX: Period menu and dropdown options ———————————————— */ [data-theme="dark"] .rg-period { background-color : rgba(30, 35, 50, 0.95) !important; color : var(--text-color) !important; } [data-theme="dark"] .rg-period label { background-color : rgba(30, 35, 50, 0.95) !important; color : var(--text-color) !important; } [data-theme="dark"] .rg-period label:hover { background-color : rgba(0, 255, 255, 0.15) !important; color : var(--rain-color) !important; } [data-theme="dark"] .rg-period input[type="radio"]:checked + label { background : linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(255, 51, 204, 0.2)) !important; color : #ffffff !important; } [data-theme="dark"] .rg-period label:has(> input[type="radio"]:checked) { background : linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(255, 51, 204, 0.2)) !important; color : #ffffff !important; } /* ════════════════════════════════════════════════════════════════════════════ WELCOME PAGE - Dashboard Builder Welcome Screen ════════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .dashboard-welcome-wrapperdiv { background-color : #0F1219 !important; background-size : 40px 40px !important; } html[data-theme="dark"] .dashboard-welcomeheaderdiv { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-paragraphdiv { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-tilediv { background : rgba(23, 28, 40, 0.8) !important; background-color : rgba(23, 28, 40, 0.8) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 255, 0.05) !important; color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-startdiv { background : rgba(23, 28, 40, 0.8) !important; background-color : rgba(23, 28, 40, 0.8) !important; border : 1px solid rgba(0, 255, 255, 0.2) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 255, 0.05) !important; color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-tilediv:hover { border-color : rgba(0, 255, 255, 0.4) !important; box-shadow : 0 4px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .dashboard-startdiv:hover { border-color : rgba(0, 255, 255, 0.4) !important; box-shadow : 0 4px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .dashboard-tilediv h3 { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-tilediv p { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-tilediv span { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-startdiv h3 { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-startdiv p { color : #F2F2F2 !important; } html[data-theme="dark"] .dashboard-startdiv span { color : #F2F2F2 !important; } html[data-theme="dark"] .tile-title { color : #F2F2F2 !important; } html[data-theme="dark"] .icon-layoutdashboard { color : #00FFFF !important; } html[data-theme="dark"] .icon-layoutdashboard i { color : #00FFFF !important; } /* ════════════════════════════════════════════════════════════════════════════ FINAL OVERRIDES - HIGHEST SPECIFICITY ════════════════════════════════════════════════════════════════════════════ */ /* 1. BACKGROUND: Grid + purple orbs - NO SIZE OVERRIDES */ html[data-theme="dark"] body .builder-main-div { background-color : #214a87 !important; background-size : 100% 100%, 100% 100%, 40px 40px, 40px 40px !important; } /* 2. CARD BORDERS: Bright cyan */ html[data-theme="dark"] body .builder-main-div .carddiv { border : 1px solid #00FFFF !important; box-shadow : 0 0 20px rgba(0, 255, 255, 0.25) !important; } /* 3. PLUS ICON: Gradient */ html[data-theme="dark"] body .plusicon { background : linear-gradient(180deg, #00FFFF 0%, #FF33CC 100%) !important; box-shadow : 0 0 25px rgba(0, 255, 255, 0.5), 0 0 50px rgba(255, 51, 204, 0.3) !important; } /* 4. ACTIONS MENU: Base styles (light theme) */ .header-actions-menu { background : #ffffff !important; border : 1px solid rgba(0,0,0,0.1) !important; box-shadow : 0 4px 20px rgba(0,0,0,0.15) !important; } .header-actions-menu .menu-header { color : #94a3b8 !important; } .header-actions-menu .menu-item { color : #334155 !important; } .header-actions-menu .menu-item:hover { background : rgba(0, 0, 0, 0.05) !important; } .header-actions-menu .menu-item i { color : #0284c7 !important; } /* 4b. ACTIONS MENU: Dark theme dropdown */ html[data-theme="dark"] .header-actions-menu { background : #1a1f2e !important; border : 1px solid rgba(0, 255, 255, 0.3) !important; box-shadow : 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .header-actions-menu .menu-header { color : #94a3b8 !important; } html[data-theme="dark"] .header-actions-menu .menu-item { color : #F2F2F2 !important; } html[data-theme="dark"] .header-actions-menu .menu-item:hover { background : rgba(0, 255, 255, 0.1) !important; } html[data-theme="dark"] .header-actions-menu .menu-item i { color : #00FFFF !important; } /* 5. COMPACT ACTION BUTTONS */ .compact-buttons-container { display : flex !important; align-items : center !important; justify-content : center !important; gap : 2px !important; flex-shrink : 1 !important; overflow : hidden !important; min-width : 0 !important; } .compact-action-btn { display : inline-flex !important; align-items : center !important; justify-content : center !important; gap : 4px !important; padding : 3px 10px !important; font-size : 11px !important; font-weight : 500 !important; cursor : pointer !important; border-radius : 12px !important; white-space : nowrap !important; background : transparent !important; color : #64748b !important; border : none !important; transition : all 0.15s ease !important; line-height : 1 !important; flex-shrink : 0 !important; } .compact-action-btn i { font-size : 10px !important; } .compact-action-btn span { font-size : 11px !important; } .compact-action-btn:hover { background : rgba(0, 0, 0, 0.05) !important; color : #334155 !important; } .compact-action-btn.active { background : #0284c7 !important; color : #ffffff !important; } .compact-action-btn.active:hover { background : #0369a1 !important; } /* Menu separator */ .menu-separator { background : rgba(0, 0, 0, 0.1) !important; } /* Dark theme */ html[data-theme="dark"] .compact-action-btn { color : #94a3b8 !important; } html[data-theme="dark"] .compact-action-btn:hover { background : rgba(255, 255, 255, 0.1) !important; color : #e2e8f0 !important; } html[data-theme="dark"] .compact-action-btn.active { background : #0284c7 !important; color : #ffffff !important; } html[data-theme="dark"] .compact-action-btn.active:hover { background : #0369a1 !important; } html[data-theme="dark"] .menu-separator { background : rgba(255, 255, 255, 0.1) !important; }