:root {
  --app-bg: #f8fafc;
  --app-text: #0f172a;
  --app-text-secondary: #334155;
  --app-text-muted: #64748b;
  --app-card-bg: #ffffff;
  --app-header-bg: #ffffff;
  --app-sidebar-bg: #ffffff;
  --app-border: #e2e8f0;
  --app-input-bg: #ffffff;
  --app-hover-bg: #f1f5f9;
}

html.dark {
  --app-bg: #0f172a;
  --app-text: #f1f5f9;
  --app-text-secondary: #cbd5e1;
  --app-text-muted: #94a3b8;
  --app-card-bg: #1e293b;
  --app-header-bg: #1e293b;
  --app-sidebar-bg: #1e293b;
  --app-border: #334155;
  --app-input-bg: #0f172a;
  --app-hover-bg: #334155;
}

body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  background-color: var(--app-bg) !important;
  color: var(--app-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

th, td, span, p, div, input, button, select, textarea {
  font-family: 'Inter', sans-serif !important;
}

td, td * {
  font-family: 'Inter', sans-serif !important;
}

.dark td, .dark td * {
  font-family: 'Inter', sans-serif !important;
}

header {
  background-color: var(--app-header-bg) !important;
  border-color: var(--app-border) !important;
}

aside, nav {
  background-color: var(--app-sidebar-bg) !important;
  border-color: var(--app-border) !important;
}

.bg-white {
  background-color: var(--app-card-bg) !important;
}

.bg-slate-50 {
  background-color: var(--app-bg) !important;
}

.dark [class*="bg-slate-50/"] {
  background-color: #1e293b !important;
}

.dark .bg-slate-100 {
  background-color: #1e293b !important;
}

.dark [class*="bg-blue-50"] {
  background-color: rgba(59, 130, 246, 0.10) !important;
}

.dark span[class*="bg-rose-50"],
.dark span[class*="bg-red-50"],
.dark div[class*="bg-rose-50"]:not([class*="hover:"]),
.dark div[class*="bg-red-50"]:not([class*="hover:"]) {
  background-color: rgba(239, 68, 68, 0.25) !important;
}

.dark [class*="bg-amber-50"],
.dark [class*="bg-yellow-50"],
.dark [class*="bg-orange-50"] {
  background-color: rgba(245, 158, 11, 0.25) !important;
}

.dark [class*="bg-green-50"],
.dark [class*="bg-emerald-50"] {
  background-color: rgba(16, 185, 129, 0.25) !important;
}

.dark [class*="bg-purple-50"],
.dark [class*="bg-violet-50"],
.dark [class*="bg-indigo-50"] {
  background-color: rgba(139, 92, 246, 0.25) !important;
}

.dark [class*="bg-gray-50"],
.dark [class*="bg-slate-100"]:not(header):not(aside):not(nav) {
  background-color: rgba(100, 116, 139, 0.3) !important;
}

.dark span[class*="border-rose"],
.dark span[class*="border-red"],
.dark span[class*="border-amber"],
.dark span[class*="border-yellow"],
.dark span[class*="border-green"],
.dark span[class*="border-emerald"],
.dark span[class*="border-blue"],
.dark span[class*="border-purple"],
.dark span[class*="border-violet"],
.dark span[class*="border-indigo"],
.dark span[class*="border-gray"],
.dark span[class*="border-slate"] {
  border-color: transparent !important;
}

.border-slate-200,
.border-slate-100,
.border-slate-50,
.border-blue-100,
.border-blue-200 {
  border-color: var(--app-border) !important;
}

.dark [class*="hover:border-slate-100"]:hover,
.dark [class*="hover:border-slate-200"]:hover {
  border-color: #475569 !important;
}

.dark [class*="divide-slate-100"] > * + *,
.dark [class*="divide-slate-50"] > * + * {
  border-color: #334155 !important;
}

.text-slate-900 { color: var(--app-text) !important; }
.text-slate-700 { color: var(--app-text-secondary) !important; }
.text-slate-600, .text-slate-500 { color: var(--app-text-muted) !important; }
.text-slate-400 { color: var(--app-text-muted) !important; opacity: 0.8; }

input, select, textarea {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--app-text-muted) !important;
  opacity: 0.6;
}

[class*="modal"], [role="dialog"] {
  background-color: var(--app-card-bg) !important;
  color: var(--app-text) !important;
}

thead { background-color: var(--app-bg) !important; }

th {
  background-color: var(--app-bg) !important;
  color: var(--app-text-muted) !important;
  border-color: var(--app-border) !important;
}

tr { border-color: var(--app-border) !important; }

tbody tr[class*="hover:"]:hover {
  background-color: var(--app-hover-bg) !important;
}

[class*="hover:bg-slate-50"]:hover,
[class*="hover:bg-slate-100"]:hover,
[class*="hover:bg-white"]:hover {
  background-color: var(--app-hover-bg) !important;
}

.dark [class*="shadow-"] {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2) !important;
}
.dark [class*="shadow-sm"] {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3) !important;
}
.dark [class*="shadow-lg"],
.dark [class*="shadow-xl"] {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; }

/* Animations */
@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes shrink-width {
  from { width: 100%; }
  to { width: 0%; }
}

.animate-slide-in-left { animation: slide-in-left 0.3s ease-out forwards; }
.animate-shrink-width { animation: shrink-width linear forwards; }