/**
 * Dynamic Theme CSS
 * Generated automatically based on database settings
 * Theme: green
 * Generated: 2026-01-15 09:24:52
 */

:root {
    /* Primary Theme Colors */
    --theme-50: #F0FDF4;
    --theme-100: #DCFCE7;
    --theme-200: #BBF7D0;
    --theme-300: #86EFAC;
    --theme-400: #4ADE80;
    --theme-500: #22C55E;
    --theme-600: #16A34A;
    --theme-700: #15803D;
    --theme-800: #166534;
    --theme-900: #14532D;
    
    /* 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);
}

/* ========================================
   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);
}