/**
 * Dynamic Theme CSS
 * Generated automatically based on database settings
 * Theme: blue
 * Generated: 2026-03-26 07:05:09
 */

:root {
    /* Primary Theme Colors */
    --theme-50: #EFF6FF;
    --theme-100: #DBEAFE;
    --theme-200: #BFDBFE;
    --theme-300: #93C5FD;
    --theme-400: #60A5FA;
    --theme-500: #3B82F6;
    --theme-600: #2563EB;
    --theme-700: #1D4ED8;
    --theme-800: #1E40AF;
    --theme-900: #1E3A8A;
    
    /* RGB Components (for rgba() usage) */
    --theme-50-rgb: 239, 246, 255;
    --theme-100-rgb: 219, 234, 254;
    --theme-200-rgb: 191, 219, 254;
    --theme-300-rgb: 147, 197, 253;
    --theme-400-rgb: 96, 165, 250;
    --theme-500-rgb: 59, 130, 246;
    --theme-600-rgb: 37, 99, 235;
    --theme-700-rgb: 29, 78, 216;
    --theme-800-rgb: 30, 64, 175;
    --theme-900-rgb: 30, 58, 138;
    
    /* Semantic Theme Variables */
    --theme-primary: var(--theme-600);
    --theme-primary-hover: var(--theme-700);
    --theme-primary-light: var(--theme-100);
    --theme-primary-dark: var(--theme-800);
    
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Dark Mode Colors */
.dark {
    --bg-primary: #0c0f14;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-primary: #21262d;
    --border-secondary: #484f58;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    
    /* Adjust theme colors for dark mode */
    --theme-50: #1E3A8A;
    --theme-100: #1E40AF;
    --theme-900: #EFF6FF;
}

/* ========================================
   TAILWIND CSS COMPATIBLE UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-theme-50 { background-color: var(--theme-50) !important; }
.bg-theme-100 { background-color: var(--theme-100) !important; }
.bg-theme-200 { background-color: var(--theme-200) !important; }
.bg-theme-300 { background-color: var(--theme-300) !important; }
.bg-theme-400 { background-color: var(--theme-400) !important; }
.bg-theme-500 { background-color: var(--theme-500) !important; }
.bg-theme-600 { background-color: var(--theme-600) !important; }
.bg-theme-700 { background-color: var(--theme-700) !important; }
.bg-theme-800 { background-color: var(--theme-800) !important; }
.bg-theme-900 { background-color: var(--theme-900) !important; }

/* Text Colors */
.text-theme-50 { color: var(--theme-50) !important; }
.text-theme-100 { color: var(--theme-100) !important; }
.text-theme-200 { color: var(--theme-200) !important; }
.text-theme-300 { color: var(--theme-300) !important; }
.text-theme-400 { color: var(--theme-400) !important; }
.text-theme-500 { color: var(--theme-500) !important; }
.text-theme-600 { color: var(--theme-600) !important; }
.text-theme-700 { color: var(--theme-700) !important; }
.text-theme-800 { color: var(--theme-800) !important; }
.text-theme-900 { color: var(--theme-900) !important; }

/* Border Colors */
.border-theme-50 { border-color: var(--theme-50) !important; }
.border-theme-100 { border-color: var(--theme-100) !important; }
.border-theme-200 { border-color: var(--theme-200) !important; }
.border-theme-300 { border-color: var(--theme-300) !important; }
.border-theme-400 { border-color: var(--theme-400) !important; }
.border-theme-500 { border-color: var(--theme-500) !important; }
.border-theme-600 { border-color: var(--theme-600) !important; }
.border-theme-700 { border-color: var(--theme-700) !important; }
.border-theme-800 { border-color: var(--theme-800) !important; }
.border-theme-900 { border-color: var(--theme-900) !important; }

/* Hover States */
.hover\:bg-theme-600:hover { background-color: var(--theme-600) !important; }
.hover\:bg-theme-700:hover { background-color: var(--theme-700) !important; }
.hover\:text-theme-600:hover { color: var(--theme-600) !important; }
.hover\:text-theme-700:hover { color: var(--theme-700) !important; }
.hover\:border-theme-600:hover { border-color: var(--theme-600) !important; }
.hover\:border-theme-700:hover { border-color: var(--theme-700) !important; }

/* ========================================
   LEGACY BLUE CLASS OVERRIDES
   Automatically maps old blue classes to new theme
   ======================================== */

/* Background - Blue to Theme */
.bg-blue-50 { background-color: var(--theme-50) !important; }
.bg-blue-100 { background-color: var(--theme-100) !important; }
.bg-blue-200 { background-color: var(--theme-200) !important; }
.bg-blue-300 { background-color: var(--theme-300) !important; }
.bg-blue-400 { background-color: var(--theme-400) !important; }
.bg-blue-500 { background-color: var(--theme-500) !important; }
.bg-blue-600 { background-color: var(--theme-600) !important; }
.bg-blue-700 { background-color: var(--theme-700) !important; }
.bg-blue-800 { background-color: var(--theme-800) !important; }
.bg-blue-900 { background-color: var(--theme-900) !important; }

/* Text - Blue to Theme */
.text-blue-50 { color: var(--theme-50) !important; }
.text-blue-100 { color: var(--theme-100) !important; }
.text-blue-200 { color: var(--theme-200) !important; }
.text-blue-300 { color: var(--theme-300) !important; }
.text-blue-400 { color: var(--theme-400) !important; }
.text-blue-500 { color: var(--theme-500) !important; }
.text-blue-600 { color: var(--theme-600) !important; }
.text-blue-700 { color: var(--theme-700) !important; }
.text-blue-800 { color: var(--theme-800) !important; }
.text-blue-900 { color: var(--theme-900) !important; }

/* Border - Blue to Theme */
.border-blue-50 { border-color: var(--theme-50) !important; }
.border-blue-100 { border-color: var(--theme-100) !important; }
.border-blue-200 { border-color: var(--theme-200) !important; }
.border-blue-300 { border-color: var(--theme-300) !important; }
.border-blue-400 { border-color: var(--theme-400) !important; }
.border-blue-500 { border-color: var(--theme-500) !important; }
.border-blue-600 { border-color: var(--theme-600) !important; }
.border-blue-700 { border-color: var(--theme-700) !important; }
.border-blue-800 { border-color: var(--theme-800) !important; }
.border-blue-900 { border-color: var(--theme-900) !important; }

/* Hover States - Blue to Theme */
.hover\:bg-blue-50:hover { background-color: var(--theme-50) !important; }
.hover\:bg-blue-100:hover { background-color: var(--theme-100) !important; }
.hover\:bg-blue-200:hover { background-color: var(--theme-200) !important; }
.hover\:bg-blue-500:hover { background-color: var(--theme-500) !important; }
.hover\:bg-blue-600:hover { background-color: var(--theme-600) !important; }
.hover\:bg-blue-700:hover { background-color: var(--theme-700) !important; }
.hover\:bg-blue-800:hover { background-color: var(--theme-800) !important; }
.hover\:text-blue-600:hover { color: var(--theme-600) !important; }
.hover\:text-blue-700:hover { color: var(--theme-700) !important; }
.hover\:text-blue-800:hover { color: var(--theme-800) !important; }
.hover\:border-blue-500:hover { border-color: var(--theme-500) !important; }
.hover\:border-blue-600:hover { border-color: var(--theme-600) !important; }

/* Gradient From - Blue to Theme */
.from-blue-50 { --tw-gradient-from: var(--theme-50) !important; }
.from-blue-100 { --tw-gradient-from: var(--theme-100) !important; }
.from-blue-200 { --tw-gradient-from: var(--theme-200) !important; }
.from-blue-400 { --tw-gradient-from: var(--theme-400) !important; }
.from-blue-500 { --tw-gradient-from: var(--theme-500) !important; }
.from-blue-600 { --tw-gradient-from: var(--theme-600) !important; }
.from-blue-700 { --tw-gradient-from: var(--theme-700) !important; }
.from-blue-900 { --tw-gradient-from: var(--theme-900) !important; }

/* Gradient To - Blue to Theme */
.to-blue-50 { --tw-gradient-to: var(--theme-50) !important; }
.to-blue-100 { --tw-gradient-to: var(--theme-100) !important; }
.to-blue-200 { --tw-gradient-to: var(--theme-200) !important; }
.to-blue-400 { --tw-gradient-to: var(--theme-400) !important; }
.to-blue-500 { --tw-gradient-to: var(--theme-500) !important; }
.to-blue-600 { --tw-gradient-to: var(--theme-600) !important; }
.to-blue-700 { --tw-gradient-to: var(--theme-700) !important; }

/* Gradient Via - Blue to Theme */
.via-blue-500 { --tw-gradient-via: var(--theme-500) !important; }
.via-blue-600 { --tw-gradient-via: var(--theme-600) !important; }
.via-blue-700 { --tw-gradient-via: var(--theme-700) !important; }
.via-blue-800 { --tw-gradient-via: var(--theme-800) !important; }

/* Ring - Blue to Theme */
.ring-blue-100 { --tw-ring-color: var(--theme-100) !important; }
.ring-blue-200 { --tw-ring-color: var(--theme-200) !important; }
.ring-blue-300 { --tw-ring-color: var(--theme-300) !important; }
.ring-blue-400 { --tw-ring-color: var(--theme-400) !important; }
.ring-blue-500 { --tw-ring-color: var(--theme-500) !important; }

/* Focus Ring - Blue to Theme */
.focus\:ring-blue-100:focus { --tw-ring-color: var(--theme-100) !important; }
.focus\:ring-blue-300:focus { --tw-ring-color: var(--theme-300) !important; }
.focus\:ring-blue-400:focus { --tw-ring-color: var(--theme-400) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--theme-500) !important; }
.focus\:ring-blue-600:focus { --tw-ring-color: var(--theme-600) !important; }

