/**
 * Dynamic Theme CSS
 * Generated automatically based on database settings
 * Theme: #fdc700
 * Generated: from tbl_settings.theme_color
 */

:root {
    /* Primary Theme Colors */
    --theme-50: #FFFCF5;
    --theme-100: #FFF8E7;
    --theme-200: #FFF2D1;
    --theme-300: #FFE9B2;
    --theme-400: #FFDC84;
    --theme-500: #FFD153;
    --theme-600: #FDC700;
    --theme-700: #CFA300;
    --theme-800: #AA8500;
    --theme-900: #8F7115;
    
    /* RGB Components (for rgba() usage) */
    --theme-50-rgb: 255, 252, 245;
    --theme-100-rgb: 255, 248, 231;
    --theme-200-rgb: 255, 242, 209;
    --theme-300-rgb: 255, 233, 178;
    --theme-400-rgb: 255, 220, 132;
    --theme-500-rgb: 255, 209, 83;
    --theme-600-rgb: 253, 199, 0;
    --theme-700-rgb: 207, 163, 0;
    --theme-800-rgb: 170, 133, 0;
    --theme-900-rgb: 143, 113, 21;
    
    /* 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);
    
    /* The pale tints are surfaces, so after dark they take the deep end of
       the scale. --theme-900 stays deep: scrims, avatar discs and the dark
       end of accent gradients read it, and a pale 900 left them washed out. */
    --theme-50: #8F7115;
    --theme-100: #AA8500;
}

/* Text set in the deepest step needs the pale one on a dark page */
.dark .text-theme-900,
.dark .text-blue-900 { color: #FFFCF5 !important; }

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

/* Native radios, checkboxes, date pickers and scrollbars draw their own dark
   versions; without this they stay white discs on a dark page. */
.dark input,
.dark textarea,
.dark select { color-scheme: dark; }

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

/* Buttons: a default only. :where() keeps it at zero specificity, so any
   button a theme or page colours with a class of its own keeps its label. */
:where(.dark) :where(.btn, 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;
}

/* Text on the store's colour */
:root {
    --theme-on-primary: #111827;
}

.btn-primary,
.btn.btn-primary {
    color: var(--theme-on-primary) !important;
}