/* Global dark theme — activated via */
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="dark"] body {
color: #f5f3ef;
}
/* Admin layout variables (when not redefined inline) */
[data-theme="dark"] {
--bg-color: radial-gradient(circle at 10% 20%, #1c1917 0%, #141210 45%, #0f0e0c 100%);
--panel-bg: rgba(38, 35, 30, 0.96);
--panel-border: rgba(197, 168, 92, 0.22);
--text-main: #f5f3ef;
--text-muted: #a8a29e;
}
[data-theme="dark"] .sidebar {
background: linear-gradient(180deg, #1a1814 0%, #12100e 100%);
border-right-color: rgba(197, 168, 92, 0.15);
}
[data-theme="dark"] .sidebar-title,
[data-theme="dark"] .topbar-title {
color: #f5f3ef;
}
[data-theme="dark"] .sidebar-sub {
color: #a8a29e;
}
[data-theme="dark"] .nav-item {
color: #d6d3d1;
}
[data-theme="dark"] .nav-item:hover {
background: rgba(197, 168, 92, 0.1);
color: #fafaf9;
}
[data-theme="dark"] .nav-item.active {
background: rgba(197, 168, 92, 0.16);
color: #dfc176;
}
[data-theme="dark"] .mobile-topbar {
background: rgba(26, 24, 20, 0.95);
border-bottom-color: rgba(197, 168, 92, 0.2);
}
[data-theme="dark"] .card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .highlight-card {
background: var(--panel-bg, rgba(38, 35, 30, 0.96));
border-color: var(--panel-border, rgba(197, 168, 92, 0.22));
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .card > h2,
[data-theme="dark"] .header-row h1,
[data-theme="dark"] .order-title,
[data-theme="dark"] .page-intro h1 {
color: #f5f3ef;
}
[data-theme="dark"] .header-row p,
[data-theme="dark"] .muted,
[data-theme="dark"] .meta-label,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .highlight-meta {
color: #a8a29e;
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .select-input,
[data-theme="dark"] .copy-input,
[data-theme="dark"] .filter-bar select {
background: rgba(28, 25, 22, 0.9);
border-color: rgba(197, 168, 92, 0.25);
color: #f5f3ef;
}
[data-theme="dark"] .form-input:focus {
background: #1c1917;
border-color: #c5a85c;
}
[data-theme="dark"] thead th {
background: #1f1c18;
color: #d6d3d1;
border-bottom-color: rgba(197, 168, 92, 0.2);
}
[data-theme="dark"] tbody td {
color: #f5f3ef;
border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] tbody tr:hover td {
background: rgba(197, 168, 92, 0.06);
}
[data-theme="dark"] .table-wrap {
border-color: rgba(197, 168, 92, 0.2);
}
[data-theme="dark"] .btn-ghost {
background: rgba(38, 35, 30, 0.9);
color: #dfc176;
border-color: rgba(197, 168, 92, 0.35);
}
[data-theme="dark"] .btn-ghost:hover {
background: rgba(197, 168, 92, 0.12);
color: #f5e6b8;
}
[data-theme="dark"] .pagination a {
background: #262320;
color: #dfc176;
border-color: rgba(197, 168, 92, 0.3);
}
[data-theme="dark"] .alert-info {
background: rgba(30, 58, 138, 0.35);
color: #bfdbfe;
border-color: rgba(59, 130, 246, 0.4);
}
[data-theme="dark"] .alert-success {
background: rgba(6, 78, 59, 0.4);
color: #a7f3d0;
border-color: rgba(16, 185, 129, 0.4);
}
[data-theme="dark"] .alert-error {
background: rgba(127, 29, 29, 0.4);
color: #fecaca;
border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .activity-item {
background: rgba(28, 25, 22, 0.85);
border-color: rgba(197, 168, 92, 0.2);
}
[data-theme="dark"] .log-detail {
color: #a8a29e;
}
/* Staff redemption */
[data-theme="dark"] body.redeem-page {
background: radial-gradient(circle at 10% 20%, #1c1917 0%, #141210 45%, #0f0e0c 100%);
color: #f5f3ef;
}
[data-theme="dark"] .redeem-topbar {
background: linear-gradient(180deg, rgba(20, 18, 16, 0.98) 70%, transparent);
}
[data-theme="dark"] .staff-session,
[data-theme="dark"] .topbar-brand img {
background: rgba(38, 35, 30, 0.95);
border-color: rgba(197, 168, 92, 0.25);
}
[data-theme="dark"] .staff-readonly {
background: rgba(197, 168, 92, 0.12);
border-color: rgba(197, 168, 92, 0.3);
color: #e7e5e4;
}
[data-theme="dark"] .customer-box {
background: rgba(28, 25, 22, 0.9);
border-color: rgba(197, 168, 92, 0.2);
}
[data-theme="dark"] .customer-box .name {
color: #f5f3ef;
}
[data-theme="dark"] .scanner-viewport-wrapper {
border-color: rgba(197, 168, 92, 0.3);
}
[data-theme="dark"] .scanner-placeholder p {
color: #a8a29e;
}
[data-theme="dark"] .modal-card {
background: #262320;
border-color: rgba(197, 168, 92, 0.35);
color: #f5f3ef;
}
[data-theme="dark"] .scanned-code-box {
background: #1c1917;
border-color: rgba(197, 168, 92, 0.25);
}
/* Login & change password */
[data-theme="dark"] body.auth-page {
background: linear-gradient(-45deg, #1c1917, #141210, #1a1814, #12100e) !important;
background-size: 400% 400% !important;
color: #f5f3ef;
}
[data-theme="dark"] .login-card,
[data-theme="dark"] .panel {
background: rgba(38, 35, 30, 0.96) !important;
border-color: rgba(197, 168, 92, 0.25) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .login-card label,
[data-theme="dark"] .panel label {
color: #a8a29e;
}
[data-theme="dark"] .login-card input,
[data-theme="dark"] .panel input,
[data-theme="dark"] .panel .input {
background: rgba(28, 25, 22, 0.95);
border-color: rgba(197, 168, 92, 0.25);
color: #f5f3ef;
}
[data-theme="dark"] .panel .input::placeholder {
color: #78716c;
}
/* Public rep / claim / subrep */
[data-theme="dark"] body.public-page {
background: radial-gradient(circle at 15% 10%, #1c1917 0%, #141210 45%, #0f0e0c 100%) !important;
color: #f5f3ef;
}
[data-theme="dark"] .header h1,
[data-theme="dark"] .order-title,
[data-theme="dark"] .carousel-header h2 {
background: none;
-webkit-text-fill-color: #f5f3ef;
color: #f5f3ef;
}
[data-theme="dark"] .meta-val,
[data-theme="dark"] .coupon-token {
color: #f5f3ef;
}
[data-theme="dark"] .claim-url-text {
background: rgba(37, 99, 235, 0.15);
border-color: rgba(59, 130, 246, 0.35);
color: #93c5fd;
}
[data-theme="dark"] .share-btn {
background: rgba(38, 35, 30, 0.95);
border-color: rgba(197, 168, 92, 0.25);
color: #e7e5e4;
}
[data-theme="dark"] .filter-tab {
background: rgba(38, 35, 30, 0.85);
color: #a8a29e;
border-color: rgba(197, 168, 92, 0.25);
}
[data-theme="dark"] .filter-tab.active {
color: #fff;
}
[data-theme="dark"] .coupon-card {
background: rgba(38, 35, 30, 0.95);
border-color: rgba(197, 168, 92, 0.25);
}
[data-theme="dark"] .qr-frame {
background: #fff;
}
[data-theme="dark"] #toast {
background: #292524;
color: #fafaf9;
}
[data-theme="dark"] .pwa-card {
background: #262320;
border-color: rgba(197, 168, 92, 0.35);
}
[data-theme="dark"] .pwa-card h2,
[data-theme="dark"] .pwa-card p {
color: #f5f3ef;
}
[data-theme="dark"] .settings-toggle-card {
background: rgba(38, 35, 30, 0.6);
border-color: rgba(197, 168, 92, 0.25);
}
[data-theme="dark"] .ticket-card,
[data-theme="dark"] .claim-card,
[data-theme="dark"] .form-card {
background: rgba(38, 35, 30, 0.96) !important;
border-color: rgba(197, 168, 92, 0.25) !important;
color: #f5f3ef;
}
[data-theme="dark"] .ticket-card h1,
[data-theme="dark"] .ticket-card h2,
[data-theme="dark"] .claim-card h1 {
color: #f5f3ef;
}
[data-theme="dark"] .mono {
color: #dfc176;
}
[data-theme="dark"] .menu-toggle .bar {
background-color: #f5f3ef;
}