/**
 * Authentication Pages CSS
 * Specific styling for login and register pages
 * Project: Sharing Digital Kommunity (SDK)
 */

/* Auth page layout */
.auth-page-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 200px) !important;
    padding: 2rem 1rem !important;
    width: 100% !important;
}

.auth-form-wrapper {
    width: 100% !important;
    max-width: 28rem !important;
    margin: 0 auto !important;
}

.auth-card {
    background-color: #1a1a2e !important;
    border-radius: 1rem !important;
    border: 1px solid #2d3748 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
}

.auth-card-header {
    padding: 1.5rem !important;
    border-bottom: 1px solid #1f2937 !important;
}

.auth-card-header h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin: 0 !important;
}

.auth-card-body {
    padding: 1.5rem !important;
}

/* Form styling */
.auth-form-group {
    margin-bottom: 1.5rem !important;
}

.auth-form-group.mb-0 {
    margin-bottom: 0 !important;
}

.auth-form-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #e5e7eb !important;
    margin-bottom: 0.5rem !important;
}

.auth-form-input {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background-color: #374151 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 0.5rem !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.auth-form-input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Grid layout for name fields */
.auth-grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

/* Button styling */
.auth-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
    text-decoration: none !important;
    width: 100% !important;
}

.auth-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.auth-btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(-1px) !important;
}

.auth-btn-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.5rem !important;
}

/* Alert styling */
.auth-alert {
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
}

.auth-alert-error {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.auth-alert-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}

.auth-alert svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.5rem !important;
}

/* Link styling */
.auth-link {
    color: #818cf8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.auth-link:hover {
    color: #a5b4fc !important;
}

/* Text styling */
.auth-text-center {
    text-align: center !important;
}

.auth-text-gray {
    color: #9ca3af !important;
}

.auth-text-sm {
    font-size: 0.875rem !important;
}

.auth-mt-6 {
    margin-top: 1.5rem !important;
}

.auth-mt-1 {
    margin-top: 0.25rem !important;
}

.auth-mb-6 {
    margin-bottom: 1.5rem !important;
}

/* Flex utilities */
.auth-flex {
    display: flex !important;
}

.auth-items-center {
    align-items: center !important;
}

.auth-justify-between {
    justify-content: space-between !important;
}

.auth-ml-2 {
    margin-left: 0.5rem !important;
}

/* Checkbox styling */
.auth-checkbox {
    height: 1rem !important;
    width: 1rem !important;
    background-color: #374151 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 0.25rem !important;
    color: #6366f1 !important;
}

.auth-checkbox:focus {
    ring: 2px !important;
    ring-color: #6366f1 !important;
    ring-opacity: 0.5 !important;
}

/* Fix for auth pages - override app-container styles */
body:has(.auth-page-container) .main-content,
.main-content:has(.auth-page-container) {
    margin-left: 0 !important;
    width: 100% !important;
}

body:has(.auth-page-container) .app-container {
    display: block !important;
}

body:has(.auth-page-container) .sidebar {
    display: none !important;
}

/* Alternative approach for browsers that don't support :has() */
.auth-layout .main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

.auth-layout .app-container {
    display: block !important;
}

.auth-layout .sidebar {
    display: none !important;
}

/* Responsive */
@media (max-width: 640px) {
    .auth-page-container {
        padding: 1rem 0.5rem !important;
        min-height: calc(100vh - 150px) !important;
    }
    
    .auth-card-header,
    .auth-card-body {
        padding: 1rem !important;
    }
    
    .auth-grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}