/* Mobile Optimization CSS */

/* Small checkbox specifically for mobile */
@media (max-width: 768px) {
    .form-check-input,
    .checkbox-small {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        margin-top: 1px !important;
        transform: none !important;
        font-size: 6px !important;
    }
    
    .form-check-label {
        font-size: 0.85rem;
        margin-left: 6px;
    }
    
    .form-check {
        align-items: center;
        gap: 6px;
    }
}

/* Responsive improvements */
@media (max-width: 768px) {
    .container-fluid {
        padding: 0 15px;
    }
    
    .card {
        margin-bottom: 1rem;
        border-radius: 12px;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Buttons handled in touch targets section below */
    
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 14px;
    }
    
    /* Dashboard optimizations */
    .row.row-cols-2 {
        row-gap: 0.5rem;
    }
    
    /* Responsive grid - single column on very small screens */
    .row.row-cols-2 {
        --bs-columns: 1;
    }
}
    
    /* Footer mobile optimization */
    .footer {
        margin-top: 2rem !important;
    }
    
    .footer .col-lg-6 {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .footer h4 {
        font-size: 1.25rem;
    }
    
    .footer h5 {
        font-size: 1.1rem;
    }
    
    /* Table responsive */
    .table-responsive {
        border-radius: 8px;
    }
    
    /* Modal optimizations */
    .modal-dialog {
        margin: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* Form optimizations */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
}

/* Touch targets - optimized for mobile */
@media (max-width: 768px) {
    /* Button optimizations for mobile */
    .btn {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px;
        margin: 2px;
        border-radius: 6px;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
        margin: 1px;
    }
    
    .btn-lg {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 16px;
    }
    
    /* Thumbnail and image optimizations */
    .card img, .thumbnail {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
    }
    
    /* Smaller thumbnails for mobile */
    .card img {
        max-height: 120px;
        width: 100%;
    }
    
    /* Icon sizing */
    .card .fa, .card .icon {
        font-size: 1.2rem;
    }
    
    /* Navigation touch targets */
    .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
    }
    
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        padding: 8px;
    }
    
    /* Card adjustments for smaller screens */
    .hover-card {
        min-height: 120px; /* Reduced from 140px */
    }
    
    .hover-card .card-body {
        padding: 0.5rem; /* Reduced padding */
    }
    
    .hover-card h6 {
        font-size: 0.85rem;
        line-height: 1.1;
        margin-bottom: 0.25rem;
    }
    
    /* Badge sizing */
    .badge {
        font-size: 0.65rem;
        padding: 0.2em 0.4em;
    }
    
    /* Link adjustments */
    a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
}

/* PWA specific styles */
@media (display-mode: standalone) {
    .navbar {
        padding-top: env(safe-area-inset-top, 0);
    }
    
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* Extra small screens (phones) - under 576px */
@media (max-width: 575.98px) {
    .container-fluid {
        padding: 0 10px;
    }
    
    /* Single column layout */
    .row.row-cols-2 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Smaller cards */
    .hover-card {
        min-height: 100px;
        margin-bottom: 0.75rem;
    }
    
    .hover-card .card-body {
        padding: 0.75rem;
    }
    
    .hover-card h6 {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }
    
    /* Compact buttons */
    .btn {
        min-height: 38px;
        padding: 6px 10px;
        font-size: 13px;
        margin: 1px;
    }
    
    .btn-sm {
        min-height: 34px;
        padding: 4px 8px;
        font-size: 12px;
    }
    
    /* Smaller thumbnails */
    .card img {
        max-height: 80px;
    }
    
    /* Compact navigation */
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 13px;
    }
    
    /* Form optimizations */
    .form-control {
        padding: 0.5rem;
        font-size: 14px;
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
    
    /* Table optimizations */
    .table {
        font-size: 13px;
    }
    
    .table td, .table th {
        padding: 0.5rem;
    }
}

/* Loading optimization */
.card img {
    loading: lazy;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Performance optimizations */
.hover-card {
    will-change: transform;
    backface-visibility: hidden;
}

/* Dark mode support disabled - causes black screen issues */
/* @media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1a1a1a !important;
        color: #ffffff;
    }
    
    .card {
        background-color: #2d2d2d !important;
        border-color: #404040 !important;
        color: #ffffff;
    }
    
    .text-muted {
        color: #b3b3b3 !important;
    }
} */