/* Mobile-first responsive design for Car Document Platform */

/* Base mobile optimizations */
.btn {
    min-height: 44px; /* Touch-friendly button size */
    border-radius: 6px;
}

.form-control, .form-select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
}

/* Navigation optimizations */
.navbar-toggler {
    border: none;
    padding: 8px 12px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-brand {
    font-size: 1.1rem;
}

/* Mobile tablet styles */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Hero section */
    .hero-section {
        padding: 40px 0;
    }
    
    .display-5, .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    /* Buttons */
    .btn {
        font-size: 14px;
        padding: 12px 20px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Cards */
    .stat-card, .stats-card, .card {
        margin-bottom: 15px;
    }
    
    .stat-card .card-body, .stats-card .card-body {
        padding: 15px;
        text-align: center;
    }
    
    .stat-card h3, .stats-card h3 {
        font-size: 1.8rem;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 14px;
    }
    
    /* Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    /* Forms */
    .form-group, .mb-3 {
        margin-bottom: 1rem;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group .btn {
        border-top-left-radius: 0;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 6px;
        margin-top: 5px;
    }
    
    /* Navigation */
    .navbar-nav {
        text-align: center;
        padding: 10px 0;
    }
    
    .navbar-nav .nav-link {
        padding: 12px 15px;
        font-size: 14px;
        margin: 2px 0;
    }
}

/* Small mobile styles */
@media (max-width: 576px) {
    /* Hero section */
    .hero-section {
        padding: 30px 0;
    }
    
    .display-5, .display-4 {
        font-size: 1.8rem;
    }
    
    /* Cards */
    .stat-card .card-body, .stats-card .card-body, .card-body {
        padding: 12px;
    }
    
    /* Tables */
    .table td, .table th {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    .table td:first-child {
        font-weight: bold;
    }
    
    /* Status badges */
    .status-badge, .badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
    
    /* Buttons */
    .btn {
        font-size: 13px;
        padding: 10px 16px;
    }
    
    .btn-lg {
        font-size: 14px;
        padding: 12px 20px;
    }
    
    /* Typography */
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.4rem;
    }
    
    /* Forms */
    .form-control, .form-select {
        font-size: 16px;
        padding: 12px;
    }
    
    /* Modal adjustments */
    .modal-dialog {
        margin: 10px;
    }
    
    /* Document cards */
    .document-card {
        margin-bottom: 15px;
    }
    
    /* Action buttons alignment */
    .text-end {
        text-align: center !important;
    }
    
    .text-lg-end {
        text-align: center !important;
    }
    
    /* Flex adjustments */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 15px;
    }
    
    .d-flex.justify-content-between .btn {
        width: 100%;
    }
}

/* Extra small devices */
@media (max-width: 375px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .card-body {
        padding: 10px;
    }
    
    .btn {
        font-size: 12px;
        padding: 8px 14px;
    }
    
    .table {
        font-size: 11px;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {
    .btn:hover {
        background-color: var(--bs-btn-hover-bg);
    }
    
    .card:hover {
        transform: none;
    }
    
    .stat-card:hover, .stats-card:hover {
        transform: none;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        padding: 20px 0;
    }
    
    .navbar {
        padding: 8px 0;
    }
}