/* Focus Border - Blue to Theme */
.focus\:border-blue-400:focus { border-color: var(--theme-400) !important; }
.focus\:border-blue-500:focus { border-color: var(--theme-500) !important; }

/* Hover Gradient From - Blue to Theme */
.hover\:from-blue-50:hover { --tw-gradient-from: var(--theme-50) !important; }
.hover\:from-blue-600:hover { --tw-gradient-from: var(--theme-600) !important; }
.hover\:from-blue-700:hover { --tw-gradient-from: var(--theme-700) !important; }

/* Hover Gradient To - Blue to Theme */
.hover\:to-blue-100:hover { --tw-gradient-to: var(--theme-100) !important; }
.hover\:to-blue-600:hover { --tw-gradient-to: var(--theme-600) !important; }
.hover\:to-blue-700:hover { --tw-gradient-to: var(--theme-700) !important; }
.hover\:to-blue-800:hover { --tw-gradient-to: var(--theme-800) !important; }

/* Active Gradient - Blue to Theme */
.active\:from-blue-700:active { --tw-gradient-from: var(--theme-700) !important; }
.active\:to-blue-700:active { --tw-gradient-to: var(--theme-700) !important; }

/* Group Hover Text - Blue to Theme */
.group:hover .group-hover\:text-blue-500 { color: var(--theme-500) !important; }
.group:hover .group-hover\:text-blue-600 { color: var(--theme-600) !important; }
.group:hover .group-hover\:text-blue-700 { color: var(--theme-700) !important; }

