/*
 * Theme Customization CSS
 * 
 * This file contains CSS custom properties for theme colors.
 * In the future, these values can be dynamically injected from the admin panel.
 * 
 * To customize via admin panel later:
 * 1. Store color values in database (e.g., settings table)
 * 2. Generate this CSS dynamically via a route or blade partial
 * 3. Inject the variables into the :root selector
 */

:root {
    /* Primary Color Palette */
    --primary-50: #e6f3fe;
    --primary-100: #cce7fd;
    --primary-200: #99cffb;
    --primary-300: #66b7f9;
    --primary-400: #339ff7;
    --primary-500: #0e7fe1;  /* Main primary color */
    --primary-600: #0c6bc2;  /* Hover state */
    --primary-700: #0a57a3;
    --primary-800: #084384;
    --primary-900: #062f65;
    
    /* Original purple for reference (can be removed later) */
    /* --original-primary: rgb(121, 93, 237); */
}

/* ==========================================================================
   Primary Color Overrides
   ========================================================================== */

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

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

/* Background colors */
.bg-primary-500,
.bg-primary {
    background-color: var(--primary-500) !important;
}

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

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

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

/* ==========================================================================
   Button Overrides
   ========================================================================== */

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

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

.btn-primary-solid:active,
.btn-primary-solid:focus {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

/* Primary outline button */
.btn-primary-outline {
    color: var(--primary-500) !important;
    border-color: var(--primary-500) !important;
}

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

/* ==========================================================================
   Link Overrides
   ========================================================================== */

a.text-primary-500:hover,
a.text-primary:hover {
    color: var(--primary-600) !important;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

/* Focus states for inputs */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(14, 127, 225, 0.1) !important;
}

/* Checkbox and radio when checked */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--primary-500) !important;
    border-color: var(--primary-500) !important;
}

/* ==========================================================================
   Icon Colors (when using primary color)
   ========================================================================== */

.text-primary-500 i,
.text-primary i,
i.text-primary-500,
i.text-primary {
    color: var(--primary-500) !important;
}

/* Icons inside primary buttons should stay white */
.btn-primary-solid i {
    color: inherit !important;
}

/* Form input group icons - override the hardcoded purple */
.form-input-group.input-icon {
    --tw-text-opacity: 1 !important;
    color: rgb(14 127 225 / var(--tw-text-opacity)) !important;
}

.input-icon,
span.input-icon,
.form-input-group.input-icon,
.input-icon i,
.input-icon i[class*="ri-"],
span.form-input-group.input-icon i {
    color: #0e7fe1 !important;
}

/* Override text-inherit to use our color */
.input-icon .text-inherit,
.form-input-group.input-icon .text-inherit {
    color: inherit !important;
}

.text-primary-400,
i.text-primary-400 {
    color: var(--primary-400) !important;
}

/* ==========================================================================
   Badge Overrides
   ========================================================================== */

.badge-primary-solid {
    background-color: var(--primary-500) !important;
}

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

.badge-primary-outline {
    color: var(--primary-500) !important;
    border-color: var(--primary-500) !important;
}

/* ==========================================================================
   Alert Overrides
   ========================================================================== */

.aleart-primary-solid {
    background-color: var(--primary-500) !important;
}

.aleart-primary-light {
    background-color: rgba(14, 127, 225, 0.1) !important;
    color: var(--primary-500) !important;
}

/* ==========================================================================
   Misc Overrides
   ========================================================================== */

/* Progress bars */
.progress-primary {
    background-color: var(--primary-500) !important;
}

/* Accent color */
.accent-primary-500 {
    accent-color: var(--primary-500) !important;
}

/* Before pseudo-elements */
.before\:bg-primary-500::before {
    background-color: var(--primary-500) !important;
}

.before\:text-primary-500::before {
    color: var(--primary-500) !important;
}

/* Hover states */
.hover\:bg-primary-500:hover {
    background-color: var(--primary-500) !important;
}

.hover\:text-primary-500:hover {
    color: var(--primary-500) !important;
}

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

/* Group hover states */
.group:hover .group-hover\:text-primary-500 {
    color: var(--primary-500) !important;
}

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

/* Marker colors */
*\:marker\:text-primary-500 > *::marker,
*\:marker\:text-primary-500 * > *::marker {
    color: var(--primary-500) !important;
}