/* ============================================================ MAHAGST - Modern Dark Mode Theme A clean, modern dark theme with professional vibes Activated by adding .dark-theme class to ============================================================ */ /* ---- CSS Custom Properties for Dark Mode ---- */ :root body.dark-theme { --dm-bg-primary: #0f1117; --dm-bg-secondary: #1a1d27; --dm-bg-tertiary: #242835; --dm-bg-card: #1e2230; --dm-bg-hover: #2a2f40; --dm-bg-input: #1a1d27; --dm-bg-header: #141722; --dm-bg-nav: #0d0f15; --dm-text-primary: #e4e6ef; --dm-text-secondary: #a0a4b8; --dm-text-muted: #6b7089; --dm-text-heading: #f0f1f7; --dm-border: #2a2f40; --dm-border-light: #1e2230; --dm-border-input: #353a4f; --dm-accent: #6366f1; --dm-accent-hover: #818cf8; --dm-accent-muted: #6366f133; --dm-success: #22c55e; --dm-success-bg: #22c55e15; --dm-danger: #ef4444; --dm-danger-bg: #ef444415; --dm-warning: #f59e0b; --dm-warning-bg: #f59e0b15; --dm-info: #3b82f6; --dm-info-bg: #3b82f615; --dm-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --dm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --dm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --color1: #6366f1 !important; --color1-1: #6366f111 !important; --color1-3: #6366f133 !important; --color1-8: #6366f188 !important; --color2: #f59e0b !important; --color2-1: #f59e0b11 !important; --color2-3: #f59e0b33 !important; --color3: #e4e6ef !important; --color9: #818cf8 !important; --color10: #1e2230 !important; --color11: #a78bfa !important; --color12: #f59e0b !important; } /* ---- Global / Body ---- */ .dark-theme { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } .dark-theme *::selection { background: var(--dm-accent); color: #fff; } /* ---- Typography ---- */ .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 { color: var(--dm-text-heading) !important; } .dark-theme p, .dark-theme span, .dark-theme label, .dark-theme li, .dark-theme td, .dark-theme th, .dark-theme div { color: var(--dm-text-primary); } .dark-theme a { color: var(--dm-accent-hover) !important; transition: color 0.2s ease; } .dark-theme a:hover { color: #a5b4fc !important; } .dark-theme .text-dark { color: var(--dm-text-primary) !important; } .dark-theme .text-muted { color: var(--dm-text-muted) !important; } .dark-theme small, .dark-theme .small { color: var(--dm-text-secondary) !important; } /* ---- Main Header Area ---- */ .dark-theme .main-header { background: var(--dm-bg-nav) !important; box-shadow: var(--dm-shadow) !important; } .dark-theme .header-top { background-color: var(--dm-bg-header) !important; } .dark-theme .header-top .inner-container, .dark-theme .header-top .auto-container { background-color: var(--dm-bg-header) !important; } .dark-theme .header-top .info-list li { color: var(--dm-text-secondary) !important; } .dark-theme .header-top .info-list li a { color: var(--dm-text-secondary) !important; font-weight: 600; } .dark-theme .header-top .info-list li a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .text-icon { color: var(--dm-text-secondary) !important; } .dark-theme .ico-box { border-color: var(--dm-border) !important; } .dark-theme .ico-box.bg-dark { background-color: #fff !important; } .dark-theme .ico-box.bg-white { background-color: #333 !important; } /* Search box in header */ .dark-theme .search-box .input-group-text { background: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-muted) !important; } .dark-theme .search-box .form-control { background: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .search-box .form-control::placeholder { color: var(--dm-text-muted) !important; } /* ---- Custom Top Header (Logo area) ---- */ .dark-theme .custom-top-header { background-color: var(--dm-bg-secondary) !important; background-image: none !important; } .dark-theme .dept-text .line1 { color: var(--dm-text-heading) !important; } .dark-theme .dept-text .line2 { color: var(--dm-accent-hover) !important; } .dark-theme .dept-text .line3 { color: var(--dm-warning) !important; animation: darkFlashText 1.5s infinite !important; } @keyframes darkFlashText { 0% { color: #f59e0b; } 50% { color: #ef4444; } 100% { color: #f59e0b; } } /* ---- Navigation / Header Upper ---- */ .dark-theme .main-header .header-upper { background-color: var(--dm-bg-nav) !important; } .dark-theme .auto-container { background-color: var(--dm-bg-nav) !important; } .dark-theme .main-menu .navigation > li > a { color: var(--dm-text-primary) !important; } .dark-theme .main-menu .navigation > li:hover > a { color: var(--dm-accent-hover) !important; } .dark-theme .navbar-nav .nav-link.active { color: #fff !important; } .dark-theme .timer { color: var(--dm-text-secondary) !important; } /* ---- Navigation Dropdowns ---- */ .dark-theme .main-menu .navigation > li > ul { background: var(--dm-bg-tertiary) !important; border: 1px solid var(--dm-border) !important; border-top: 2px solid var(--dm-accent) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .main-menu .navigation > li > ul > li { border-bottom-color: var(--dm-border) !important; } .dark-theme .main-menu .navigation > li > ul > li a { color: var(--dm-text-secondary) !important; } .dark-theme .main-menu .navigation > li > ul > li:hover > a { color: #fff !important; text-shadow: none !important; background: var(--dm-bg-hover) !important; } .dark-theme .main-menu .navigation ul ul { background: var(--dm-bg-tertiary) !important; border: 1px solid var(--dm-border) !important; } /* ---- Mega Menu ---- */ .dark-theme .main-menu .navigation > li > .mega-menu { background: var(--dm-bg-tertiary) !important; border: 1px solid var(--dm-border) !important; border-top: 2px solid var(--dm-accent) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .main-menu .mega-box a { color: var(--dm-text-secondary) !important; } .dark-theme .main-menu .mega-box a:hover { color: #fff !important; } .dark-theme .mega-box h4 { color: var(--dm-accent-hover) !important; border-bottom-color: var(--dm-border) !important; } /* ---- Marquee / Notification Bar ---- */ .dark-theme .header2 { background: var(--dm-bg-tertiary) !important; } .dark-theme .header2 h6 { color: var(--dm-warning) !important; } .dark-theme .pr-marquee-wrapper { background: linear-gradient(135deg, var(--dm-bg-nav), var(--dm-bg-tertiary)) !important; } .dark-theme .marquee a.text-white { color: var(--dm-text-secondary) !important; } /* ---- Sticky Header ---- */ .dark-theme .sticky-header { background: var(--dm-bg-header) !important; border-bottom-color: var(--dm-border) !important; } .dark-theme .sticky-header .main-menu .navigation > li > a { color: var(--dm-text-primary) !important; } .dark-theme .sticky-header .main-menu .navigation > li:hover > a { color: var(--dm-accent-hover) !important; } /* ---- Layout / Sidebar / Main Content ---- */ .dark-theme .layout { background: var(--dm-bg-primary) !important; } .dark-theme .layout .sidebar { background: var(--dm-bg-secondary) !important; border-right: 1px solid var(--dm-border) !important; } .dark-theme .layout .main-right { background: var(--dm-bg-primary) !important; } .dark-theme .sidebar .block-2, .dark-theme .sidebar .block-3 { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-theme .sidebar h3, .dark-theme .sidebar h4 { color: var(--dm-text-heading) !important; } .dark-theme .sidebar a { color: var(--dm-text-secondary) !important; } .dark-theme .sidebar a:hover, .dark-theme .sidebar a.active { color: var(--dm-accent-hover) !important; background: var(--dm-accent-muted) !important; } /* ---- Cards ---- */ .dark-theme .card { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-sm) !important; color: var(--dm-text-primary) !important; } .dark-theme .card:hover { box-shadow: var(--dm-shadow) !important; } .dark-theme .card::before { background: var(--dm-accent) !important; } .dark-theme .card-header { background: var(--dm-bg-tertiary) !important; border-bottom: 1px solid var(--dm-border) !important; color: var(--dm-text-heading) !important; } .dark-theme .card-body { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } .dark-theme .card-footer { background: var(--dm-bg-tertiary) !important; border-top: 1px solid var(--dm-border) !important; } .dark-theme .card-title { color: var(--dm-text-heading) !important; } .dark-theme .card-description { color: var(--dm-text-secondary) !important; } .dark-theme .custom-card { background: linear-gradient(to bottom right, var(--dm-bg-card), var(--dm-bg-tertiary)) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-sm) !important; color: var(--dm-text-primary) !important; } .dark-theme .custom-card:hover { box-shadow: var(--dm-shadow-lg) !important; border-color: var(--dm-accent) !important; } .dark-theme .custom-card a { color: var(--dm-text-secondary) !important; } .dark-theme .custom-card a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .card-links a { color: var(--dm-text-secondary) !important; } .dark-theme .card-links a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .card-links li { border-bottom-color: var(--dm-border) !important; } .dark-theme .custom-btn { background: linear-gradient(to right, var(--dm-accent), #818cf8) !important; color: #fff !important; box-shadow: 0 0.5rem 1rem rgba(99, 102, 241, 0.3) !important; } .dark-theme .custom-btn:hover { background: linear-gradient(to right, #4f46e5, var(--dm-accent)) !important; box-shadow: 0 0.5rem 1rem rgba(99, 102, 241, 0.5) !important; } .dark-theme .custom-btn2 { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .custom-btn2:hover { background: var(--dm-accent-hover) !important; } /* ---- Dashboard Cards ---- */ .dark-theme .dash-card { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .dash-card.bg-success { background: var(--dm-success-bg) !important; border-left: 3px solid var(--dm-success) !important; } .dark-theme .dash-card.bg-primary { background: var(--dm-info-bg) !important; border-left: 3px solid var(--dm-info) !important; } .dark-theme .dash-card.bg-danger { background: var(--dm-danger-bg) !important; border-left: 3px solid var(--dm-danger) !important; } .dark-theme .dash-card.bg-warning { background: var(--dm-warning-bg) !important; border-left: 3px solid var(--dm-warning) !important; } /* ---- Tables ---- */ .dark-theme .table { color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } .dark-theme .table > :not(caption) > * > * { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; border-bottom-color: var(--dm-border) !important; } .dark-theme .table thead th, .dark-theme table.table thead th, .dark-theme table.tab3 thead td, .dark-theme table.tab3 tr th { background: var(--dm-bg-tertiary) !important; color: var(--dm-accent-hover) !important; border-bottom: 2px solid var(--dm-accent) !important; font-weight: 600; } .dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--dm-bg-secondary) !important; } .dark-theme .table-hover > tbody > tr:hover > * { background-color: var(--dm-bg-hover) !important; } .dark-theme .table-bordered > :not(caption) > * { border-color: var(--dm-border) !important; } .dark-theme .table-bordered > :not(caption) > * > * { border-color: var(--dm-border) !important; } .dark-theme .dataTables_wrapper .dataTables_length, .dark-theme .dataTables_wrapper .dataTables_filter, .dark-theme .dataTables_wrapper .dataTables_info, .dark-theme .dataTables_wrapper .dataTables_paginate { color: var(--dm-text-secondary) !important; } .dark-theme .dataTables_wrapper .dataTables_filter input, .dark-theme .dataTables_wrapper .dataTables_length select { background: var(--dm-bg-input) !important; border: 1px solid var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--dm-text-secondary) !important; background: var(--dm-bg-tertiary) !important; border-color: var(--dm-border) !important; } .dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--dm-accent) !important; color: #fff !important; border-color: var(--dm-accent) !important; } /* ---- Forms & Inputs ---- */ .dark-theme .pri-form, .dark-theme textarea.pri-form, .dark-theme input.pri-form, .dark-theme select.pri-form { background: var(--dm-bg-input) !important; border: 1px solid var(--dm-border-input) !important; color: var(--dm-text-primary) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dark-theme .pri-form:focus, .dark-theme textarea.pri-form:focus, .dark-theme input.pri-form:focus, .dark-theme select.pri-form:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px var(--dm-accent-muted) !important; outline: none !important; } .dark-theme .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .form-control:focus { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-accent) !important; border-bottom: 4px solid var(--dm-accent) !important; box-shadow: 0 0 0 3px var(--dm-accent-muted) !important; color: var(--dm-text-primary) !important; } .dark-theme .form-control::placeholder { color: var(--dm-text-muted) !important; } .dark-theme .form-control:disabled, .dark-theme .form-control[readonly] { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-muted) !important; opacity: 0.7; cursor: not-allowed; } .dark-theme .form-control:-webkit-autofill, .dark-theme .form-control:-webkit-autofill:hover, .dark-theme .form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--dm-bg-input) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; caret-color: var(--dm-text-primary) !important; } .dark-theme .login-box .form-control:focus { border: 1px solid var(--dm-border) !important; border-bottom: none !important; box-shadow: none !important; background: var(--dm-bg-input) !important; } .dark-theme .table .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .captcha-field .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme body .toTableView .row > div .form-group .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .toTableView .row:first-child > div label { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; } /* ---- Form Card ---- */ .dark-theme .form-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important; color: var(--dm-text-primary) !important; } .dark-theme .form-card .form-card-header { background-color: var(--dm-accent) !important; color: #fff !important; box-shadow: var(--dm-shadow-sm) !important; } .dark-theme .form-card .form-card-header h5 { color: #fff !important; } .dark-theme .form-card label { color: var(--dm-text-primary) !important; } .dark-theme .form-card .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .form-card .form-control:focus { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-accent) !important; border-bottom: 4px solid var(--dm-accent) !important; box-shadow: 0 0 0 3px var(--dm-accent-muted) !important; } .dark-theme .form-card .btn { box-shadow: var(--dm-shadow-sm) !important; } /* ---- Form Control Static & Defect Highlight ---- */ .dark-theme .form-control-static { border-bottom-color: var(--dm-text-muted) !important; color: var(--dm-text-primary) !important; } .dark-theme .defect-highlight { border-color: var(--dm-danger) !important; background: rgba(239, 68, 68, 0.08) !important; } /* ---- Checkbox wrapper ---- */ .dark-theme .checkbox-wrapper-19 { --background-color: var(--dm-bg-card); } .dark-theme .form-select { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme select option { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; } .dark-theme .form-check-input { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; } .dark-theme .form-check-input:checked { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } .dark-theme .input-group-text { background-color: var(--dm-bg-tertiary) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-secondary) !important; } .dark-theme .form-label, .dark-theme label { color: var(--dm-text-secondary) !important; } .dark-theme .form-group .err { color: var(--dm-danger) !important; } .dark-theme .err-msg { background: var(--dm-danger-bg) !important; color: var(--dm-danger) !important; border: 1px solid var(--dm-danger) !important; } /* ---- Buttons ---- */ .dark-theme .btn { box-shadow: var(--dm-shadow-sm) !important; transition: all 0.2s ease !important; } .dark-theme .btn-primary { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } .dark-theme .btn-primary:hover { background-color: var(--dm-accent-hover) !important; border-color: var(--dm-accent-hover) !important; } .dark-theme .btn-success { background-color: var(--dm-success) !important; color: #fff !important; } .dark-theme .btn-danger { background-color: var(--dm-danger) !important; color: #fff !important; } .dark-theme .btn-warning { background-color: var(--dm-warning) !important; color: #000 !important; } .dark-theme .btn-info { background-color: var(--dm-info) !important; color: #fff !important; } .dark-theme .btn-outline-primary { color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } .dark-theme .btn-outline-primary:hover { background-color: var(--dm-accent) !important; color: #fff !important; } .dark-theme .btn-light { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } .dark-theme .btn-secondary { background-color: var(--dm-bg-hover) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } .dark-theme .add-new { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .add-new:hover { background: var(--dm-accent-hover) !important; } .dark-theme .add_more_button_cls { color: var(--dm-accent-hover) !important; background: var(--dm-bg-tertiary) !important; } /* ---- Pagination ---- */ .dark-theme nav.d-flex.justify-content-between { background: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; } .dark-theme .page-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; } .dark-theme .page-link:hover { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important; } .dark-theme .page-item.active .page-link { background: linear-gradient(135deg, var(--dm-accent), var(--dm-accent-hover)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 3px 12px rgba(99, 102, 241, 0.4) !important; } .dark-theme .page-item.disabled .page-link { background-color: var(--dm-bg-primary) !important; border-color: var(--dm-border-light) !important; color: var(--dm-text-muted) !important; box-shadow: none !important; opacity: 0.5; } /* Pagination results count */ .dark-theme nav.d-flex.justify-content-between p.small.text-muted { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-theme nav.d-flex.justify-content-between p.small.text-muted .fw-semibold { color: var(--dm-accent-hover) !important; } /* ---- Welcome Section ---- */ .dark-theme .welcome-sec { background: var(--dm-bg-secondary) !important; } .dark-theme .welcome-sec .pr-ticker-title { color: var(--dm-text-heading) !important; } .dark-theme .welcome-sec .pr-ticker-wrapper ul.pr-ticker { background: var(--dm-bg-secondary) !important; } /* ---- Quote & Info Blocks ---- */ .dark-theme .quote { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-secondary) !important; border-left: 3px solid var(--dm-accent) !important; } .dark-theme .instruction { background: var(--dm-danger-bg) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; color: var(--dm-text-primary) !important; } /* ---- Login Area ---- */ .dark-theme .login-container { background-color: var(--dm-bg-primary) !important; } .dark-theme .login-box { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .login-box h5 { color: var(--dm-text-heading) !important; } /* ---- Profile Panel ---- */ .dark-theme .profile-panel { background: var(--dm-bg-secondary) !important; } .dark-theme .profile .drop-menu { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .profile .drop-menu li a { background: var(--dm-bg-card) !important; color: var(--dm-text-secondary) !important; } .dark-theme .profile .drop-menu li a:hover { background: var(--dm-bg-hover) !important; color: var(--dm-accent-hover) !important; } .dark-theme .profile .drop-menu .header { background: var(--dm-bg-tertiary) !important; border-bottom: 1px solid var(--dm-border) !important; } .dark-theme .profile .drop-menu h1 { color: var(--dm-text-heading) !important; } /* ---- Sections ---- */ .dark-theme .sec-2 { background: var(--dm-bg-primary) !important; } .dark-theme .repeat-div, .dark-theme .block-3 { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } /* ---- Modal ---- */ .dark-theme .modal-content { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .modal-header { background-color: var(--dm-bg-tertiary) !important; border-bottom-color: var(--dm-border) !important; } .dark-theme .modal-header .modal-title { color: var(--dm-text-heading) !important; } .dark-theme .modal-header .btn-close { filter: invert(1) !important; } .dark-theme .modal-body { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } .dark-theme .modal-footer { background-color: var(--dm-bg-tertiary) !important; border-top-color: var(--dm-border) !important; } .dark-theme .modal-backdrop { background-color: rgba(0, 0, 0, 0.7) !important; } /* ---- Alerts ---- */ .dark-theme .alert { border: none !important; } .dark-theme .alert-success { background: var(--dm-success-bg) !important; color: var(--dm-success) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; } .dark-theme .alert-danger { background: var(--dm-danger-bg) !important; color: var(--dm-danger) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } .dark-theme .alert-warning { background: var(--dm-warning-bg) !important; color: var(--dm-warning) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; } .dark-theme .alert-info { background: var(--dm-info-bg) !important; color: var(--dm-info) !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; } .dark-theme .prAlert-wrapper .prAlert-box { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; box-shadow: var(--dm-shadow-lg) !important; border: 1px solid var(--dm-border) !important; } /* ---- Toast ---- */ .dark-theme .pr-toast { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } /* ---- Breadcrumb ---- */ .dark-theme .breadcrumb { background: var(--dm-bg-secondary) !important; } .dark-theme .breadcrumb-item a { color: var(--dm-accent-hover) !important; } .dark-theme .breadcrumb-item.active { color: var(--dm-text-muted) !important; } /* ---- Badges ---- */ .dark-theme .badge.bg-primary { background-color: var(--dm-accent) !important; } .dark-theme .badge.bg-success { background-color: var(--dm-success) !important; } .dark-theme .badge.bg-danger { background-color: var(--dm-danger) !important; } .dark-theme .badge.bg-warning { background-color: var(--dm-warning) !important; } .dark-theme .badge.bg-info { background-color: var(--dm-info) !important; } .dark-theme .badge.bg-secondary { background-color: var(--dm-bg-hover) !important; } /* ---- Loader ---- */ .dark-theme .submit-loader { background: rgba(15, 17, 23, 0.85) !important; } .dark-theme .submit-loader span { color: var(--dm-text-primary) !important; } .dark-theme .submit-loader .spinner { border-color: var(--dm-border) !important; border-top-color: var(--dm-accent) !important; } /* ---- Progress Bar ---- */ .dark-theme #progressbar li:before { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-muted) !important; } .dark-theme #progressbar li:after { background: var(--dm-border) !important; } .dark-theme #progressbar { color: var(--dm-text-muted) !important; } .dark-theme #progressbar .active { color: var(--dm-accent-hover) !important; } .dark-theme #progressbar li.active:before, .dark-theme #progressbar li.active:after { background: var(--dm-accent) !important; color: #fff !important; } /* ---- Footer ---- */ .dark-theme .modern-footer { background: var(--dm-bg-nav) !important; } .dark-theme .footer-box-2 { background: var(--dm-bg-tertiary) !important; } .dark-theme .footer-box-2 a { color: var(--dm-text-secondary) !important; } .dark-theme .footer-box-2 a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .footer-box-3 { background: var(--dm-bg-secondary) !important; color: var(--dm-text-secondary) !important; } .dark-theme .footer-box-3 h4 { color: var(--dm-text-heading) !important; } .dark-theme .footer-box-3 a { color: var(--dm-text-muted) !important; } .dark-theme .footer-box-3 a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .footer-box-3 hr { border-color: var(--dm-border) !important; } .dark-theme .footer-box-4 { background: var(--dm-bg-primary) !important; color: var(--dm-text-secondary) !important; } .dark-theme .footer-box-4 span { color: var(--dm-text-secondary) !important; } .dark-theme .main-footer { background-color: var(--dm-bg-secondary) !important; border-top: 1px solid var(--dm-border) !important; color: var(--dm-text-secondary) !important; } /* ---- Scrollbar ---- */ .dark-theme ::-webkit-scrollbar { width: 8px; height: 8px; } .dark-theme ::-webkit-scrollbar-track { background: var(--dm-bg-primary); } .dark-theme ::-webkit-scrollbar-thumb { background: var(--dm-bg-hover); border-radius: 4px; } .dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--dm-accent); } /* ---- Highlight ---- */ .dark-theme .highlight { background-color: var(--dm-accent) !important; color: #fff !important; } /* ---- Services Section ---- */ .dark-theme .services-header { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } .dark-theme .services-header h4 { color: #fff !important; } .dark-theme .services-header-2 { background: var(--dm-bg-tertiary) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .services-header-2 h6 { color: var(--dm-text-heading) !important; } .dark-theme .bg-color-1 { background: var(--dm-bg-tertiary) !important; } /* ---- Tabs ---- */ .dark-theme .nav-tabs { border-bottom-color: var(--dm-border) !important; } .dark-theme .nav-tabs .nav-link { color: var(--dm-text-secondary) !important; border-color: transparent !important; } .dark-theme .nav-tabs .nav-link:hover { border-color: var(--dm-border) !important; color: var(--dm-accent-hover) !important; } .dark-theme .nav-tabs .nav-link.active { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important; color: var(--dm-accent-hover) !important; } .dark-theme .tab-content { background: var(--dm-bg-card) !important; } /* ---- Accordions ---- */ .dark-theme .accordion-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-theme .accordion-button { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; } .dark-theme .accordion-button:not(.collapsed) { background-color: var(--dm-accent-muted) !important; color: var(--dm-accent-hover) !important; } .dark-theme .accordion-button::after { filter: invert(1) !important; } .dark-theme .accordion-body { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } /* ---- Tooltips & Popovers ---- */ .dark-theme .tooltip-inner { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; } .dark-theme .popover { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-theme .popover-body { color: var(--dm-text-primary) !important; } /* ---- Dropdown ---- */ .dark-theme .dropdown-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } .dark-theme .dropdown-item { color: var(--dm-text-secondary) !important; } .dark-theme .dropdown-item:hover, .dark-theme .dropdown-item:focus { background-color: var(--dm-bg-hover) !important; color: var(--dm-text-primary) !important; } .dark-theme .dropdown-divider { border-color: var(--dm-border) !important; } /* ---- Misc Bootstrap Overrides ---- */ .dark-theme .bg-white { background-color: var(--dm-bg-secondary) !important; } .dark-theme .bg-light { background-color: var(--dm-bg-tertiary) !important; } .dark-theme .border { border-color: var(--dm-border) !important; } .dark-theme .border-bottom { border-bottom-color: var(--dm-border) !important; } .dark-theme .border-top { border-top-color: var(--dm-border) !important; } .dark-theme .shadow, .dark-theme .shadow-sm, .dark-theme .shadow-lg { box-shadow: var(--dm-shadow) !important; } .dark-theme hr { border-color: var(--dm-border) !important; opacity: 0.5; } .dark-theme .list-group-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-theme .list-group-item.active { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } /* ---- Color Palette Widget ---- */ .dark-theme color-palate { border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } /* ---- FAQ ---- */ .dark-theme ol.faq li h4 { color: var(--dm-text-heading) !important; } .dark-theme ol.faq li p, .dark-theme ol.faq li .ans { color: var(--dm-text-secondary) !important; } /* ---- Expand Box / Tree ---- */ .dark-theme .expand-box { background: var(--dm-bg-card) !important; } .dark-theme .expand-box .has-children > span { color: var(--dm-text-heading) !important; } /* ---- Pay Section ---- */ .dark-theme .pay-your-taxes { background: var(--dm-bg-secondary) !important; } .dark-theme .pay-your-taxes h4 { color: var(--dm-text-heading) !important; } /* ---- Serial Buttons ---- */ .dark-theme .serial-btn { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-secondary) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .serial-btn:hover, .dark-theme .serial-btn.active { background: var(--dm-accent) !important; color: #fff !important; } /* ---- Multi-Select Dropdown ---- */ .dark-theme .multiselect-dropdown { background: var(--dm-bg-input) !important; border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .multiselect-dropdown .dropdown-btn { background: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .multiselect-dropdown-list-wrapper { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } .dark-theme .multiselect-dropdown-list-wrapper .multiselect-dropdown-search { background: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } /* ---- FlatPickr Date ---- */ .dark-theme .flatpickr-calendar { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .flatpickr-months .flatpickr-month { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; } .dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; } .dark-theme .flatpickr-weekdays { background: var(--dm-bg-tertiary) !important; } .dark-theme .flatpickr-weekday { color: var(--dm-text-muted) !important; background: transparent !important; } .dark-theme .flatpickr-day { color: var(--dm-text-primary) !important; } .dark-theme .flatpickr-day:hover { background: var(--dm-bg-hover) !important; border-color: var(--dm-border) !important; } .dark-theme .flatpickr-day.selected { background: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } .dark-theme .flatpickr-day.today { border-color: var(--dm-accent) !important; } /* ---- Images with White bg ---- */ .dark-theme .dept-logo { filter: brightness(0.95); } .dark-theme .powered-logo.bg-white { background-color: rgba(255, 255, 255, 0.9) !important; } /* ---- CFH Amount ---- */ .dark-theme .cfh-amount { color: var(--dm-accent-hover) !important; } /* ============================================================ Admin Layout - Core Structure ============================================================ */ .dark-theme .main-app { background-color: var(--dm-bg-primary) !important; } .dark-theme .main-header .logo, .dark-theme header .logo { color: var(--dm-accent-hover) !important; } .dark-theme .main-header { background-color: var(--dm-bg-header) !important; border-bottom-color: var(--dm-border) !important; } .dark-theme .bdy { background: var(--dm-bg-primary) !important; } /* ============================================================ Admin Layout - Sub Menu (Hamburger Dropdown) ============================================================ */ .dark-theme .sub-menu { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; box-shadow: var(--dm-shadow-lg) !important; border: 1px solid var(--dm-border) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } .dark-theme .sub-menu a { color: var(--dm-text-secondary) !important; } .dark-theme .sub-menu a:hover { color: var(--dm-accent-hover) !important; text-decoration: none !important; } /* ---- ico-menu (admin sub-menu icon list) ---- */ .dark-theme ul.ico-menu { color: var(--dm-text-primary) !important; } .dark-theme ul.ico-menu label { color: var(--dm-text-primary) !important; text-shadow: none !important; } .dark-theme ul.ico-menu label a, .dark-theme ul.ico-menu label a:hover { color: var(--dm-text-primary) !important; } .dark-theme ul.ico-menu label a:hover { color: var(--dm-accent-hover) !important; } .dark-theme ul.ico-menu label i { color: var(--dm-accent-hover) !important; } .dark-theme ul.ico-menu > li { border-bottom-color: var(--dm-border) !important; } .dark-theme ul.ico-menu > li:hover { border-bottom-color: var(--dm-accent) !important; } .dark-theme ul.ico-menu ul a { color: var(--dm-text-secondary) !important; } /* ---- R-menu (hamburger icon button) ---- */ .dark-theme .r-menu { border-color: var(--dm-accent) !important; background: var(--dm-bg-tertiary) !important; } .dark-theme i.priya-th { background: var(--dm-bg-secondary) !important; color: var(--dm-accent-hover) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .dark-theme i.priya-th:hover { color: var(--dm-accent) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important; } /* ---- Admin Header Profile ---- */ .dark-theme .main-header .profile i.profile-icon { background: var(--dm-accent) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important; } .dark-theme .main-header .profile i.profile-icon:hover { background: var(--dm-accent-hover) !important; } .dark-theme .has-submenu .drop-menu { background: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow-lg) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .has-submenu:hover .drop-menu::before { background: var(--dm-bg-card) !important; } .dark-theme .has-submenu .drop-menu .header { background: linear-gradient(0deg, var(--dm-accent-muted), rgba(99, 102, 241, 0.08)) !important; color: var(--dm-accent-hover) !important; } .dark-theme .has-submenu .drop-menu .header .big { color: var(--dm-text-heading) !important; } .dark-theme .has-submenu .drop-menu .header .small { color: var(--dm-text-secondary) !important; } .dark-theme .has-submenu ul a { color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border) !important; } .dark-theme .has-submenu ul a:hover { background-color: var(--dm-bg-hover) !important; color: var(--dm-accent-hover) !important; } .dark-theme .has-submenu ul li.logout { background: var(--dm-bg-tertiary) !important; } .dark-theme .has-submenu ul li.logout a { color: var(--dm-danger) !important; } /* ============================================================ Admin Layout - Side Nav (Left Sidebar) ============================================================ */ .dark-theme ul.side-nav { background: var(--dm-bg-secondary) !important; } .dark-theme ul.side-nav li { border-bottom-color: var(--dm-border) !important; } .dark-theme ul.side-nav li a, .dark-theme ul.side-nav li .drop-menu-head { color: var(--dm-text-secondary) !important; } .dark-theme ul.side-nav li a:hover { text-decoration: none !important; background-color: var(--dm-accent-muted) !important; color: var(--dm-accent-hover) !important; } .dark-theme ul.side-nav li.active a { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .side-nav li.active a:after { background: var(--dm-accent) !important; } .dark-theme ul.side-nav li a i { color: inherit !important; } .dark-theme ul.side-nav li.drop-menu.m-active { background-color: var(--dm-accent-muted) !important; box-shadow: var(--dm-shadow-sm) !important; } .dark-theme ul.side-nav li.drop-menu.m-active ul.submenu { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-theme ul.submenu li { border-bottom-color: var(--dm-border-light) !important; } .dark-theme ul.submenu li a { color: var(--dm-text-muted) !important; } .dark-theme ul.submenu li a:hover { color: var(--dm-accent-hover) !important; background-color: var(--dm-bg-hover) !important; } /* ============================================================ Admin Layout - Main Menubar ============================================================ */ .dark-theme .main-menubar { background: var(--dm-bg-tertiary) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } .dark-theme .main-menubar a { color: var(--dm-text-primary) !important; text-shadow: none !important; } .dark-theme .main-menubar a:hover { color: var(--dm-accent-hover) !important; background: var(--dm-bg-hover) !important; } .dark-theme .main-menubar a i { color: var(--dm-accent-hover) !important; } .dark-theme .main-menubar:before, .dark-theme .main-menubar:after { border-top-color: var(--dm-bg-tertiary) !important; border-right-color: var(--dm-bg-tertiary) !important; } /* ============================================================ Admin Layout - Cards & Tables ============================================================ */ .dark-theme .card { background-color: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow-sm) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-theme .card .card-body { color: var(--dm-text-primary) !important; background: var(--dm-bg-card) !important; } .dark-theme .card h6 { color: var(--dm-accent-hover) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-sm) !important; } .dark-theme h6.card-header { color: var(--dm-text-heading) !important; background-color: var(--dm-bg-tertiary) !important; } .dark-theme .card-header { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; } .dark-theme .card-body h3 { color: var(--dm-accent-hover) !important; border-bottom-color: var(--dm-border) !important; } .dark-theme .card .form-section { color: var(--dm-text-secondary) !important; } /* Admin DataTable */ .dark-theme .card .table { color: var(--dm-text-primary) !important; } .dark-theme .card .theme-tbl thead th, .dark-theme .card table.dataTable thead th { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-accent-hover) !important; border-color: var(--dm-border) !important; } .dark-theme .card table thead th, .dark-theme .card table tbody td, .dark-theme .card table.dataTable thead th, .dark-theme .card table.dataTable thead td, .dark-theme .card table.dataTable.no-footer { border-color: var(--dm-border) !important; } .dark-theme .card .theme-tbl.table-stripped tbody tr:nth-child(even), .dark-theme .card table.dataTable tbody tr.even { background-color: var(--dm-bg-secondary) !important; } .dark-theme .card table.dataTable tbody tr.odd { background-color: var(--dm-bg-card) !important; } .dark-theme .card .dataTables_wrapper .dataTables_length, .dark-theme .card .dataTables_wrapper .dataTables_filter, .dark-theme .card .dataTables_wrapper .dataTables_info, .dark-theme .card .dataTables_wrapper .dataTables_processing, .dark-theme .card .dataTables_wrapper .dataTables_paginate { color: var(--dm-text-secondary) !important; } .dark-theme .card .dataTables_wrapper .dataTables_length select, .dark-theme .card .dataTables_wrapper .dataTables_filter input { border-color: var(--dm-border-input) !important; color: var(--dm-text-primary) !important; background: var(--dm-bg-input) !important; } .dark-theme .card .dataTables_wrapper .dataTables_paginate .paginate_button.btn { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; } .dark-theme .card .dataTables_wrapper .dataTables_paginate .paginate_button.btn.current { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .card .dataTables_wrapper .dataTables_paginate .paginate_button.btn:hover { background: var(--dm-bg-hover) !important; box-shadow: var(--dm-shadow-sm) !important; } /* ============================================================ Admin Layout - Forms (pri-form / fieldset / legend) ============================================================ */ .dark-theme .pri-form { border-color: var(--dm-border-input) !important; background: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } .dark-theme .pri-form::placeholder { color: var(--dm-text-muted) !important; } .dark-theme .pri-form:focus, .dark-theme .pri-form:hover { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-accent) !important; } .dark-theme .pri-form:focus { background-color: var(--dm-accent-muted) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; } .dark-theme .input-group { background: var(--dm-bg-input) !important; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) inset !important; } .dark-theme .input-group .form-control { color: var(--dm-text-primary) !important; } .dark-theme fieldset { border-color: var(--dm-border) !important; } .dark-theme legend { background-color: var(--dm-accent) !important; color: #fff !important; text-shadow: none !important; box-shadow: var(--dm-shadow-sm) !important; } .dark-theme .user-detail fieldset { border-color: var(--dm-border) !important; } .dark-theme .user-detail legend { background-color: var(--dm-accent) !important; color: #fff !important; border-color: var(--dm-border) !important; text-shadow: none !important; } .dark-theme .dl { border-bottom-color: var(--dm-border) !important; } .dark-theme .dt { color: var(--dm-text-muted) !important; } .dark-theme .dd, .dark-theme .dd-copy { color: var(--dm-text-primary) !important; } .dark-theme .pri-form.err { outline-color: var(--dm-danger) !important; background: var(--dm-danger-bg) !important; } .dark-theme .form_validate_error { outline-color: var(--dm-danger) !important; background-color: var(--dm-danger-bg) !important; } /* ============================================================ Admin Layout - Buttons ============================================================ */ .dark-theme .btn, .dark-theme .btn:focus { box-shadow: var(--dm-shadow-sm) !important; background-color: var(--dm-accent) !important; color: #fff !important; border: none !important; } .dark-theme .btn:hover { outline: 2px solid var(--dm-accent) !important; background-color: var(--dm-bg-card) !important; color: var(--dm-accent-hover) !important; } .dark-theme .btn:after { background-color: var(--dm-accent) !important; } .dark-theme .btn.btn-primary { background-color: rgba(99, 102, 241, 0.2) !important; color: var(--dm-accent-hover) !important; } .dark-theme .btn.btn-primary:hover { background-color: var(--dm-accent) !important; color: #fff !important; } .dark-theme .btn.btn-success { background-color: rgba(34, 197, 94, 0.2) !important; color: var(--dm-success) !important; } .dark-theme .btn.btn-success:hover { background-color: var(--dm-success) !important; color: #fff !important; } .dark-theme .btn.btn-danger { background-color: rgba(239, 68, 68, 0.2) !important; color: var(--dm-danger) !important; } .dark-theme .btn.btn-danger:hover { background-color: var(--dm-danger) !important; color: #fff !important; } .dark-theme .btn.btn-warning { background-color: rgba(245, 158, 11, 0.2) !important; color: var(--dm-warning) !important; } .dark-theme .btn.btn-warning:hover { background-color: var(--dm-warning) !important; color: #fff !important; } .dark-theme .btn.btn-info { background-color: rgba(59, 130, 246, 0.2) !important; color: var(--dm-info) !important; } .dark-theme .btn.btn-info:hover { background-color: var(--dm-info) !important; color: #fff !important; } .dark-theme .btn.btn-cancel { background-color: var(--dm-bg-hover) !important; color: var(--dm-text-muted) !important; } .dark-theme .btn.btn-cancel:hover { background-color: var(--dm-text-muted) !important; color: #fff !important; } .dark-theme .btn.btn-icon { background: none !important; box-shadow: none !important; color: var(--dm-text-secondary) !important; } .dark-theme .btn.btn-icon:hover { color: var(--dm-accent-hover) !important; outline: none !important; background: none !important; } .dark-theme .btn-login, .dark-theme .btn-login:focus { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .btn-login:hover { background-color: var(--dm-bg-card) !important; color: var(--dm-accent-hover) !important; outline: 2px solid var(--dm-accent) !important; } .dark-theme .add-new { background: var(--dm-accent) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--dm-bg-primary) !important; } .dark-theme .repeat-div { border-color: var(--dm-border) !important; } .dark-theme .repeat-div .ttl { background-color: var(--dm-bg-card) !important; color: var(--dm-accent-hover) !important; } /* ============================================================ Admin Layout - Login Box ============================================================ */ .dark-theme .login-container { background-color: var(--dm-bg-primary) !important; } .dark-theme .login-container .login-box { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .login-box .header { color: var(--dm-text-heading) !important; } .dark-theme .login-box .header .title { color: var(--dm-text-secondary) !important; } .dark-theme .login-box input:-webkit-autofill, .dark-theme .login-box input:-webkit-autofill:hover, .dark-theme .login-box input:-webkit-autofill:focus, .dark-theme .login-box input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--dm-bg-input) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; } /* ============================================================ Admin Layout - prAlert & Help Modal ============================================================ */ .dark-theme .prAlert-wrapper .prAlert-bg { background-color: rgba(0, 0, 0, 0.5) !important; } .dark-theme .prAlert-wrapper .prAlert-box { background-color: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow-lg) !important; color: var(--dm-text-primary) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .prAlert-wrapper .prAlert-box > i { color: var(--dm-text-muted) !important; } .dark-theme .prAlert-wrapper .prAlert-box > i:hover { color: var(--dm-danger) !important; } .dark-theme .prAlert-wrapper .prAlert-box header { background: var(--dm-bg-tertiary) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text-heading) !important; } .dark-theme .prAlert-wrapper .prAlert-box .body { color: var(--dm-text-primary) !important; } .dark-theme .prAlert-wrapper .prAlert-box footer { color: var(--dm-text-secondary) !important; } .dark-theme .help-modal .help-modal-content { background: var(--dm-bg-card) !important; box-shadow: var(--dm-shadow-lg) !important; color: var(--dm-text-primary) !important; } .dark-theme .help-modal-content header { background-color: var(--dm-bg-tertiary) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-accent-hover) !important; } /* ============================================================ Admin Layout - Misc elements ============================================================ */ .dark-theme .link { color: var(--dm-accent-hover) !important; text-shadow: none !important; } .dark-theme a.float-btn { background: var(--dm-accent) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important; } .dark-theme a.float-btn:hover { background: var(--dm-bg-card) !important; color: var(--dm-accent) !important; outline: 2px solid var(--dm-accent) !important; } .dark-theme i.help { color: var(--dm-text-muted) !important; } .dark-theme i.help:hover { color: var(--dm-accent-hover) !important; } /* Color palate widget */ .dark-theme color-palate { border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } .dark-theme color-palate text { fill: var(--dm-text-secondary) !important; } .dark-theme .instructionmsg { color: var(--dm-text-muted) !important; } /* Success / Failed msg */ .dark-theme .success-msg h2, .dark-theme .failed-msg h2 { color: var(--dm-accent-hover) !important; } .dark-theme .success-check { color: var(--dm-success) !important; } .dark-theme .failed-check { color: var(--dm-danger) !important; } /* mSelect (multi-select) */ .dark-theme .mSelect { background-color: var(--dm-bg-input) !important; } .dark-theme .mSelect .multiselect-dropdown { background-color: transparent !important; } .dark-theme .mSelect .multiselect-dropdown span.placeholder { color: var(--dm-text-muted) !important; } .dark-theme .mSelect .multiselect-dropdown span.optext { background-color: var(--dm-accent) !important; color: #fff !important; } /* Admin Scrollbar */ .dark-theme ::-webkit-scrollbar-track { background-color: var(--dm-bg-primary) !important; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4) !important; } .dark-theme ::-webkit-scrollbar-thumb { background-color: var(--dm-bg-hover) !important; outline: 1px solid var(--dm-border) !important; } .dark-theme ::-webkit-scrollbar-thumb:hover { background-color: var(--dm-accent) !important; } /* Notification panel */ .dark-theme .main-header .notification-details { background: var(--dm-bg-card) !important; box-shadow: -1px 2px 10px rgba(0, 0, 0, 0.5) !important; } .dark-theme .main-header .notification-details .header { border-bottom-color: var(--dm-border) !important; color: var(--dm-accent-hover) !important; background: var(--dm-bg-tertiary) !important; } .dark-theme .main-header .notification-details .noti-single { background: var(--dm-bg-secondary) !important; box-shadow: var(--dm-shadow-sm) !important; } .dark-theme .main-header .notification-details .noti-single:hover { background-color: var(--dm-bg-hover) !important; } .dark-theme .main-header .notification-details .noti-single strong { color: var(--dm-accent-hover) !important; } .dark-theme .main-header .notification-details .noti-single .noti-time { color: var(--dm-text-muted) !important; } .dark-theme .notification-details pagenum:after { border-top-color: var(--dm-border) !important; } .dark-theme .notification-details pagenum:before { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } /* Loader */ .dark-theme .loader-container { background: rgba(15, 17, 23, 0.7) !important; } .dark-theme .notification-details .noti-single:hover { background: var(--dm-bg-hover) !important; } /* ---- Mobile Menu ---- */ .dark-theme .mobile-menu .menu-box { background: var(--dm-bg-card) !important; } .dark-theme .mobile-menu .navigation li { border-bottom-color: var(--dm-border) !important; } .dark-theme .mobile-menu .navigation li > a { color: var(--dm-text-secondary) !important; } .dark-theme .mobile-menu .navigation li:hover > a { color: var(--dm-accent-hover) !important; } /* ---- Defect Highlight ---- */ .dark-theme .defect-highlight { border-color: var(--dm-danger) !important; background: var(--dm-danger-bg) !important; } /* ---- Form Static Control ---- */ .dark-theme .form-control-static { border-bottom-color: var(--dm-text-muted) !important; color: var(--dm-text-secondary) !important; } /* ---- View Data ---- */ .dark-theme .view-data { background: var(--dm-bg-secondary) !important; } /* ---- Slick Slider ---- */ .dark-theme .slick-arrow { background: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; } .dark-theme .slick-dots li button:before { color: var(--dm-text-muted) !important; } .dark-theme .slick-dots li.slick-active button:before { color: var(--dm-accent) !important; } /* ============================================================ Dark Mode Toggle Button Styles ============================================================ */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 5px 12px; border-radius: 20px; border: 1.5px solid #ddd; background: linear-gradient(135deg, #f8f9fa, #e9ecef); color: #333; font-size: 13px; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; line-height: 22px; white-space: nowrap; position: relative; overflow: hidden; } .dark-mode-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .dark-mode-toggle .toggle-icon { font-size: 16px; transition: transform 0.4s ease; display: inline-block; } .dark-mode-toggle:hover .toggle-icon { transform: rotate(30deg); } .dark-mode-toggle .toggle-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } /* Dark theme variant of the toggle */ .dark-theme .dark-mode-toggle { background: linear-gradient(135deg, #2a2f40, #1e2230) !important; border-color: #353a4f !important; color: #e4e6ef !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } .dark-theme .dark-mode-toggle:hover { background: linear-gradient(135deg, #353a4f, #2a2f40) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important; border-color: #6366f1 !important; } /* Smooth transition for theme switching */ body { transition: background-color 0.3s ease, color 0.3s ease; } body * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Disable transitions on first load to prevent flash */ body.no-transitions, body.no-transitions * { transition: none !important; } /* ============================================================ Icons & Icon Blocks ============================================================ */ .dark-theme .ico-box { border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; background: var(--dm-bg-tertiary) !important; } .dark-theme .ico-box:hover { border-color: var(--dm-accent) !important; color: var(--dm-accent-hover) !important; background: var(--dm-accent-muted) !important; } .dark-theme .ico-box.font { color: var(--dm-text-secondary) !important; } .dark-theme .ico-box.bg-dark { background-color: #e4e6ef !important; border-color: var(--dm-border) !important; } .dark-theme .ico-box.bg-white { background-color: var(--dm-bg-tertiary) !important; border-color: var(--dm-border) !important; } .dark-theme .icon-block { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .icon-block:hover { background-color: var(--dm-accent) !important; color: #fff !important; } .dark-theme .icon-block i { color: var(--dm-accent-hover) !important; } .dark-theme .icon-block:hover i { color: #fff !important; } .dark-theme .header-icons { filter: brightness(0) invert(0.85) !important; } .dark-theme .social-logo { filter: brightness(0) invert(0.75) !important; transition: filter 0.3s ease, transform 1s ease; } .dark-theme .social-logo:hover { filter: brightness(0) invert(1) !important; } /* Invert icomoon/priya icons in dark contexts */ .dark-theme .priya-phone, .dark-theme .priya-home, .dark-theme .priya-search, .dark-theme .priya-chevron-right, .dark-theme .priya-dashboard, .dark-theme .priya-gears, .dark-theme .priya-th, .dark-theme .priya-rotate-left, .dark-theme .priya-font-plus, .dark-theme .priya-font-normal, .dark-theme .priya-font-minus, .dark-theme .priya-spinner { color: var(--dm-text-secondary) !important; } .dark-theme .header-top .priya-search { color: var(--dm-text-muted) !important; } .dark-theme .main-menu .navigation > li > a i { color: var(--dm-text-primary) !important; } .dark-theme .main-menu .navigation > li:hover > a i { color: var(--dm-accent-hover) !important; } /* ============================================================ Upward Marquee Container (What's New / Feedback sections) ============================================================ */ .dark-theme .upward-marquee-container { background: transparent !important; } .dark-theme .upward-marquee-headings { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; border-color: var(--dm-border) !important; } .dark-theme .upward-marquee-headings h4 { color: var(--dm-accent-hover) !important; } .dark-theme .upward-marquee-outer-wrapper { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-theme .upward-marquee-wrapper { background: var(--dm-bg-card) !important; } .dark-theme .upward-marquee-list li { background-color: var(--dm-bg-card) !important; border-bottom: 1px solid var(--dm-border-light) !important; } .dark-theme .upward-marquee-list li:hover { background-color: var(--dm-bg-hover) !important; } .dark-theme .upward-marquee-list li a { color: var(--dm-text-secondary) !important; } .dark-theme .upward-marquee-list li a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .upward-marquee-list li i { color: var(--dm-accent) !important; } /* ============================================================ Chart Style ============================================================ */ .dark-theme .chart-style { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-sm) !important; } /* ============================================================ Left Menu Box (Sidebar menu cards) ============================================================ */ .dark-theme .leftmenu-box { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-sm) !important; } .dark-theme .leftmenu-box:hover { box-shadow: var(--dm-shadow) !important; border-color: var(--dm-accent-muted) !important; } .dark-theme .leftmenu-box .card-links a, .dark-theme .leftmenu-box .card-links span { color: var(--dm-accent-hover) !important; } .dark-theme .leftmenu-box .card-links a::after { background: var(--dm-accent) !important; } .dark-theme .leftmenu-box .card-links a:hover { color: var(--dm-accent) !important; } .dark-theme .leftmenu-box .card-links h6 { color: var(--dm-text-heading) !important; border-left-color: var(--dm-accent) !important; } /* ============================================================ Box / Alerts Block / Related Components ============================================================ */ .dark-theme .box { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-theme .box button { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } .dark-theme .box button:hover { background-color: var(--dm-accent) !important; color: #fff !important; } .dark-theme .alerts-block { background: linear-gradient(var(--dm-bg-card), var(--dm-bg-card)) padding-box, linear-gradient(to right, #a78bfa, var(--dm-accent)) border-box !important; color: var(--dm-text-primary) !important; } .dark-theme .alerts-block:hover { box-shadow: var(--dm-shadow) !important; } /* ============================================================ Custom Buttons (custom-btn, custom-btn2, custom-btn3, purple-btn) ============================================================ */ .dark-theme .custom-btn, .dark-theme .custom-btn2, .dark-theme .custom-btn3 { background: var(--dm-accent) !important; color: #fff !important; border-color: var(--dm-accent) !important; } .dark-theme .custom-btn:hover, .dark-theme .custom-btn2:hover, .dark-theme .custom-btn3:hover { background: var(--dm-accent-hover) !important; } .dark-theme .purple-btn { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .purple-btn:hover { background: var(--dm-accent-hover) !important; } /* ============================================================ Services & Help line ============================================================ */ .dark-theme .services-header-2 { background: var(--dm-bg-secondary) !important; } .dark-theme .services-header-2 h6 { color: var(--dm-text-heading) !important; } .dark-theme .help-line-no { color: var(--dm-accent-hover) !important; } .dark-theme .help-line-no span { color: var(--dm-text-secondary) !important; } /* ============================================================ Pay Your Taxes / Request List ============================================================ */ .dark-theme .pay-your-taxes { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; border-color: var(--dm-border) !important; } .dark-theme .request-list li { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } /* ============================================================ Calendar ============================================================ */ .dark-theme .mycalendar-container { background: var(--dm-bg-card) !important; } .dark-theme .mycalendar-header { color: var(--dm-accent-hover) !important; } .dark-theme .mycalendar-day { background: var(--dm-bg-secondary) !important; color: var(--dm-text-primary) !important; } .dark-theme .mycalendar-day:hover { background: var(--dm-accent-muted) !important; } .dark-theme .mycalendar-day.today { background: var(--dm-accent) !important; color: #fff !important; } /* ============================================================ Mid Section Images ============================================================ */ .dark-theme .mid-section-img { border: 1px solid var(--dm-border) !important; border-radius: 8px; } /* ============================================================ Header 2 (marquee bar) ============================================================ */ .dark-theme .header2 { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-secondary) !important; } .dark-theme .header2 h6 { color: var(--dm-warning) !important; } .dark-theme .header2 .marquee a.text-white { color: var(--dm-text-secondary) !important; } /* ============================================================ Block 2 purple btn heading fix ============================================================ */ .dark-theme .block-2 .purple-btn h4 { color: #fff !important; } /* ============================================================ Info For Dealer (sidebar panel) ============================================================ */ .dark-theme .info-for-dealer { border-color: var(--dm-accent) !important; background: var(--dm-accent-muted) !important; } .dark-theme .info-for-dealer .heading { background: var(--dm-accent) !important; color: #fff !important; } .dark-theme .info-for-dealer .body { color: var(--dm-text-primary) !important; } .dark-theme .info-for-dealer .body ul li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-theme .info-for-dealer .body ul li:before { color: var(--dm-accent-hover) !important; } .dark-theme .info-for-dealer .body ul li a { color: var(--dm-text-secondary) !important; } .dark-theme .info-for-dealer .body ul li a:hover { color: var(--dm-accent-hover) !important; } /* ============================================================ Custom Sidebar (Right sidebar on inner pages) ============================================================ */ .dark-theme .custom-sidebar { background: var(--dm-bg-secondary) !important; border-left: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-theme .custom-sidebar h5, .dark-theme .custom-sidebar h6 { color: var(--dm-text-heading) !important; } .dark-theme .custom-sidebar .designation a { color: var(--dm-danger) !important; border-color: var(--dm-danger) !important; } .dark-theme .custom-sidebar .request-list, .dark-theme .custom-sidebar .request-list ul { color: var(--dm-text-secondary) !important; } .dark-theme .custom-sidebar .request-list li a { color: var(--dm-text-secondary) !important; } .dark-theme .custom-sidebar .request-list li a:hover { color: var(--dm-accent-hover) !important; } /* ============================================================ Custom Side Menu (Left collapsible slide-in menu) ============================================================ */ .dark-theme .custom-side-menu { background-color: var(--dm-bg-card) !important; border-right: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } .dark-theme .custom-menu-handle { background-color: var(--dm-accent) !important; border-color: var(--dm-border) !important; color: #fff !important; } .dark-theme .custom-side-menu .nav-link { color: var(--dm-text-secondary) !important; } .dark-theme .custom-side-menu .nav-link:hover { color: var(--dm-accent-hover) !important; background: var(--dm-accent-muted) !important; } .dark-theme .custom-side-menu .card-links li a { color: var(--dm-text-secondary) !important; } .dark-theme .custom-side-menu .card-links li a:hover { color: var(--dm-accent-hover) !important; } /* ============================================================ Sidebar has-submenu & popup-submenu (Inner layout) ============================================================ */ .dark-theme .sidebar .has-submenu > span { color: var(--dm-text-primary) !important; } .dark-theme .sidebar .has-submenu::before { color: var(--dm-text-muted) !important; } .dark-theme .sidebar .has-submenu ul { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .sidebar .has-submenu ul li { color: var(--dm-text-secondary) !important; } .dark-theme .sidebar .has-submenu ul li:before { color: var(--dm-accent-hover) !important; } .dark-theme .sidebar .has-submenu ul li a { color: var(--dm-text-secondary) !important; } .dark-theme .sidebar .has-submenu ul li a:hover { color: var(--dm-accent-hover) !important; } .dark-theme .popup-submenu { background: rgba(30, 34, 48, 0.92) !important; box-shadow: 0 0 15px rgba(99, 102, 241, 0.3) !important; border: 1px solid var(--dm-border) !important; } .dark-theme .popup-submenu a { color: var(--dm-accent-hover) !important; } .dark-theme .popup-submenu a:hover { background: var(--dm-accent-muted) !important; color: #fff !important; } /* ============================================================ Important Update Section (landing page table) ============================================================ */ .dark-theme .important-update-section { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-theme .important-update-section .table { color: var(--dm-text-primary) !important; --bs-table-bg: transparent !important; } .dark-theme .important-update-section .table thead { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-accent-hover) !important; } .dark-theme .important-update-section .table thead th { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-accent-hover) !important; border-color: var(--dm-border) !important; } .dark-theme .important-update-section .table tbody td { border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-theme .important-update-section .table-bordered { border-color: var(--dm-border) !important; } .dark-theme .important-update-section .table-bordered > :not(caption) > * > * { border-color: var(--dm-border) !important; } /* ============================================================ Text Color Inversions (black -> white, white -> dark) ============================================================ */ .dark-theme .text-black { color: var(--dm-text-primary) !important; } .dark-theme .text-dark { color: var(--dm-text-primary) !important; } .dark-theme .text-body { color: var(--dm-text-primary) !important; } .dark-theme .text-secondary { color: var(--dm-text-secondary) !important; } /* White text on colored BGs should stay white in dark mode */ .dark-theme .bg-color-1 .text-white, .dark-theme .bg-primary .text-white, .dark-theme .bg-success .text-white, .dark-theme .bg-danger .text-white, .dark-theme .services-header .text-white, .dark-theme .services-header-2 .text-white { color: #fff !important; } /* White text on dark backgrounds - keep as-is (already light) */ .dark-theme .modal-header.bg-danger .text-white, .dark-theme .modal-header.bg-success .text-white, .dark-theme .modal-header.bg-warning .text-white { color: #fff !important; } /* Generic image overlays: dark text on images → make light */ .dark-theme img + .text-dark, .dark-theme img + .text-black, .dark-theme .img-overlay .text-dark, .dark-theme .img-overlay .text-black { color: var(--dm-text-primary) !important; } /* Fix heading/paragraph colors inside colored sections */ .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 { color: var(--dm-text-heading) !important; } /* Override: keep white headings on colored backgrounds white */ .dark-theme .services-header h4, .dark-theme .services-header-2 h6 { color: #fff !important; } /* Label text that was black */ .dark-theme label { color: var(--dm-text-primary) !important; } /* Paragraph and span text */ .dark-theme p { color: var(--dm-text-primary) !important; } /* Table cells generic text fix */ .dark-theme td, .dark-theme th { color: var(--dm-text-primary) !important; } /* Keep table headers on colored bg white */ .dark-theme .table-dar th, .dark-theme .table-dark th, .dark-theme table.table thead th { color: var(--dm-accent-hover) !important; } /* Badge text-dark override */ .dark-theme .badge.text-dark { color: var(--dm-bg-primary) !important; } /* Help desk section text fix */ .dark-theme .help-line-no { color: var(--dm-text-primary) !important; } .dark-theme .help-line-no span { color: var(--dm-accent-hover) !important; } /* Dates text near images */ .dark-theme .dates-text { color: var(--dm-text-primary) !important; } /* Employee corner and glow fix */ .dark-theme .employee-conner-style a { color: var(--dm-accent-hover) !important; } /* ============================================================ Smooth Transitions ============================================================ */ body { transition: background-color 0.3s ease, color 0.3s ease; } body * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Disable transitions on first load to prevent flash */ body.no-transitions, body.no-transitions * { transition: none !important; }