/* Login Page Mobile Fixes */

@media (max-width: 768px) {
    
    /* Login page container */
    .min-h-screen.flex {
        flex-direction: column !important;
        padding: 1rem !important;
    }
    
    /* Hide left panel on mobile */
    .hidden.lg\:flex {
        display: none !important;
    }
    
    /* Right panel - full width on mobile */
    .w-full.lg\:w-1\/2 {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Logo container */
    .text-center.mb-8 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Logo image */
    .text-center.mb-8 img {
        height: 70px !important;
        max-width: 100% !important;
    }
    
    /* Title */
    .text-center.mb-8 h1 {
        font-size: 1.25rem !important;
    }
    
    /* Login heading */
    .mb-8.text-center h2 {
        font-size: 1.5rem !important;
    }
    
    /* Role selection cards */
    .space-y-3 button {
        padding: 1rem !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Role card icon container */
    .space-y-3 button .w-12.h-12 {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
        margin-right: 1rem !important;
    }
    
    /* Role card icon */
    .space-y-3 button .w-12.h-12 i {
        font-size: 1.25rem !important;
    }
    
    /* Role card text container */
    .space-y-3 button .text-left.flex-1 {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Role card title */
    .space-y-3 button .text-left.flex-1 .font-semibold {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #111827 !important;
        margin-bottom: 0.25rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* Role card description */
    .space-y-3 button .text-left.flex-1 .text-sm {
        font-size: 0.875rem !important;
        color: #6b7280 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* Role card arrow */
    .space-y-3 button .fa-chevron-right {
        flex-shrink: 0 !important;
        margin-left: 0.5rem !important;
    }
    
    /* Login form */
    form.space-y-5 {
        width: 100% !important;
    }
    
    /* Form inputs */
    form.space-y-5 input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
        min-height: 44px !important;
    }
    
    /* Form labels */
    form.space-y-5 label {
        font-size: 0.875rem !important;
    }
    
    /* Submit button */
    form.space-y-5 button[type="submit"] {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* Back button */
    button[ng-click*="backToRoleSelection"] {
        margin-bottom: 1rem !important;
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Selected role header */
    .mb-8 .flex.items-center {
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .mb-8 .flex.items-center .w-12.h-12 {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex-shrink: 0 !important;
    }
    
    .mb-8 .flex.items-center h2 {
        font-size: 1.25rem !important;
    }
    
    .mb-8 .flex.items-center p {
        font-size: 0.875rem !important;
    }
}