/**
 * Desktop Layout Fixes for Authentication Pages
 * Addresses layout issues on desktop screens for login/signup forms
 */

/* ============================================
 Desktop-Specific Container Adjustments
 ============================================ */
@media (min-width: 992px) {
 /* Ensure proper container width on medium to large desktops */
 .auth-page .container {
 max-width: 1140px;
 }
 
 /* Adjust column widths for better desktop display */
 .auth-page .col-md-6 {
 flex: 0 0 50%;
 max-width: 50%;
 }
 
 .auth-page .col-lg-5 {
 flex: 0 0 41.66667%;
 max-width: 41.66667%;
 }
 
 /* Ensure auth cards have proper minimum width on desktop */
 .auth-card {
 min-width: 450px;
 }
 
 /* Increase padding for desktop comfort */
 .auth-card .card-body {
 padding: 3.5rem;
 }
 
 /* Ensure form elements have proper spacing on desktop */
 .auth-form .mb-4 {
 margin-bottom: 1.75rem !important;
 }
 
 /* Adjust title sizes for desktop */
 .auth-title {
 font-size: 2.25rem;
 margin-bottom: 0.75rem;
 }
 
 .auth-subtitle {
 font-size: 1.25rem;
 margin-bottom: 2.5rem;
 }
 
 /* Ensure form controls have adequate height and padding */
 .auth-form .form-control,
 .auth-form .form-select {
 padding: 1rem 1.5rem;
 font-size: 1.125rem;
 height: calc(3.5rem + 4px);
 }
 
 /* Adjust button sizes for desktop */
 .auth-form .btn-primary {
 padding: 1rem 2.5rem;
 font-size: 1.25rem;
 }
 
 /* Social login buttons desktop styling */
 .social-login-btn {
 padding: 1rem 2rem;
 font-size: 1.125rem;
 }
 
 .social-login-btn img {
 height: 1.75rem;
 margin-right: 1rem;
 }
 
 /* Sexual preference checkboxes - better grid for desktop */
 .sexual-preference-group {
 grid-template-columns: repeat(2, 1fr);
 gap: 1.25rem;
 padding: 1.5rem;
 }
 
 /* Ensure proper spacing between form sections */
 .auth-divider {
 margin: 3rem 0;
 }
}

/* ============================================
 Large Desktop Adjustments (1200px+)
 ============================================ */
@media (min-width: 1200px) {
 .auth-page .container {
 max-width: 1200px;
 }
 
 /* Prevent forms from being too narrow on large screens */
 .auth-page .row {
 min-width: 500px;
 }
 
 /* Ensure consistent card width */
 .auth-card {
 min-width: 500px;
 max-width: 600px;
 margin: 0 auto;
 }
}

/* ============================================
 Extra Large Desktop (1400px+)
 ============================================ */
@media (min-width: 1400px) {
 .auth-page .container {
 max-width: 1320px;
 }
 
 /* Prevent forms from becoming too wide on ultra-wide screens */
 .auth-page .col-md-6.col-lg-5 {
 max-width: 540px;
 margin: 0 auto;
 }
 
 .auth-card {
 min-width: 540px;
 max-width: 640px;
 }
}

/* ============================================
 Desktop-Specific Enhancements
 ============================================ */
@media (min-width: 992px) {
 /* Enhanced hover effects for desktop */
 .auth-card {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .auth-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
 }
 
 /* Better focus states for desktop */
 .auth-form .form-control:focus,
 .auth-form .form-select:focus {
 box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
 }
 
 /* Enhanced button hover states */
 .auth-form .btn-primary:hover {
 transform: translateY(-3px);
 box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
 }
 
 .social-login-btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }
 
 /* Better typography spacing for desktop readability */
 .auth-form .form-label {
 font-size: 1rem;
 margin-bottom: 0.75rem;
 }
 
 /* Ensure links have proper hit areas on desktop */
 .auth-link {
 padding: 0.25rem 0;
 display: inline-block;
 }
}

