/**
 * Dynamic CSS for Medical Guard Admin Panel
 * 
 * This file was extracted from the DynamicCSSView docstring in admin_panel/views.py
 * to improve maintainability and follow best practices for CSS organization.
 * 
 * The placeholders {{VARIABLE_NAME}} are replaced at runtime by the DynamicCSSView
 * with actual values from SiteSettings to provide dynamic theming.
 * 
 * Contains:
 * - CSS custom properties for primary/secondary colors and variants
 * - Primary color overrides for Tailwind CSS classes
 * - Button styling rules ensuring proper text visibility
 * - Outline button hover states for various color schemes
 * - Force white text rules for primary background elements
 */

/* Dynamic CSS template for site theming based on SiteSettings */
/* This file contains placeholder values that will be replaced by DynamicCSSView */

:root {
    --primary-color: #081534;
    --primary-rgb: 8, 21, 52;
    --secondary-color: #193985;
    --secondary-rgb: 25, 57, 133;
    --primary-light: #838a99;
    --primary-lighter: #cdd0d6;
    --primary-dark: #061029;
    --secondary-dark: #142d6a;
}

/* Primary color overrides */
.bg-primary,
.bg-primary-600 {
    background-color: var(--primary-color) !important;
}

.bg-primary-700,
.hover\:bg-primary-700:hover {
    background-color: var(--secondary-color) !important;
}

.bg-primary-50 {
    background-color: #f4f6fb !important;
}

.bg-primary-500 {
    background-color: var(--primary-light) !important;
}

.hover\:bg-primary-600:hover {
    background-color: var(--primary-dark) !important;
}

.hover\:bg-primary-800:hover {
    background-color: var(--secondary-dark) !important;
}

/* Text colors */
.text-primary,
.text-primary-500,
.text-primary-600 {
    color: var(--primary-color) !important;
}

.text-primary-700 {
    color: var(--secondary-color) !important;
}

/* Border colors */
.border-primary-500,
.border-primary-600 {
    border-color: var(--primary-color) !important;
}

/* Focus and ring colors */
.focus\:ring-primary-500:focus {
    --tw-ring-color: rgba(var(--primary-rgb), 0.5) !important;
}

.focus\:border-primary-500:focus {
    border-color: var(--primary-color) !important;
}

.ring-primary-500 {
    --tw-ring-color: rgba(var(--primary-rgb), 0.5) !important;
}

/* Button styles */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

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

/* Outline button styles - ensure white text on hover */
.border-primary.text-primary:hover,
.border-primary-500.text-primary:hover,
.border-primary-600.text-primary:hover,
.border-primary.text-primary-500:hover,
.border-primary.text-primary-600:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.hover\:bg-primary-600.hover\:text-white:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.hover\:bg-primary-700.hover\:text-white:hover {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* Additional outline button patterns */
.border.border-primary.text-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Green outline buttons */
.border-green-500.text-green-600.hover\:bg-green-500.hover\:text-white:hover,
.border-green-500.text-green-600:hover {
    background-color: #10b981 !important;
    color: white !important;
}

/* Red outline buttons */
.border-red-500.text-red-600.hover\:bg-red-500.hover\:text-white:hover,
.border-red-500.text-red-600:hover {
    background-color: #ef4444 !important;
    color: white !important;
}

/* Blue outline buttons */
.border-blue-500.text-blue-600.hover\:bg-blue-500.hover\:text-white:hover,
.border-blue-500.text-blue-600:hover {
    background-color: #3b82f6 !important;
    color: white !important;
}

/* Yellow outline buttons */
.border-yellow-500.text-yellow-600.hover\:bg-yellow-500.hover\:text-white:hover,
.border-yellow-500.text-yellow-600:hover {
    background-color: #eab308 !important;
    color: white !important;
}

/* Cyan outline buttons */
.border-cyan-500.text-cyan-600.hover\:bg-cyan-500.hover\:text-white:hover,
.border-cyan-500.text-cyan-600:hover {
    background-color: #06b6d4 !important;
    color: white !important;
}

/* Gray outline buttons */
.border-gray-300.text-gray-700.hover\:bg-gray-50:hover {
    background-color: #f9fafb !important;
    color: #374151 !important;
}

/* Generic outline button pattern - catches any missed cases */
[class*="border-"].text-primary.hover\:bg-primary:hover,
[class*="border-"].text-primary-500.hover\:bg-primary:hover,
[class*="border-"].text-primary-600.hover\:bg-primary:hover {
    color: white !important;
}

/* Force white text on primary background hover */
.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover {
    color: white !important;
}

/* Force white text on all primary background elements */
.bg-primary-600,
.bg-primary-700,
a.bg-primary-600,
a.bg-primary-700 {
    color: white !important;
}

/* .bg-primary-600 *,
.bg-primary-700 *,
a.bg-primary-600 *,
a.bg-primary-700 * {
    color: white !important;
} */