/* Theme Bridge CSS - Applies CSS variables to application */

/* Override Tailwind colors with theme variables */
.bg-blue-50 { background-color: var(--primary-50) !important; }
.bg-blue-100 { background-color: var(--primary-100) !important; }
.bg-blue-500 { background-color: var(--primary-500) !important; }
.bg-blue-600 { background-color: var(--primary-600) !important; }
.bg-blue-700 { background-color: var(--primary-700) !important; }

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

.border-blue-500 { border-color: var(--primary-500) !important; }
.border-blue-600 { border-color: var(--primary-600) !important; }

.ring-blue-500 { --tw-ring-color: var(--primary-500) !important; }
.ring-blue-600 { --tw-ring-color: var(--primary-600) !important; }

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

/* Hover states */
.hover\:bg-blue-50:hover { background-color: var(--primary-50) !important; }
.hover\:bg-blue-100:hover { background-color: var(--primary-100) !important; }
.hover\:bg-blue-700:hover { background-color: var(--primary-700) !important; }
.hover\:text-blue-600:hover { color: var(--primary-600) !important; }
.hover\:text-blue-900:hover { color: var(--primary-900) !important; }

/* Peer checked states */
.peer-checked\:bg-blue-600:has(:checked) { background-color: var(--primary-600) !important; }

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

/* Backgrounds */
.bg-gray-50 { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-gray-200 { background-color: var(--gray-200) !important; }

/* Theme button gradient - dynamic based on theme */
.theme-button-gradient {
    background: linear-gradient(to bottom right, var(--primary-500), var(--primary-700)) !important;
}

/* Active/Selected states with theme colors */
.theme-active-border {
    border-color: var(--primary-500) !important;
    background-color: var(--primary-50) !important;
}

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

/* Buttons */
.btn-primary {
    background-color: var(--primary-600);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-700);
}

.btn-secondary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: var(--bg-hover);
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    border-color: var(--primary-600) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-500) !important;
    --tw-ring-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1) !important;
}

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

/* Links */
a.theme-link {
    color: var(--primary-600);
}

a.theme-link:hover {
    color: var(--primary-700);
}

/* Status Badges - keep original colors for semantic meaning */
.badge-success {
    background-color: var(--success-100);
    color: var(--success-700);
}

.badge-warning {
    background-color: var(--warning-100);
    color: var(--warning-700);
}

.badge-danger {
    background-color: var(--danger-100);
    color: var(--danger-700);
}

/* Cards */
.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Navigation active state */
.nav-link-active {
    color: var(--primary-600) !important;
    border-bottom-color: var(--primary-600) !important;
}

/* Table hover */
tr:hover {
    background-color: var(--bg-hover) !important;
}

/* Sidebar */
.sidebar-item:hover {
    background-color: var(--bg-hover) !important;
}

.sidebar-item-active {
    background-color: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

/* File input button */
input[type="file"]::file-selector-button {
    background-color: var(--primary-50);
    color: var(--primary-700);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--primary-100);
}

/* Range slider */
input[type="range"] {
    accent-color: var(--primary-600);
}

/* Toggle switch */
.peer:checked ~ .peer-checked\:bg-blue-600 {
    background-color: var(--primary-600) !important;
}

/* Dropdown hover */
.dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--primary-600);
}

/* Focus ring */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--primary-200);
    color: var(--text-primary);
}

/* Scrollbar (Webkit browsers) */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-400);
}

/* Placeholder text */
::placeholder {
    color: var(--text-tertiary);
}

/* Shadows with theme color */
.shadow-primary {
    box-shadow: 0 4px 6px -1px rgba(var(--primary-500), 0.1),
                0 2px 4px -1px rgba(var(--primary-500), 0.06);
}

.shadow-primary-lg {
    box-shadow: 0 10px 15px -3px rgba(var(--primary-500), 0.1),
                0 4px 6px -2px rgba(var(--primary-500), 0.05);
}

/* Animation for theme switching */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Exclude certain elements from transition */
button,
input,
select,
textarea,
.no-transition {
    transition-property: none;
}

/* Re-enable specific transitions */
button:hover,
input:focus,
select:focus,
textarea:focus {
    transition-property: all;
    transition-duration: 150ms;
}