/* ============================================
 Fix for Specific Desktop Layout Issues
 ============================================ */
@media (min-width: 768px) and (max-width: 1199px) {
 /* Medium desktop screens - ensure proper width */
 .auth-page .container {
 padding-left: 2rem;
 padding-right: 2rem;
 }
 
 .auth-card {
 width: 100%;
 min-width: 420px;
 }
}

/* ============================================
 Vertical Centering for Desktop
 ============================================ */
@media (min-width: 992px) and (min-height: 700px) {
 body.auth-page {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 padding: 3rem 0;
 }
 
 .auth-container {
 width: 100%;
 }
}

/* ============================================
 High-Specificity Overrides for Desktop
 ============================================ */
@media (min-width: 992px) {
 /* Override any conflicting styles with higher specificity */
 body.auth-page .auth-form .form-control,
 body.auth-page .auth-form .form-select {
 min-height: calc(3.5rem + 4px) !important;
 line-height: 1.5 !important;
 }
 
 /* Ensure text doesn't get bunched */
 body.auth-page .auth-form label,
 body.auth-page .auth-form .form-label {
 white-space: normal !important;
 word-wrap: break-word !important;
 }
 
 /* Prevent input placeholder text from being cut off */
 body.auth-page .auth-form input::placeholder {
 overflow: visible !important;
 text-overflow: clip !important;
 }
 
 /* Ensure proper text spacing in buttons */
 body.auth-page .auth-form .btn {
 white-space: normal !important;
 word-wrap: break-word !important;
 min-width: 120px;
 }
}

/* ============================================
 Desktop-Specific Form Layout Fixes
 ============================================ */
@media (min-width: 992px) {
 /* Fix for multi-column forms on desktop */
 .auth-form .row {
 margin-left: -0.75rem;
 margin-right: -0.75rem;
 }
 
 .auth-form .row > [class*="col-"] {
 padding-left: 0.75rem;
 padding-right: 0.75rem;
 }
 
 /* Ensure dropdowns display properly on desktop */
 .auth-form .form-select {
 background-position: right 1rem center;
 padding-right: 3rem;
 }
 
 /* Fix checkbox and radio button alignment on desktop */
 .auth-form .form-check {
 min-height: 1.75rem;
 padding-left: 2.5rem;
 }
 
 .auth-form .form-check-input {
 width: 1.5rem;
 height: 1.5rem;
 margin-top: 0.125rem;
 margin-left: -2.5rem;
 }
 
 .auth-form .form-check-label {
 line-height: 1.5rem;
 padding-top: 0.125rem;
 }
}

/* ============================================
 Z-Index Management for Desktop
 ============================================ */
@media (min-width: 992px) {
 /* Ensure modals and dropdowns appear above auth cards */
 .auth-card {
 position: relative;
 z-index: 1;
 }
 
 .auth-form .dropdown-menu {
 z-index: 1050;
 }
 
 /* Tooltips and popovers */
 .tooltip {
 z-index: 1070;
 }
 
 .popover {
 z-index: 1060;
 }
}

/* ============================================
 Custom Scrollbar for Desktop
 ============================================ */
@media (min-width: 992px) {
 /* Style scrollbars for auth forms on desktop */
 .auth-card::-webkit-scrollbar {
 width: 8px;
 }
 
 .auth-card::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 4px;
 }
 
 .auth-card::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 4px;
 }
 
 .auth-card::-webkit-scrollbar-thumb:hover {
 background: #555;
 }
}

/* ============================================
 Print Styles for Desktop
 ============================================ */
@media print and (min-width: 992px) {
 body.auth-page {
 background: white !important;
 }
 
 .auth-card {
 box-shadow: none !important;
 border: 1px solid #dee2e6 !important;
 }
 
 .auth-form .btn {
 border: 2px solid currentColor !important;
 }
}