/* Placeholder - Blue to Theme */
.placeholder-blue-100::placeholder { color: var(--theme-100) !important; }

/* Shadow - Blue to Theme */
.shadow-blue-100 { --tw-shadow-color: var(--theme-100) !important; }
.shadow-blue-500 { --tw-shadow-color: var(--theme-500) !important; }
.shadow-blue-600 { --tw-shadow-color: var(--theme-600) !important; }

/* ========================================
   CUSTOM COMPONENTS
   ======================================== */

/* Primary Button */
.btn-primary,
.btn.btn-primary {
    background-color: var(--theme-600) !important;
    border-color: var(--theme-600) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: var(--theme-700) !important;
    border-color: var(--theme-700) !important;
}

/* Outlined Button */
.btn-outline-primary {
    color: var(--theme-600) !important;
    border-color: var(--theme-600) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--theme-50) !important;
}

/* Links */
a.text-blue-600,
a[class*="text-blue"] {
    color: var(--theme-600) !important;
}

a.text-blue-600:hover,
a[class*="text-blue"]:hover {
    color: var(--theme-700) !important;
}

/* Cards with theme accent */
.card-accent-theme {
    border-left: 4px solid var(--theme-600);
}

.card.card-blue-light,
.card.card-yellow-light {
    background: linear-gradient(60deg, var(--theme-600), var(--theme-700)) !important;
}

