/* Mobile Responsive Enhancements for Anahtar Health */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Container adjustments */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Typography adjustments */
    h1, .h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h3, .h3 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    h4, .h4 {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    /* Button adjustments */
    .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        min-height: 52px;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }
    
    /* Form adjustments */
    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem 1rem;
    }
    
    .form-select {
        min-height: 44px;
        font-size: 16px;
        padding: 0.75rem 1rem;
    }
    
    .form-label {
        font-size: 0.95rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    /* Card adjustments */
    .card {
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    /* Table adjustments */
    .table-responsive {
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
    }
    
    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 0.75rem;
    }
    
    .modal-header {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        border-top: 1px solid #dee2e6;
    }
    
    /* Alert adjustments */
    .alert {
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Badge adjustments */
    .badge {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Spacing adjustments */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Grid adjustments */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Extra Small Mobile (phones in portrait) */
@media (max-width: 576px) {
    /* Container adjustments */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Typography adjustments */
    h1, .h1 {
        font-size: 1.5rem;
    }
    
    h2, .h2 {
        font-size: 1.25rem;
    }
    
    h3, .h3 {
        font-size: 1.1rem;
    }
    
    /* Button adjustments */
    .btn {
        min-height: 40px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .btn-sm {
        min-height: 32px;
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .btn-lg {
        min-height: 48px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    /* Form adjustments */
    .form-control {
        min-height: 40px;
        font-size: 14px;
        padding: 0.5rem 0.75rem;
    }
    
    .form-select {
        min-height: 40px;
        font-size: 14px;
        padding: 0.5rem 0.75rem;
    }
    
    .form-label {
        font-size: 0.875rem;
    }
    
    /* Card adjustments */
    .card-body {
        padding: 0.75rem;
    }
    
    .card-header {
        padding: 0.5rem 0.75rem;
    }
    
    /* Table adjustments */
    .table {
        font-size: 0.8rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
    }
    
    /* Modal adjustments */
    .modal-dialog {
        margin: 0.25rem;
        max-width: calc(100% - 0.5rem);
    }
    
    .modal-header {
        padding: 0.75rem;
    }
    
    .modal-body {
        padding: 0.75rem;
    }
    
    .modal-footer {
        padding: 0.75rem;
    }
    
    /* Alert adjustments */
    .alert {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Badge adjustments */
    .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* Spacing adjustments */
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* RTL Mobile Specific */
@media (max-width: 768px) {
    [dir="rtl"] .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    [dir="rtl"] .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    [dir="rtl"] .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    [dir="rtl"] .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    [dir="rtl"] .text-end {
        text-align: center !important;
    }
    
    [dir="rtl"] .text-start {
        text-align: center !important;
    }
    
    [dir="rtl"] .d-flex {
        flex-direction: column;
    }
    
    [dir="rtl"] .d-flex.flex-row {
        flex-direction: column;
    }
    
    [dir="rtl"] .d-flex.flex-row-reverse {
        flex-direction: column-reverse;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 1rem 0;
    }
    
    .hero-section h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-section p {
        font-size: 0.9rem !important;
    }
    
    .navbar {
        padding: 0.25rem 0;
    }
    
    .modal-dialog {
        margin: 0.25rem;
    }
    
    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Touch-friendly elements */
@media (max-width: 768px) {
    /* Ensure all interactive elements are touch-friendly */
    .btn,
    .nav-link,
    .dropdown-toggle,
    .form-control,
    .form-select,
    .card[onclick],
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improve touch targets */
    .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Better spacing for touch */
    .btn-group .btn {
        margin: 0.125rem;
    }
    
    /* Improve form spacing */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-check {
        margin-bottom: 0.75rem;
    }
    
    /* Better card spacing */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Improve list spacing */
    .list-group-item {
        padding: 0.75rem 1rem;
    }
    
    /* Better table spacing */
    .table-responsive {
        margin-bottom: 1rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    .btn {
        border-width: 0.5px;
    }
    
    .form-control {
        border-width: 0.5px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .card {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .card-header {
        background-color: #1a202c;
        border-bottom-color: #4a5568;
    }
    
    .form-control {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .form-control:focus {
        background-color: #2d3748;
        border-color: #3182ce;
        color: #e2e8f0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }
    
    .form-control {
        border-width: 2px;
    }
    
    .card {
        border-width: 2px;
    }
}