/**
* OMS light / dark theme — applies when .
*/
[data-theme="dark"] {
color-scheme: dark;
--ink: #e2e8f0;
--muted: #94a3b8;
--bg: #0f172a;
--card-bg: #1e293b;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] html,
[data-theme="dark"] body {
background-color: var(--bg) !important;
color: var(--ink) !important;
}
/* Login */
[data-theme="dark"] .login-wrapper {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(79, 70, 229, 0.15), transparent 60%),
radial-gradient(900px 500px at 110% 10%, rgba(6, 182, 212, 0.12), transparent 60%),
linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
}
[data-theme="dark"] .login-card,
[data-theme="dark"] .page-card,
[data-theme="dark"] .module-card {
background: var(--card-bg) !important;
border-color: #334155 !important;
color: var(--ink) !important;
}
[data-theme="dark"] .form-group label {
color: #cbd5e1 !important;
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
background: #0f172a !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
background: #1e293b !important;
border-color: #818cf8 !important;
}
/* Top bar */
[data-theme="dark"] .topbar {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
[data-theme="dark"] .topbar-titles h1 {
color: #f1f5f9 !important;
}
[data-theme="dark"] .user-chip {
background: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .icon-btn {
background: #334155 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .icon-btn:hover {
background: #475569 !important;
color: #a5b4fc !important;
}
/* Dashboard */
[data-theme="dark"] .welcome {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(6, 182, 212, 0.15)) !important;
border-color: #475569 !important;
}
[data-theme="dark"] .welcome h2 {
color: #f1f5f9 !important;
}
[data-theme="dark"] .section-title {
color: #94a3b8 !important;
}
/* Admin shell */
[data-theme="dark"] .admin-side {
background: #0f172a !important;
border-right-color: #334155 !important;
}
[data-theme="dark"] .admin-side h4,
[data-theme="dark"] .admin-side a {
color: #cbd5e1 !important;
}
[data-theme="dark"] .admin-side a.active,
[data-theme="dark"] .admin-side a:hover {
background: #334155 !important;
color: #fff !important;
}
[data-theme="dark"] .tbl th {
background: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .tbl td {
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .tbl tr:hover td {
background: #1e293b !important;
}
[data-theme="dark"] .tbl tbody tr.tbl-group-row td {
background: #312e81 !important;
color: #c7d2fe !important;
}
[data-theme="dark"] .tbl tbody tr.tbl-group-row:hover td {
background: #312e81 !important;
}
[data-theme="dark"] .flash-success {
background: #064e3b !important;
color: #a7f3d0 !important;
border-color: #047857 !important;
}
[data-theme="dark"] .flash-error {
background: #7f1d1d !important;
color: #fecaca !important;
border-color: #991b1b !important;
}
[data-theme="dark"] .flash-info {
background: #1e3a8a !important;
color: #bfdbfe !important;
border-color: #1d4ed8 !important;
}
[data-theme="dark"] .alert-error {
background: #7f1d1d !important;
color: #fecaca !important;
border-color: #991b1b !important;
}
[data-theme="dark"] .alert-success {
background: #064e3b !important;
color: #a7f3d0 !important;
}
[data-theme="dark"] .btn-ghost {
background: #334155 !important;
color: #e2e8f0 !important;
}
/* Tailwind-heavy module pages (Mail, Leave, Stores, …) */
[data-theme="dark"] .mail-main,
[data-theme="dark"] .leave-main,
[data-theme="dark"] .stores-main,
[data-theme="dark"] .vehicle-main,
[data-theme="dark"] .archive-main {
background: #0f172a !important;
}
[data-theme="dark"] .bg-white {
background-color: #1e293b !important;
}
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-50\/80,
[data-theme="dark"] .bg-slate-50\/90 {
background-color: #0f172a !important;
}
[data-theme="dark"] .bg-slate-100 {
background-color: #334155 !important;
}
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-50\/90 {
background-color: rgba(6, 78, 59, 0.35) !important;
}
[data-theme="dark"] .bg-amber-50 {
background-color: rgba(120, 53, 15, 0.35) !important;
}
[data-theme="dark"] .bg-red-50 {
background-color: rgba(127, 29, 29, 0.35) !important;
}
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600 {
color: #cbd5e1 !important;
}
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400 {
color: #94a3b8 !important;
}
[data-theme="dark"] .text-green-900,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-700 {
color: #86efac !important;
}
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #475569 !important;
}
[data-theme="dark"] .border-green-300,
[data-theme="dark"] .border-green-400 {
border-color: #16a34a !important;
}
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="file"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background-color: #0f172a !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] thead.bg-slate-100 {
background-color: #334155 !important;
}
[data-theme="dark"] .hover\:bg-slate-50:hover {
background-color: #334155 !important;
}
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .fixed.inset-0.bg-black\/50 {
background-color: rgba(0, 0, 0, 0.7) !important;
}
[data-theme="dark"] .theme-toggle-btn.is-active {
outline: 2px solid #818cf8;
outline-offset: 2px;
}