/* 
 * Premium Adaptive Pro System - V3.0 (Dynamic Sync)
 * Full integration with ThemeManager's separate Light/Dark color sets.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* Default Fallbacks (Overridden by ThemeManager generateCSSVariables) */
:root {
    --primary-rgb: 79 70 229;
    --bg-main-rgb: 248 250 252;
    --bg-card-rgb: 255 255 255;
    --border-radius: 0.75rem;
    --font-family: 'Inter', sans-serif;

    --shadow-premium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Global Transition */
html {
    transition: background-color 0.4s ease, color 0.4s ease;
}

body {
    background-color: rgb(var(--bg-main-rgb));
    color: rgb(var(--text-main-rgb, 15 23 42));
    font-family: var(--font-family);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Sidebar Integration - The Core of the Navigation */
#sidebar,
.sidebar-v2 {
    background-color: var(--color-sidebar-bg, #ffffff) !important;
    border-right: 1px solid rgba(var(--primary-rgb), 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark #sidebar,
html.dark .sidebar-v2 {
    background-color: #0c0f17 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar Link Styling */
#sidebar a,
.sidebar-v2 a {
    color: var(--color-sidebar-text, #4b5563) !important;
    transition: all 0.2s ease;
}

html.dark #sidebar a,
html.dark .sidebar-v2 a {
    color: #94a3b8 !important;
}

#sidebar a.active,
.sidebar-v2 a.active,
#sidebar a:hover,
.sidebar-v2 a:hover {
    color: var(--color-sidebar-active, #3b82f6) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}

html.dark #sidebar a.active,
html.dark .sidebar-v2 a.active,
html.dark #sidebar a:hover,
html.dark .sidebar-v2 a:hover {
    color: #f1f5f9 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Top Navbar */
#top-navbar {
    background-color: rgba(var(--bg-card-rgb), 0.8) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.05) !important;
}

/* Premium Card Architecture */
.glass-card,
.premium-card {
    background-color: rgb(var(--bg-card-rgb));
    border: 1px solid rgba(var(--primary-rgb), 0.05);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-premium);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(var(--primary-rgb), 0.2);
}

/* Typography Customization */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Buttons */
.btn-premium {
    background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--accent-rgb, 139 92 246)));
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    border: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.btn-premium:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
    filter: brightness(1.1);
}

/* Input Fields Sync */
input,
select,
textarea {
    background-color: rgb(var(--bg-input-rgb, 255 255 255)) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
    border-radius: calc(var(--border-radius) * 0.8);
    transition: all 0.2s ease;
}

input:focus {
    border-color: rgb(var(--primary-rgb)) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1) !important;
}

/* ==========================================================================
   Dark Mode Master Theme Engine
   Transforms all client, admin, and user surfaces into a sleek, unified palette.
   ========================================================================== */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #080a0f !important;
    color: #f1f5f9 !important;
}

/* Surfaces & Cards */
html.dark .bg-white:not([class*="dark:"]) {
    background-color: #0c0f17 !important;
    color: #f1f5f9;
}

html.dark .bg-gray-50:not([class*="dark:"]),
html.dark .bg-slate-50:not([class*="dark:"]) {
    background-color: #080a0f !important;
}

html.dark .bg-gray-100:not([class*="dark:"]),
html.dark .bg-slate-100:not([class*="dark:"]) {
    background-color: #161b26 !important;
    color: #e2e8f0 !important;
}

html.dark .bg-gray-200:not([class*="dark:"]),
html.dark .bg-slate-200:not([class*="dark:"]) {
    background-color: #1f2636 !important;
}

/* Gradients for Card Headers */
html.dark .bg-gradient-to-r.from-gray-50.to-white,
html.dark .bg-gradient-to-r.from-gray-50.to-gray-100 {
    background: linear-gradient(to right, #0c0f17, #161b26) !important;
}

/* Text Colors */
html.dark .text-black {
    color: #ffffff !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #f8fafc !important;
}

html.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400 {
    color: #94a3b8 !important;
}

/* Labels */
html.dark label {
    color: #e2e8f0 !important;
}

/* Radio & Checkbox Card Selection States */
html.dark .peer:checked ~ div,
html.dark .peer-checked\:bg-indigo-50,
html.dark .peer-checked\:bg-blue-50 {
    background-color: rgba(212, 243, 74, 0.1) !important;
    border-color: #d4f34a !important;
    color: #ffffff !important;
}

html.dark .peer-checked\:text-indigo-700,
html.dark .peer-checked\:text-blue-700 {
    color: #d4f34a !important;
}

/* Borders & Dividers */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover States */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Tables in Dark Mode */
html.dark table thead.bg-gray-50,
html.dark table thead.bg-slate-50,
html.dark table thead {
    background-color: #0c0f17 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark table thead th {
    color: #94a3b8 !important;
}

html.dark table tbody tr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Inputs & Form Controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
    background-color: #0c0f17 !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* Soft Badges & Contextual Text in Dark Mode */
html.dark .text-orange-900,
html.dark .text-orange-800,
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-yellow-900,
html.dark .text-yellow-800 {
    color: #fcd34d !important;
}

html.dark .text-orange-700,
html.dark .text-amber-700,
html.dark .text-yellow-700 {
    color: #fbbf24 !important;
}

html.dark .text-blue-900,
html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-blue-700 {
    color: #60a5fa !important;
}

html.dark .text-indigo-900,
html.dark .text-indigo-800 {
    color: #c7d2fe !important;
}

html.dark .text-indigo-700 {
    color: #a5b4fc !important;
}

html.dark .text-purple-900,
html.dark .text-purple-800,
html.dark .text-violet-900,
html.dark .text-violet-800,
html.dark .text-fuchsia-900 {
    color: #e9d5ff !important;
}

html.dark .text-purple-700,
html.dark .text-violet-700 {
    color: #d8b4fe !important;
}

html.dark .text-green-900,
html.dark .text-green-800,
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-teal-900,
html.dark .text-teal-800 {
    color: #86efac !important;
}

html.dark .text-green-700,
html.dark .text-emerald-700,
html.dark .text-teal-700 {
    color: #4ade80 !important;
}

html.dark .text-red-900,
html.dark .text-red-800,
html.dark .text-rose-900,
html.dark .text-rose-800 {
    color: #fca5a5 !important;
}

html.dark .text-red-700,
html.dark .text-rose-700 {
    color: #f87171 !important;
}

html.dark .text-pink-900,
html.dark .text-pink-800 {
    color: #fbcfe8 !important;
}

html.dark .text-pink-700 {
    color: #f472b6 !important;
}

html.dark .text-cyan-900,
html.dark .text-cyan-800,
html.dark .text-sky-900,
html.dark .text-sky-800 {
    color: #7dd3fc !important;
}

/* Light Contextual Backgrounds in Dark Mode */
html.dark .bg-orange-50,
html.dark .bg-amber-50,
html.dark .bg-yellow-50,
html.dark [class*="bg-orange-50/"],
html.dark [class*="bg-amber-50/"] {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

html.dark .bg-orange-100,
html.dark .bg-amber-100,
html.dark .bg-yellow-100 {
    background-color: rgba(245, 158, 11, 0.22) !important;
}

html.dark .border-orange-100,
html.dark .border-orange-200,
html.dark .border-amber-100,
html.dark .border-amber-200,
html.dark [class*="border-orange-100/"],
html.dark [class*="border-amber-100/"] {
    border-color: rgba(245, 158, 11, 0.28) !important;
}

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

html.dark .bg-blue-100,
html.dark .bg-sky-100,
html.dark .bg-cyan-100 {
    background-color: rgba(59, 130, 246, 0.22) !important;
}

html.dark .border-blue-100,
html.dark .border-blue-200,
html.dark .border-sky-100,
html.dark .border-sky-200,
html.dark [class*="border-blue-100/"],
html.dark [class*="border-sky-100/"] {
    border-color: rgba(59, 130, 246, 0.28) !important;
}

html.dark .bg-indigo-50,
html.dark [class*="bg-indigo-50/"] {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html.dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.22) !important;
}

html.dark .border-indigo-100,
html.dark .border-indigo-200,
html.dark [class*="border-indigo-100/"] {
    border-color: rgba(99, 102, 241, 0.28) !important;
}

html.dark .bg-purple-50,
html.dark .bg-violet-50,
html.dark .bg-fuchsia-50,
html.dark [class*="bg-purple-50/"] {
    background-color: rgba(168, 85, 247, 0.12) !important;
}

html.dark .bg-purple-100,
html.dark .bg-violet-100,
html.dark .bg-fuchsia-100 {
    background-color: rgba(168, 85, 247, 0.22) !important;
}

html.dark .border-purple-100,
html.dark .border-purple-200,
html.dark .border-violet-100,
html.dark .border-violet-200,
html.dark [class*="border-purple-100/"] {
    border-color: rgba(168, 85, 247, 0.28) !important;
}

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

html.dark .bg-green-100,
html.dark .bg-emerald-100,
html.dark .bg-teal-100 {
    background-color: rgba(16, 185, 129, 0.22) !important;
}

html.dark .border-green-100,
html.dark .border-green-200,
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark [class*="border-green-100/"],
html.dark [class*="border-emerald-100/"] {
    border-color: rgba(16, 185, 129, 0.28) !important;
}

html.dark .bg-red-50,
html.dark .bg-rose-50,
html.dark [class*="bg-red-50/"],
html.dark [class*="bg-rose-50/"] {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

html.dark .bg-red-100,
html.dark .bg-rose-100 {
    background-color: rgba(239, 68, 68, 0.22) !important;
}

html.dark .border-red-100,
html.dark .border-red-200,
html.dark .border-rose-100,
html.dark .border-rose-200,
html.dark [class*="border-red-100/"],
html.dark [class*="border-rose-100/"] {
    border-color: rgba(239, 68, 68, 0.28) !important;
}

html.dark .bg-pink-50,
html.dark [class*="bg-pink-50/"] {
    background-color: rgba(236, 72, 153, 0.12) !important;
}

html.dark .bg-pink-100 {
    background-color: rgba(236, 72, 153, 0.22) !important;
}

html.dark .border-pink-100,
html.dark .border-pink-200,
html.dark [class*="border-pink-100/"] {
    border-color: rgba(236, 72, 153, 0.28) !important;
}

/* Stat Card Corner Blobs / Shapes */
html.dark .rounded-bl-full,
html.dark .rounded-br-full,
html.dark .rounded-tl-full,
html.dark .rounded-tr-full {
    opacity: 0.15 !important;
}

/* Specific Badge Formats */
html.dark .bg-gray-100.text-gray-500,
html.dark .bg-gray-100.text-gray-600,
html.dark .bg-gray-100.text-gray-700,
html.dark .bg-slate-100.text-slate-600 {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark .bg-green-100.text-green-700,
html.dark .bg-green-100.text-green-800,
html.dark .bg-green-50.text-green-700 {
    background-color: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html.dark .bg-blue-100.text-blue-700,
html.dark .bg-blue-100.text-blue-800,
html.dark .bg-blue-50.text-blue-700 {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
}

html.dark .bg-indigo-100.text-indigo-700,
html.dark .bg-indigo-100.text-indigo-800,
html.dark .bg-indigo-50.text-indigo-700 {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

html.dark .bg-red-100.text-red-700,
html.dark .bg-red-100.text-red-800,
html.dark .bg-red-50.text-red-700 {
    background-color: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

html.dark .bg-purple-100.text-purple-700,
html.dark .bg-purple-100.text-purple-800,
html.dark .bg-purple-50.text-purple-700 {
    background-color: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
}

html.dark .bg-amber-100.text-amber-700,
html.dark .bg-yellow-100.text-yellow-800,
html.dark .bg-yellow-50.text-yellow-800 {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}

/* Modals and Overlays in Dark Mode */
html.dark .modal-content,
html.dark [role="dialog"] > div > div {
    background-color: #0c0f17;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

/* Dark Mode Scrollbars */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: #080a0f;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Micro-animations */
@keyframes premiumIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-premium-in {
    animation: premiumIn 0.5s ease-out forwards;
}
/* Global Tailwind Padding Fallbacks for Inputs with Icons */
.pl-8 { padding-left: 2rem !important; }
.pl-9 { padding-left: 2.25rem !important; }
.pl-10 { padding-left: 2.5rem !important; }
.pl-11 { padding-left: 2.75rem !important; }
.pl-12 { padding-left: 3rem !important; }
.pl-14 { padding-left: 3.5rem !important; }