/**
 * Minimal Authentication Enhancements
 * Only essential customizations that complement the theme
 */

/* Auth Enhancements CSS */

/* Hide browser validation messages */
input:invalid,
input:required:invalid {
    box-shadow: none;
}

/* Hide validation tooltips */
input::-webkit-validation-bubble-message {
    display: none;
}

/* Hide Firefox validation messages */
input:invalid {
    box-shadow: none;
}

/* Hide validation messages for email inputs specifically */
input[type="email"]:invalid {
    box-shadow: none;
}

/* Remove any browser validation styling */
input:focus:invalid {
    box-shadow: none;
}

/* Ensure no validation messages appear */
input:invalid:focus {
    box-shadow: none;
}

/* Hide any browser validation notifications (scoped to email only) */
input[type="email"]:invalid + * {
    display: none;
}

/* Auth logo styling */
.auth-logo {
    transition: transform 0.2s ease-in-out;
}

.auth-logo:hover {
    transform: scale(1.05);
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .auth-logo {
        height: 1.5rem;
    }
}

/* OAuth button improvements */
.kt-btn-outline {
    transition: all 0.2s ease-in-out;
}

.kt-btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Form field focus improvements */
.kt-input:focus-within {
    border-color: var(--kt-primary);
    box-shadow: 0 0 0 3px rgba(var(--kt-primary-rgb), 0.1);
}

