/*
 * Mobile Enhancements CSS
 * Enhanced touch interactions and mobile-specific optimizations
 * Focus on mobile usability and performance
 */

/* Touch-friendly button sizes */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        font-size: 16px;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 500;
        margin-bottom: 8px;
    }
    
    .btn-sm {
        min-height: 38px;
        font-size: 14px;
        padding: 8px 16px;
    }
    
    .btn-lg {
        min-height: 50px;
        font-size: 18px;
        padding: 15px 24px;
    }
}

/* Enhanced form controls for mobile */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        min-height: 50px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
        border-radius: 8px;
        border: 2px solid var(--border-secondary);
        background-color: var(--bg-card);
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        transform: none;
    }
    
    .input-group-text {
        min-height: 50px;
        font-size: 16px;
        padding: 12px 16px;
        border: 2px solid var(--border-secondary);
        border-radius: 8px 0 0 8px;
    }
    
    .input-group .form-control {
        border-radius: 0 8px 8px 0;
        border-left: 0;
    }
    
    .input-group .form-select {
        border-radius: 0 8px 8px 0;
        border-left: 1px solid var(--border-secondary);
    }
}

/* Mobile-first card layouts */
@media (max-width: 768px) {
    .card {
        margin-bottom: 20px;
        border-radius: 12px;
        border: 1px solid var(--border-primary);
    }
    
    .card-body {
        padding: 20px;
    }
    
    .card-header {
        padding: 16px 20px;
        border-radius: 12px 12px 0 0;
        font-weight: 600;
    }
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
    .navbar-toggler {
        border: none;
        padding: 8px;
        font-size: 1.2rem;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 2px var(--primary);
    }
    
    .navbar-nav .nav-link {
        padding: 12px 16px;
        font-size: 16px;
        border-bottom: 1px solid var(--border-primary);
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
}

/* Enhanced mobile typography */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    
    .lead {
        font-size: 1.1rem;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
    }
    
    .card-title {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
}

/* Mobile-optimized result cards */
@media (max-width: 768px) {
    .result-item {
        padding: 16px;
        margin-bottom: 12px;
        text-align: center;
        border-radius: 12px;
        border: 2px solid var(--border-primary);
    }
    
    .result-value {
        font-size: 1.75rem;
        font-weight: 700;
        display: block;
        margin-bottom: 4px;
    }
    
    .result-label {
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    
    .results-grid {
        gap: 12px;
    }
}

/* Touch-friendly sample buttons */
@media (max-width: 768px) {
    .sample-btn {
        min-height: 40px;
        font-size: 14px;
        padding: 8px 14px;
        margin: 4px 2px;
        white-space: nowrap;
        border-radius: 20px;
        font-weight: 500;
    }
    
    .sample-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* Mobile-optimized tables */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 14px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border-primary);
    }
    
    .table th,
    .table td {
        padding: 12px 8px;
        vertical-align: middle;
    }
    
    .table th {
        font-size: 13px;
        font-weight: 600;
        background-color: var(--bg-secondary);
    }
    
    /* Stack table on very small screens */
    .table-stack-mobile {
        display: block;
        border: none;
    }
    
    .table-stack-mobile thead {
        display: none;
    }
    
    .table-stack-mobile tbody,
    .table-stack-mobile tr,
    .table-stack-mobile td {
        display: block;
        border: none;
    }
    
    .table-stack-mobile tr {
        background-color: var(--bg-card);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-sm);
    }
    
    .table-stack-mobile td {
        padding: 4px 0;
        border-bottom: 1px solid var(--border-primary);
    }
    
    .table-stack-mobile td:last-child {
        border-bottom: none;
    }
    
    .table-stack-mobile td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--text-secondary);
    }
}

/* Collapsible sections for mobile */
@media (max-width: 768px) {
    .accordion-button {
        font-size: 16px;
        padding: 16px;
        min-height: 54px;
    }
    
    .accordion-body {
        padding: 16px;
        line-height: 1.6;
    }
    
    .accordion-item {
        border-radius: 8px;
        margin-bottom: 8px;
        border: 1px solid var(--border-primary);
    }
}

