/**
 * Custom Tailwind CSS utility classes
 * 
 * NOTE: Since we're using Tailwind CDN, these classes are documented here
 * but should be used as Tailwind utility class combinations in templates.
 * 
 * For example, instead of using .btn-primary, use:
 * class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
 * 
 * Or create a reusable template partial/component with these classes.
 */

/* 
 * Button Classes - Use these utility combinations:
 * 
 * .btn-primary: px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium
 * .btn-secondary: px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium
 * .btn-success: px-4 py-2 bg-success text-white rounded-lg hover:bg-success-dark transition-colors font-medium
 * .btn-danger: px-4 py-2 bg-error text-white rounded-lg hover:bg-error-dark transition-colors font-medium
 * .btn-outline: px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium
 * 
 * Card Classes:
 * 
 * .card: bg-white rounded-lg shadow p-6
 * .card-header: border-b border-gray-200 pb-4 mb-4
 * .card-title: text-xl font-semibold text-gray-900
 * .card-description: text-sm text-gray-600
 * 
 * Form Classes:
 * 
 * .input: w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
 * .input-error: border-error focus:ring-error focus:border-error (add to .input)
 * .label: block text-sm font-medium text-gray-700 mb-1
 * 
 * Badge Classes:
 * 
 * .badge: px-2 py-1 text-xs font-semibold rounded-full
 * .badge-success: bg-success-light text-success-dark
 * .badge-error: bg-error-light text-error-dark
 * .badge-warning: bg-warning-light text-warning-dark
 * .badge-info: bg-info-light text-info-dark
 * .badge-gray: bg-gray-100 text-gray-800
 * 
 * Alert Classes:
 * 
 * .alert: p-4 rounded-lg border
 * .alert-success: bg-success-light border-success text-success-dark
 * .alert-error: bg-error-light border-error text-error-dark
 * .alert-warning: bg-warning-light border-warning text-warning-dark
 * .alert-info: bg-info-light border-info text-info-dark
 * 
 * Table Classes:
 * 
 * .table: min-w-full divide-y divide-gray-200
 * .table-header: bg-gray-50
 * .table-header-cell: px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider
 * .table-cell: px-6 py-4 whitespace-nowrap text-sm text-gray-900
 * 
 * Utility Classes:
 * 
 * .spinner: inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent
 * .htmx-indicator: opacity-0 transition-opacity duration-200
 * .htmx-request .htmx-indicator: opacity-100
 * .focus-ring: focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
 * .transition-base: transition-all duration-200 ease-in-out
 * .transition-slow: transition-all duration-300 ease-in-out
 */

/* HTMX Indicator - This works with regular CSS */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

/* Examette Theme Button Customization */
/* CSS variables are set in base.html style tag for immediate application */

/* Ensure all buttons have rounded-lg */
.btn,
button.btn,
a.btn,
input.btn[type="button"],
input.btn[type="submit"] {
    border-radius: 0.5rem !important; /* rounded-lg */
}

/* Override DaisyUI primary button colors for Examette theme */
/* High specificity to override DaisyUI defaults */
[data-theme="examette"] .btn.btn-primary,
[data-theme="examette"] button.btn-primary,
[data-theme="examette"] a.btn-primary,
[data-theme="examette"] input.btn-primary[type="button"],
[data-theme="examette"] input.btn-primary[type="submit"],
body[data-theme="examette"] .btn-primary,
.btn-primary {
    background-color: #fbe342 !important;
    color: #1a5333 !important;
    border-color: #fbe342 !important;
}

[data-theme="examette"] .btn.btn-primary:hover,
[data-theme="examette"] button.btn-primary:hover,
[data-theme="examette"] a.btn-primary:hover,
[data-theme="examette"] input.btn-primary[type="button"]:hover,
[data-theme="examette"] input.btn-primary[type="submit"]:hover,
body[data-theme="examette"] .btn-primary:hover,
.btn-primary:hover {
    background-color: #f9dc1a !important; /* Slightly darker yellow on hover */
    color: #1a5333 !important;
    border-color: #f9dc1a !important;
}

[data-theme="examette"] .btn.btn-primary:focus,
[data-theme="examette"] button.btn-primary:focus,
[data-theme="examette"] a.btn-primary:focus,
[data-theme="examette"] input.btn-primary[type="button"]:focus,
[data-theme="examette"] input.btn-primary[type="submit"]:focus,
body[data-theme="examette"] .btn-primary:focus,
.btn-primary:focus {
    outline: 2px solid #1a5333 !important;
    outline-offset: 2px;
}

[data-theme="examette"] .btn.btn-primary:active,
[data-theme="examette"] button.btn-primary:active,
[data-theme="examette"] a.btn-primary:active,
[data-theme="examette"] input.btn-primary[type="button"]:active,
[data-theme="examette"] input.btn-primary[type="submit"]:active,
body[data-theme="examette"] .btn-primary:active,
.btn-primary:active {
    background-color: #f9dc1a !important;
    color: #1a5333 !important;
}