/**
 * Dynamic Theme CSS
 * Generated automatically based on database settings
 * Theme: blue
 * Generated: 2026-02-08 19:50:19
 */

: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;
    
    /* 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: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-primary: #334155;
    --border-secondary: #475569;
    --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-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\:border-blue-500:hover { border-color: var(--theme-500) !important; }
.hover\:border-blue-600:hover { border-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: #475569 !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: #475569 !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;
}