/* Mobile sticky elements */
@media (max-width: 768px) {
    .mobile-sticky-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: var(--bg-card);
        border-top: 1px solid var(--border-primary);
        padding: 12px 20px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-sticky-bottom .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Add padding to content when sticky button is present */
    .content-with-sticky {
        padding-bottom: 80px;
    }
}

/* Enhanced touch feedback */
@media (max-width: 768px) {
    .btn:active,
    .form-control:active,
    .form-select:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .card:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }
}

/* Mobile-optimized alerts */
@media (max-width: 768px) {
    .alert {
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.5;
    }
    
    .alert-dismissible .btn-close {
        padding: 12px;
        font-size: 1rem;
    }
}

/* Mobile breadcrumb */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 14px;
        padding: 8px 0;
        margin-bottom: 16px;
        background: none;
        flex-wrap: wrap;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px;
    }
}

/* Mobile footer optimizations */
@media (max-width: 768px) {
    footer {
        padding: 24px 0;
        text-align: center;
    }
    
    footer .row > div {
        margin-bottom: 16px;
    }
    
    footer .row > div:last-child {
        margin-bottom: 0;
    }
    
    footer h5 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    footer p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* Mobile modal improvements */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 20px;
        max-width: calc(100% - 40px);
    }
    
    .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
    
    .modal-header {
        padding: 20px;
        border-radius: 16px 16px 0 0;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-footer {
        padding: 16px 20px;
        border-radius: 0 0 16px 16px;
    }
    
    .modal-title {
        font-size: 1.25rem;
    }
}

/* Mobile progress indicators */
@media (max-width: 768px) {
    .progress {
        height: 8px;
        border-radius: 4px;
        background-color: var(--bg-secondary);
        margin-bottom: 16px;
    }
    
    .progress-bar {
        border-radius: 4px;
    }
}

/* Mobile loading states */
@media (max-width: 768px) {
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
    
    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid var(--border-primary);
        border-top: 4px solid var(--primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}

/* Gesture support */
@media (max-width: 768px) {
    .swipe-container {
        touch-action: pan-y;
        overflow-x: hidden;
    }
    
    .drag-handle {
        cursor: grab;
        touch-action: none;
    }
    
    .drag-handle:active {
        cursor: grabbing;
    }
}

/* Enhanced accessibility for mobile */
@media (max-width: 768px) {
    .visually-hidden-focusable:focus {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 12px;
        font-size: 16px;
        background-color: var(--bg-card);
        border: 2px solid var(--primary);
        border-radius: 8px;
    }
    
    .skip-link {
        position: absolute;
        top: -100px;
        left: 20px;
        z-index: 10000;
        padding: 12px 16px;
        background-color: var(--primary);
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-size: 16px;
    }
    
    .skip-link:focus {
        top: 20px;
    }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    .no-scroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .smooth-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* Dark mode mobile adjustments */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .form-control,
    .form-select {
        background-color: #1a1a1a;
        border-color: #404040;
        color: #ffffff;
    }
    
    .card {
        background-color: #1a1a1a;
        border-color: #404040;
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #2a2a2a;
    }
}

/* Reduced motion for mobile */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .btn:active,
    .form-control:active,
    .form-select:active,
    .card:active {
        transform: none;
        transition: none;
    }
    
    .loading-spinner {
        animation: none;
        border: 4px solid var(--primary);
    }
}

/* High contrast mode for mobile */
@media (max-width: 768px) and (prefers-contrast: high) {
    .btn {
        border-width: 2px;
        font-weight: 600;
    }
    
    .form-control,
    .form-select {
        border-width: 2px;
    }
    
    .card {
        border-width: 2px;
    }
}

/* Mobile-specific utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-margin-bottom {
        margin-bottom: 20px !important;
    }
    
    .mobile-padding {
        padding: 16px !important;
    }
    
    .mobile-no-padding {
        padding: 0 !important;
    }
}

/* PWA-ready mobile styles */
@media (max-width: 768px) {
    .pwa-install-prompt {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background-color: var(--primary);
        color: white;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }
    
    .pwa-install-prompt button {
        background: transparent;
        color: white;
        border: 1px solid white;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        margin-left: 12px;
    }
}