/** * Unified Dashboard Dark Mode * Extracted from modern_admin_theme.css and optimized * Apply by adding class "modern-theme dark-mode" on * Lightweight layer – overrides light theme tokens. */ /* ROOT DARK OVERRIDES (kept minimal, reuse existing light vars where possible) */ :root.dark-mode { --tgw-bg-primary: #0f172a; --tgw-bg-secondary: #0a1642; --tgw-bg-tertiary: #1e293b; --tgw-text-primary: #ffffff; --tgw-text-secondary: #e2e8f0; --tgw-text-tertiary: #94a3b8; --tgw-border-light: rgba(65,219,242,0.25); --tgw-border-medium: rgba(65,219,242,0.35); --tgw-shadow-md: 0 4px 18px -2px rgba(65,219,242,0.25),0 2px 6px -1px rgba(0,0,0,0.4); } /* BODY & WRAPPER */ body.modern-theme.dark-mode { background: linear-gradient(135deg,#050c21 0%,#0a1642 50%,#050c21 100%) !important; color: var(--tgw-text-secondary); } body.modern-theme.dark-mode #wrapper { background: linear-gradient(135deg,#050c21 0%,#0a1642 30%,#0d1a4a 60%,#050c21 100%) !important; animation: wrapperGlowDark 8s ease-in-out infinite; } body.modern-theme.dark-mode #wrapper::before {filter: brightness(0.9);} @keyframes wrapperGlowDark { 0%,100% {background: linear-gradient(135deg,#050c21 0%,#0a1642 25%,#0d1a4a 50%,#0a1642 75%,#050c21 100%);} 50% {background: linear-gradient(135deg,#0a1642 0%,#0d1a4a 25%,#0f1e52 50%,#0d1a4a 75%,#0a1642 100%);} } /* HEADER */ body.modern-theme.dark-mode #header {background: linear-gradient(135deg,#0a1642,#050c21) !important; box-shadow: 0 0 25px rgba(65,219,242,.35);} body.modern-theme.dark-mode #header .navbar-nav > li > a {color: rgba(255,255,255,0.85) !important;} body.modern-theme.dark-mode #header .navbar-nav > li > a:hover {background: rgba(65,219,242,0.15) !important; color:#41dbf2 !important;} body.modern-theme.dark-mode #top_search input {background: rgba(15,23,42,.85) !important; border-color: rgba(65,219,242,.3) !important; color:#fff !important;} body.modern-theme.dark-mode #top_search input:focus {border-color:#41dbf2 !important; box-shadow:0 0 0 3px rgba(65,219,242,.25);} /* SIDEBAR */ body.modern-theme.dark-mode .sidebar {background: linear-gradient(180deg,#050c21 0%,#0a1642 50%,#050c21 100%) !important; box-shadow:0 0 40px rgba(65,219,242,.25);} body.modern-theme.dark-mode .sidebar li a {color: rgba(255,255,255,0.85) !important; border-bottom:1px solid rgba(65,219,242,0.08);} body.modern-theme.dark-mode .sidebar li a:hover {color:#00CAFF !important; background:rgba(65,219,242,0.15) !important; border-left:3px solid #41dbf2;} body.modern-theme.dark-mode .sidebar li.active > a {background: linear-gradient(135deg,#41dbf2 0%,#0065F8 100%) !important; color:#fff !important; box-shadow:0 4px 18px rgba(65,219,242,.45);} /* PANELS & CARDS */ body.modern-theme.dark-mode .panel, body.modern-theme.dark-mode .tw-card, body.modern-theme.dark-mode .panel_s, body.modern-theme.dark-mode .perfex-saas-surface, body.modern-theme.dark-mode .client-card, body.modern-theme.dark-mode .project-card, body.modern-theme.dark-mode .task-card { background: rgba(15,23,42,0.95) !important; border-color: rgba(65,219,242,0.3); box-shadow: 0 8px 25px rgba(65,219,242,0.18); color: rgba(255,255,255,0.9); } body.modern-theme.dark-mode .panel-heading, body.modern-theme.dark-mode .panel-title {background: linear-gradient(135deg, rgba(65,219,242,.15) 0%, rgba(0,101,248,.08) 100%) !important; color:#fff;} /* WIDGETS */ body.modern-theme.dark-mode .widget {background: linear-gradient(135deg, rgba(15,23,42,0.9) 0%, rgba(10,22,66,0.85) 100%); border-color: rgba(65,219,242,0.3);} body.modern-theme.dark-mode .widget h3 {background: var(--tgw-gradient); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;} body.modern-theme.dark-mode .widget p, body.modern-theme.dark-mode .widget span, body.modern-theme.dark-mode .widget label {color:#0F172A !important;} /* keep contrast inside widget */ body.modern-theme.dark-mode .widget-icon {background: linear-gradient(135deg,#41dbf2 0%,#0065F8 100%); box-shadow:0 4px 15px rgba(65,219,242,.4);} /* TABLES */ body.modern-theme.dark-mode .table {background: rgba(15,23,42,0.85);} body.modern-theme.dark-mode .table thead th {background: rgba(65,219,242,0.15); color:#41dbf2; border-bottom-color: rgba(65,219,242,.4);} body.modern-theme.dark-mode .table tbody tr {border-bottom-color: rgba(65,219,242,.12);} body.modern-theme.dark-mode .table tbody tr:hover {background: linear-gradient(90deg, rgba(65,219,242,.18) 0%, transparent 100%);} /* FORMS */ body.modern-theme.dark-mode .form-control {background: rgba(15,23,42,0.8) !important; border-color: rgba(65,219,242,0.3); color:#fff !important;} body.modern-theme.dark-mode .form-control:focus {background: rgba(15,23,42,0.95) !important; border-color:#41dbf2; box-shadow:0 0 0 3px rgba(65,219,242,0.25);} body.modern-theme.dark-mode .form-group label {color:#fff;} /* DROPDOWNS */ body.modern-theme.dark-mode .dropdown-menu {background: rgba(15,23,42,0.95) !important; border-color: rgba(65,219,242,0.3); box-shadow:0 8px 30px rgba(0,0,0,0.55);} body.modern-theme.dark-mode .dropdown-menu > li > a {color: rgba(255,255,255,0.85) !important;} body.modern-theme.dark-mode .dropdown-menu > li > a:hover {background: rgba(65,219,242,0.18) !important; color:#41dbf2 !important;} /* BUTTONS */ body.modern-theme.dark-mode .btn-primary {background: linear-gradient(135deg,#41dbf2 0%,#0065F8 100%);} body.modern-theme.dark-mode .btn-primary:hover {background: linear-gradient(135deg,#00CAFF 0%,#4300FF 100%); box-shadow:0 4px 20px rgba(65,219,242,0.55);} body.modern-theme.dark-mode .btn, body.modern-theme.dark-mode .client-btn-primary {box-shadow:0 2px 10px rgba(0,0,0,0.4);} /* ALERTS */ body.modern-theme.dark-mode .alert {background: rgba(15,23,42,0.9) !important; border-color: rgba(65,219,242,0.3); color: rgba(255,255,255,0.85);} /* PAGINATION */ body.modern-theme.dark-mode .pagination > .active > a {background: linear-gradient(135deg,#41dbf2 0%,#0065F8 100%); border-color:#41dbf2; color:#fff;} /* BADGES & LABELS */ body.modern-theme.dark-mode .label-primary {background: rgba(65,219,242,0.2); color:#41dbf2;} body.modern-theme.dark-mode .label-success {background: rgba(16,185,129,0.25); color:#10B981;} body.modern-theme.dark-mode .label-warning {background: rgba(245,158,11,0.25); color:#F59E0B;} body.modern-theme.dark-mode .label-danger {background: rgba(239,68,68,0.25); color:#EF4444;} /* MODALS */ body.modern-theme.dark-mode .modal-content {background: rgba(15,23,42,0.98); border:1px solid rgba(65,219,242,0.3);} body.modern-theme.dark-mode .modal-header {background: rgba(65,219,242,0.12); border-bottom-color: rgba(65,219,242,0.35);} body.modern-theme.dark-mode .modal-title {color:#fff;} /* BREADCRUMB */ body.modern-theme.dark-mode .breadcrumb > li a {color:#41dbf2;} body.modern-theme.dark-mode .breadcrumb > li.active {color: rgba(255,255,255,0.7);} /* SCROLLBAR */ body.modern-theme.dark-mode ::-webkit-scrollbar-track {background:#050c21;} body.modern-theme.dark-mode ::-webkit-scrollbar-thumb {background: linear-gradient(180deg,#41dbf2 0%,#0065F8 50%,#4300FF 100%); border:2px solid #050c21;} /* PERFEX SAAS SPECIFIC */ body.modern-theme.dark-mode .perfex-saas-surface__header {background: rgba(65,219,242,0.12); border-bottom:2px solid rgba(65,219,242,0.3);} body.modern-theme.dark-mode .perfex-saas-title {background: var(--tgw-gradient); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;} /* CLIENT TABLES */ body.modern-theme.dark-mode .client-table-wrapper {background: rgba(15,23,42,0.95); border-color: rgba(65,219,242,0.3);} body.modern-theme.dark-mode .client-table thead th {background: rgba(65,219,242,0.15); color:#41dbf2; border-bottom-color: rgba(65,219,242,0.35);} body.modern-theme.dark-mode .client-table tbody tr {border-bottom-color: rgba(65,219,242,0.12);} body.modern-theme.dark-mode .client-table tbody tr:hover {background: linear-gradient(90deg, rgba(65,219,242,0.22) 0%, transparent 100%);} /* TRANSITIONS */ body.modern-theme.dark-mode, body.modern-theme.dark-mode * {transition: background .35s ease, color .35s ease, border-color .35s ease;} /* ACCESSIBILITY: Reduced motion */ @media (prefers-reduced-motion: reduce) {body.modern-theme.dark-mode, body.modern-theme.dark-mode * {animation:none !important; transition:none !important;}}