/* Custom styles for the OID4VP application */

/* Improved form validation styling */
.form-control.is-invalid,
.form-control.is-valid {
    background-position: right calc(0.375em + 0.1875rem) center;
}

/* Enhanced responsive adjustments */
@media (max-width: 576px) {
    .card {
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .btn-lg {
        padding: .6rem 0.9rem;
        font-size: 1rem;
    }
    
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .text-center-xs {
        text-align: center;
    }
    
    .mt-4-xs {
        margin-top: 1.5rem;
    }
    
    .mb-4-xs {
        margin-bottom: 1.5rem;
    }
    
    .d-flex-xs {
        display: flex;
    }
    
    .flex-column-xs {
        flex-direction: column;
    }
    
    .justify-content-center-xs {
        justify-content: center;
    }
    
    .align-items-center-xs {
        align-items: center;
    }
    
    .w-100-xs {
        width: 100%;
    }
    
    .h-100-xs {
        height: 100%;
    }
    
    .col-xs-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .card {
        margin-bottom: 1.5rem;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .btn-lg {
        padding: .75rem 1rem;
        font-size: 1.1rem;
    }
    
    .d-flex-sm {
        display: flex;
    }
    
    .flex-column-sm {
        flex-direction: column;
    }
    
    .justify-content-center-sm {
        justify-content: center;
    }
    
    .align-items-center-sm {
        align-items: center;
    }
    
    .w-100-sm {
        width: 100%;
    }
    
    .h-100-sm {
        height: 100%;
    }
    
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .col-md-medium {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    
    .col-md-wide {
        flex: 0 0 auto;
        width: 83.333333%;
    }
}

/* Responsive adjustments for footer */
@media (max-width: 768px) {
    .footer {
        padding: 1rem 0;
    }
    
    .footer .list-inline-item {
        display: block;
        margin: 0.25rem 0;
    }
    
    .footer .text-center {
        text-align: center !important;
    }
}

/* Responsive adjustments for navigation */
@media (max-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    
    .navbar-collapse {
        background: white;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .navbar-dark .navbar-collapse {
        background: #0d6efd;
    }
}

/* Responsive adjustments for authentication options */
@media (max-width: 576px) {
    #qr-code-container img {
        max-width: 100% !important;
        max-height: 200px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .card-header.py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .card-body.p-4 {
        padding: 1.5rem !important;
    }
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators for keyboard navigation */
.btn:focus,
.form-control:focus,
.nav-link:focus {
    outline: 2px solid #4dabf7;
    outline-offset: 2px;
}

/* Improved contrast for better accessibility */
.text-muted {
    color: #6c757d !important;
}

/* Loading states */
.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Improved focus for accessibility */
.focusable:focus {
    outline: 2px solid #4dabf7;
    outline-offset: 2px;
}

/* Responsive utility classes for various screen sizes */
.d-none-xs {
    display: none;
}

@media (min-width: 576px) {
    .d-none-xs {
        display: block;
    }
}

.d-none-sm {
    display: none;
}

@media (min-width: 768px) {
    .d-none-sm {
        display: block;
    }
}

/* Responsive spacing for smaller screens */
.mt-xs-0 { margin-top: 0 !important; }
.mt-xs-1 { margin-top: 0.25rem !important; }
.mt-xs-2 { margin-top: 0.5rem !important; }
.mt-xs-3 { margin-top: 1rem !important; }
.mt-xs-4 { margin-top: 1.5rem !important; }
.mt-xs-5 { margin-top: 3rem !important; }

.mb-xs-0 { margin-bottom: 0 !important; }
.mb-xs-1 { margin-bottom: 0.25rem !important; }
.mb-xs-2 { margin-bottom: 0.5rem !important; }
.mb-xs-3 { margin-bottom: 1rem !important; }
.mb-xs-4 { margin-bottom: 1.5rem !important; }
.mb-xs-5 { margin-bottom: 3rem !important; }

.p-xs-0 { padding: 0 !important; }
.p-xs-1 { padding: 0.25rem !important; }
.p-xs-2 { padding: 0.5rem !important; }
.p-xs-3 { padding: 1rem !important; }
.p-xs-4 { padding: 1.5rem !important; }
.p-xs-5 { padding: 3rem !important; }

/* Responsive font sizes */
.fs-xs-1 { font-size: calc(1.375rem + 1.5vw); }
.fs-xs-2 { font-size: calc(1.325rem + 0.9vw); }
.fs-xs-3 { font-size: calc(1.3rem + 0.6vw); }
.fs-xs-4 { font-size: calc(1.275rem + 0.3vw); }
.fs-xs-5 { font-size: 1.25rem; }
.fs-xs-6 { font-size: 1rem; }