.card.card-blue-light .card-body .icon,
.card.card-yellow-light .card-body .icon {
    color: var(--theme-700) !important;
}

/* Admin Sidebar Active State */
.app.app-blue aside.app-sidebar .sidebar-menu ul.sidebar-nav > li.active > a .icon,
.app.app-blue-sky aside.app-sidebar .sidebar-menu ul.sidebar-nav > li.active > a .icon {
    background-color: rgba(var(--theme-600-rgb), 0.25) !important;
    color: var(--theme-600) !important;
}

.app.app-blue aside.app-sidebar .sidebar-menu ul.sidebar-nav > li.active > a .title,
.app.app-blue-sky aside.app-sidebar .sidebar-menu ul.sidebar-nav > li.active > a .title {
    color: var(--theme-600) !important;
}

/* Badges */
.badge-primary {
    background-color: var(--theme-600) !important;
}

/* Progress Bars */
.progress-bar-theme {
    background-color: var(--theme-600) !important;
}

/* Focus States */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-500) !important;
    outline-color: var(--theme-200) !important;
}

/* ========================================
   SVG THEMING SUPPORT
   Dynamic emoji and icon colors
   ======================================== */

svg {
    --coin-dark: var(--theme-900);
    --coin-light: var(--theme-100);
    --theme-600-accent: var(--theme-600);
    --theme-900-dark: var(--theme-900);
}

/* Emoji SVG icons */
img[src*="emoji"],
.emoji-icon {
    filter: brightness(1) contrast(1);
}

/* If SVG is embedded as object */
object[type="image/svg+xml"] {
    --coin-dark: var(--theme-900);
    --coin-light: var(--theme-100);
}

/* SVG within picture element */
picture svg {
    --coin-dark: var(--theme-900);
    --coin-light: var(--theme-100);
}

/* ========================================
   DARK MODE UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }

/* Text Colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }

/* Border Colors */
.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }

/* Dark Mode Specific Overrides */
.dark .bg-white { background-color: var(--bg-primary) !important; }
.dark .bg-gray-50 { background-color: var(--bg-secondary) !important; }
.dark .bg-gray-100 { background-color: var(--bg-tertiary) !important; }
.dark .bg-gray-200 { background-color: #484f58 !important; }
.dark .bg-gray-300 { background-color: #64748b !important; }

.dark .text-gray-900 { color: var(--text-primary) !important; }
.dark .text-gray-800 { color: var(--text-primary) !important; }
.dark .text-gray-700 { color: var(--text-secondary) !important; }
.dark .text-gray-600 { color: var(--text-secondary) !important; }
.dark .text-gray-500 { color: var(--text-tertiary) !important; }
.dark .text-gray-400 { color: var(--text-tertiary) !important; }
.dark .text-black { color: var(--text-primary) !important; }

.dark .border-gray-200 { border-color: var(--border-primary) !important; }
.dark .border-gray-300 { border-color: var(--border-secondary) !important; }

/* Glass effect for dark mode */
.dark .glass-header {
    background-color: rgba(15, 23, 42, 0.75) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.3) !important;
}

/* Card styles */
.dark .shadow,
.dark .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.dark .shadow-md { box-shadow: var(--shadow-md) !important; }
.dark .shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Input and form elements */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Buttons */
.dark .btn,
.dark button {
    color: var(--text-primary);
}

.dark .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary) !important; }
.dark .hover\:bg-gray-100:hover { background-color: #484f58 !important; }

/* Dividers */
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-primary) !important;
}

/* Navigation active state */
.dark .nav-link::after {
    background-color: var(--theme-500) !important;
}