/* public/css/admin/dark-mode.css * Dark mode overrides via [data-theme="dark"] on * All colors reference CSS custom properties from layout.css :root */ [data-theme="dark"] { /* Sidebar */ --sb-bg: #1e293b; --sb-border: rgba(255,255,255,0.06); --sb-text: #94a3b8; --sb-text-hover: #e2e8f0; --sb-active-bg: #2E75B6; --sb-active-text: #ffffff; --sb-label-text: rgba(255,255,255,0.25); --sb-logo-text: #f1f5f9; --sb-hover-bg: rgba(255,255,255,0.05); --sb-footer-bg: rgba(255,255,255,0.03); --sb-icon-color: #64748b; --sb-section-color: rgba(255,255,255,0.25); /* Topbar */ --topbar-bg: #1e293b; --topbar-border: rgba(255,255,255,0.06); --topbar-text: #f1f5f9; --topbar-icon: #64748b; --topbar-shadow: 0 1px 0 0 rgba(255,255,255,0.06); /* Page */ --page-bg: #0f172a; /* Card */ --card-bg: #1e293b; --card-border: rgba(255,255,255,0.07); --card-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Typography */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; /* Accent */ --accent-light: rgba(46, 117, 182, 0.15); --accent-medium: rgba(46, 117, 182, 0.25); /* Status */ --status-active-bg: rgba(34, 197, 94, 0.15); --status-active-text: #4ade80; --status-inactive-bg: rgba(255,255,255,0.07); --status-inactive-text:#64748b; /* Discount */ --discount-bg: rgba(245, 158, 11, 0.15); --discount-text: #fbbf24; } /* Icon swap: sun shown in dark, moon in light */ [data-theme="dark"] .admin-topbar__icon-moon { display: none; } [data-theme="dark"] .admin-topbar__icon-sun { display: inline; } /* Scrollbars in dark */ [data-theme="dark"] .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); } [data-theme="dark"] .admin-page-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); } /* Dropdown in dark */ [data-theme="dark"] .dropdown-menu { background-color: #263449; border-color: rgba(255,255,255,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .dropdown-item { color: var(--text-secondary); } [data-theme="dark"] .dropdown-item:hover { background-color: var(--accent-light); } [data-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,0.08); } /* Modal in dark */ [data-theme="dark"] .modal-content { background-color: #1e293b; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: rgba(255,255,255,0.07); background-color: #1e293b; } [data-theme="dark"] .btn-close { filter: invert(1) brightness(0.7); } /* Flash alerts in dark */ [data-theme="dark"] .alert-flash--success { background-color: rgba(34,197,94,0.12); color: #86efac; } [data-theme="dark"] .alert-flash--error { background-color: rgba(239,68,68,0.12); color: #fca5a5; } [data-theme="dark"] .alert-flash--warning { background-color: rgba(245,158,11,0.12); color: #fcd34d; } [data-theme="dark"] .alert-flash--info { background-color: rgba(46,117,182,0.15); color: #93c5fd; } /* Table hover in dark */ [data-theme="dark"] .data-table__row:hover { background-color: rgba(255,255,255,0.025); } /* Table head in dark */ [data-theme="dark"] .data-table__head { background-color: rgba(255,255,255,0.04); } /* Pagination in dark */ [data-theme="dark"] .table-pagination .page-item .page-link { background-color: var(--card-bg); border-color: var(--card-border); color: var(--text-secondary); } [data-theme="dark"] .table-pagination .page-item .page-link:hover { background-color: var(--accent-light); color: var(--accent); } /* Form inputs in dark */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background-color: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--text-primary); } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-textarea::placeholder { color: var(--text-muted); } /* Form toggles row in dark */ [data-theme="dark"] .form-toggles-row { background-color: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); } /* Filter select in dark */ [data-theme="dark"] .table-toolbar__search-input, [data-theme="dark"] .table-toolbar__filter-select { background-color: var(--card-bg); border-color: var(--card-border); color: var(--text-primary); } /* Select background arrow in dark */ [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(148,163,184,0.8)' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } /* Stat card sections in dark */ [data-theme="dark"] .dashboard-section__header { background-color: rgba(255,255,255,0.03); } /* Image upload preview in dark */ [data-theme="dark"] .image-upload__preview-wrap { background-color: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); } /* Confirm modal in dark */ [data-theme="dark"] .confirm-modal .modal-content { background-color: #1e293b; } /* Login page in dark */ [data-theme="dark"] .login-page { background-color: var(--page-bg); } [data-theme="dark"] .login-card { background-color: var(--card-bg); border-color: var(--card-border); } /* Mobile overlay dark mode */ [data-theme="dark"] .admin-sidebar-overlay { background: rgba(0, 0, 0, 0.65); } /* Mobile menu toggle visible in dark mode */ [data-theme="dark"] .admin-topbar__menu-toggle { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--topbar-icon); } [data-theme="dark"] .admin-topbar__menu-toggle:hover { background-color: var(--accent-light); border-color: var(--accent); color: var(--accent); } /* Topbar redesign dark mode */ [data-theme="dark"] .admin-topbar { box-shadow: 0 2px 12px rgba(0,0,0,0.3); border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .admin-topbar__divider { background-color: rgba(255,255,255,0.1); } [data-theme="dark"] .admin-topbar__avatar { border-color: rgba(255,255,255,0.15); outline-color: rgba(46,117,182,0.7); } [data-theme="dark"] .admin-topbar__dropdown { background-color: #263449; border-color: rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } [data-theme="dark"] .admin-topbar__dropdown-name { color: var(--text-primary); } [data-theme="dark"] .admin-topbar__dropdown-email { color: var(--text-muted); } [data-theme="dark"] .admin-topbar__dropdown-avatar { background: linear-gradient(135deg, var(--accent), #1a5a96); }