:root {
/* Color Palette */
--primary: #7c3aed;
--primary-hover: #9333ea;
--primary-light: #c4b5fd;
--primary-subtle: rgba(124, 58, 237, 0.15);
--primary-glow: rgba(124, 58, 237, 0.35);
/* Backgrounds */
--bg: #070614;
--sidebar-bg: #0d0b21;
--card-bg: rgba(19, 17, 45, 0.75);
--card-border: rgba(124, 58, 237, 0.22);
/* Text & Accents */
--text-main: #f3f0ff;
--muted: #948cb8;
--faint: #2d2854;
--divider: rgba(255, 255, 255, 0.06);
/* FX */
--radius-md: 10px;
--radius-sm: 6px;
--transition: all 0.2s ease-in-out;
}
/* Base Setup */
body {
background-color: var(--bg) !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
color: var(--text-main) !important;
-webkit-font-smoothing: antialiased;
}
/* Layout & Containers */
.lg\:bg-gray-800,
nav.bg-gray-800,
.dark\:bg-slate-800,
.bg-white.border-b,
.dark\:bg-slate-900 > .flex.h-16 {
background-color: var(--sidebar-bg) !important;
border-color: var(--divider) !important;
}
.dark\:bg-slate-900,
main.dark\:bg-slate-900 {
background-color: var(--bg) !important;
}
/* Navigation Items */
.text-gray-300 { color: var(--muted) !important; }
.dark\:text-white, .text-gray-700 { color: var(--text-main) !important; }
.text-gray-500 { color: var(--muted) !important; }
/* Active Nav Item */
.bg-purple-500 {
background: var(--primary-subtle) !important;
color: var(--primary-light) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius-sm) !important;
font-weight: 500;
}
/* Hover States */
.hover\:bg-purple-500:hover {
background: rgba(124, 58, 237, 0.1) !important;
color: var(--text-main) !important;
transition: var(--transition);
}
/* Glassmorphism Cards */
.bg-white,
.dark\:bg-slate-800 {
background: var(--card-bg) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--card-border) !important;
border-radius: var(--radius-md) !important;
transition: var(--transition);
}
.bg-white:hover,
.dark\:bg-slate-800:hover {
border-color: rgba(124, 58, 237, 0.4) !important;
box-shadow: 0 4px 20px -2px var(--primary-glow);
}
/* Accent Top Stripe on Stat Cards */
.overflow-hidden.shadow.rounded-lg {
border-radius: var(--radius-md) !important;
position: relative;
overflow: hidden !important;
}
.overflow-hidden.shadow.rounded-lg::before {
content: '';
display: block;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--primary), #a855f7);
}
/* Card Footer */
.bg-gray-50 {
background: rgba(255, 255, 255, 0.02) !important;
border-top: 1px solid var(--divider) !important;
}
/* Links & Text Highlights */
.text-purple-500,
.text-blue-700,
.text-blue-400 {
color: var(--primary-light) !important;
}
.hover\:text-blue-600:hover {
color: #e9d5ff !important;
}
/* Primary Button */
a[href*="orderproduct"],
button.bg-purple-600 {
background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
border-radius: var(--radius-sm) !important;
font-weight: 500;
box-shadow: 0 2px 10px var(--primary-glow);
transition: var(--transition);
}
a[href*="orderproduct"]:hover,
button.bg-purple-600:hover {
filter: brightness(1.15);
box-shadow: 0 4px 15px var(--primary-glow);
}
/* Secondary Button */
a[href="a"] {
border: 1px solid var(--faint) !important;
color: var(--muted) !important;
background: transparent !important;
border-radius: var(--radius-sm) !important;
transition: var(--transition);
}
a[href="a"]:hover {
border-color: var(--muted) !important;
color: var(--text-main) !important;
background: rgba(255, 255, 255, 0.03) !important;
}
/* Form Inputs & Selects */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
background-color: rgba(8, 7, 26, 0.6) !important;
border: 1px solid var(--card-border) !important;
color: var(--text-main) !important;
border-radius: var(--radius-sm) !important;
transition: var(--transition);
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--primary) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--primary-subtle) !important;
}
/* Banners / Alerts */
.bg-blue-50 {
background: var(--primary-subtle) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius-sm);
}
/* Tables & Dividers */
.bg-gray-50.dark\:bg-slate-800 {
background: rgba(255, 255, 255, 0.03) !important;
}
table tbody tr {
border-bottom: 1px solid var(--divider) !important;
}
.divide-y > *,
.border-gray-200 {
border-color: var(--divider) !important;
}
/* Avatar Badge */
.bg-gray-700 {
background: linear-gradient(135deg, #5b21b6, var(--primary)) !important;
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--faint);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