/* Keep input borders neutral on focus (avoid black borders) */
.kt-input:focus,
input.kt-input:focus,
textarea.kt-input:focus {
    outline: none;
    border-color: var(--input, #d1d5db) !important;
    box-shadow: none;
}

/* Select focus to match inputs */
select.kt-select:focus,
.kt-select:focus {
    outline: none;
    border-color: var(--input, #d1d5db) !important;
    box-shadow: none;
}

/* Remove checkbox hover background */
.kt-checkbox-group:hover {
    background: none;
}

.kt-checkbox-group:focus-within {
    background: none;
}

.kt-checkbox:hover {
    background: none;
}

.kt-checkbox:focus {
    background: none;
}

/* Loading state improvements */
.btn-loading {
    display: none;
}

.btn-loading.show {
    display: inline-flex;
}

/* Alert animations */
.alert-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.alert-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

.alert-exit {
    opacity: 1;
    transform: translateY(0);
}

.alert-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in;
}

/* Essential button loading states */
.btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-loading.hidden {
    display: none !important;
}

.btn-text.hidden {
    display: none !important;
}

.btn-loading:not(.hidden) {
    display: inline-flex !important;
}

.btn-text:not(.hidden) {
    display: inline-flex !important;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.ki-outline.ki-loading {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Enhanced Checkbox Styling for Auth Pages */

/* CSS Variables for consistent theming */
:root {
    --checkbox-size: 1.125rem;
    --checkbox-size-sm: 1rem;
    --checkbox-size-lg: 1.25rem;
    --checkbox-border-width: 2px;
    --checkbox-border-radius: 0.25rem;
    --checkbox-transition: all 0.15s ease-in-out;
    --checkbox-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --checkbox-hover-bg: rgba(59, 130, 246, 0.02);
}

.dark {
    --checkbox-hover-bg: rgba(59, 130, 246, 0.1);
}

/* Checkbox Group Container */
.kt-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    transition: var(--checkbox-transition);
    padding: 0.5rem 0;
    border-radius: 0.375rem;
    margin: 0.5rem 0;
    position: relative;
}

.kt-checkbox-group:hover {
    background-color: var(--checkbox-hover-bg);
}

/* Checkbox Input */
.kt-checkbox-group .kt-checkbox {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--checkbox-transition);
    border: var(--checkbox-border-width) solid var(--input, #e5e7eb);
    background-color: var(--background, #ffffff);
    border-radius: var(--checkbox-border-radius);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    position: relative;
    top: 0.125rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.kt-checkbox-group .kt-checkbox:focus-visible {
    outline: none;
    border-color: var(--primary, #3b82f6);
    box-shadow: var(--checkbox-focus-ring);
}

.kt-checkbox-group .kt-checkbox:checked {
    background-color: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z' fill='white'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.75rem;
}

.kt-checkbox-group .kt-checkbox:indeterminate {
    background-color: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.75rem;
}

/* Checkbox Label */
.kt-checkbox-group .kt-checkbox-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--foreground, #1f2937);
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    flex: 1;
    margin: 0;
    padding: 0;
}

/* Link styling within checkbox labels */
.kt-checkbox-group .kt-checkbox-label a {
    color: var(--primary, #3b82f6);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.kt-checkbox-group .kt-checkbox-label a:hover {
    color: var(--primary-hover, #2563eb);
    text-decoration: underline;
}

/* Small checkbox variant */
.kt-checkbox-group .kt-checkbox-sm {
    width: var(--checkbox-size-sm);
    height: var(--checkbox-size-sm);
    top: 0.125rem;
}

.kt-checkbox-group .kt-checkbox-sm:checked {
    background-size: 0.625rem;
}

.kt-checkbox-group .kt-checkbox-sm:indeterminate {
    background-size: 0.625rem;
}

/* Large checkbox variant */
.kt-checkbox-group .kt-checkbox-lg {
    width: var(--checkbox-size-lg);
    height: var(--checkbox-size-lg);
    top: 0.125rem;
}

.kt-checkbox-group .kt-checkbox-lg:checked {
    background-size: 0.875rem;
}

.kt-checkbox-group .kt-checkbox-lg:indeterminate {
    background-size: 0.875rem;
}

/* Disabled state */
.kt-checkbox-group:has(.kt-checkbox:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

.kt-checkbox-group .kt-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--muted, #f3f4f6);
    border-color: var(--border, #d1d5db);
}

.kt-checkbox-group .kt-checkbox:disabled:checked {
    background-color: var(--muted-foreground, #6b7280);
    border-color: var(--muted-foreground, #6b7280);
}

/* Dark mode support */
.dark .kt-checkbox-group {
    color: var(--foreground, #f9fafb);
}

.dark .kt-checkbox-group:hover {
    background-color: rgba(var(--primary-rgb, 59 130 246), 0.1);
}

.dark .kt-checkbox-group .kt-checkbox {
    border-color: var(--input, #374151);
    background-color: var(--background, #111827);
}

.dark .kt-checkbox-group .kt-checkbox:disabled {
    background-color: var(--muted, #374151);
    border-color: var(--border, #4b5563);
}

.dark .kt-checkbox-group .kt-checkbox-label {
    color: var(--foreground, #f9fafb);
}

/* Focus ring for accessibility */
.kt-checkbox-group:focus-within {
    outline: none;
}

.kt-checkbox-group:focus-within .kt-checkbox {
    border-color: var(--primary, #3b82f6);
    box-shadow: var(--checkbox-focus-ring);
}

/* Keyboard navigation support */
.kt-checkbox-group .kt-checkbox:focus-visible {
    outline: none;
}

/* Improved label interaction */
.kt-checkbox-group .kt-checkbox-label {
    transition: color 0.15s ease-in-out;
}

.kt-checkbox-group:hover .kt-checkbox-label {
    color: var(--primary, #3b82f6);
}

/* Animation for checkbox state changes */
.kt-checkbox-group .kt-checkbox:checked,
.kt-checkbox-group .kt-checkbox:indeterminate {
    transform: scale(1.05);
}

/* Improved hover effects */
.kt-checkbox-group:hover .kt-checkbox {
    border-color: var(--primary, #3b82f6);
}

.kt-checkbox-group:hover .kt-checkbox:not(:checked):not(:indeterminate) {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Error state */
.kt-checkbox-group.error .kt-checkbox {
    border-color: var(--destructive, #ef4444);
}

.kt-checkbox-group.error .kt-checkbox:focus-visible {
    border-color: var(--destructive, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Success state */
.kt-checkbox-group.success .kt-checkbox:checked {
    background-color: var(--success, #10b981);
    border-color: var(--success, #10b981);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .kt-checkbox-group {
        gap: 0.5rem;
        padding: 0.375rem 0;
    }
    
    .kt-checkbox-group .kt-checkbox-label {
        font-size: 0.8125rem;
        line-height: 1.125rem;
    }
}

/* Print styles */
@media print {
    .kt-checkbox-group {
        break-inside: avoid;
    }
    
    .kt-checkbox-group .kt-checkbox {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}