/**
 * Custom Responsive Styles for Vehicle Rental Management System
 * Mobile-first approach with breakpoints for all devices
 */

/* ===================================
   Base Responsive Settings
   =================================== */

/* Ensure images are responsive by default */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

/* ===================================
   Mobile Devices (320px - 480px)
   =================================== */
@media only screen and (max-width: 480px) {
    /* Typography adjustments */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    p { font-size: 14px !important; }

    /* Header adjustments */
    #header-top {
        display: none !important;
    }

    .logo h2 {
        font-size: 18px !important;
    }

    /* Navigation */
    .mainmenu {
        display: none;
    }

    /* Container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Login pages */
    .login-container {
        max-width: 100% !important;
        margin: 20px auto !important;
        padding: 20px !important;
    }

    .form-body-w3-agile {
        padding: 20px !important;
        width: 100% !important;
    }

    /* Buttons */
    .btn, button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Forms */
    .form-control {
        font-size: 14px !important;
    }

    /* Cards and panels */
    .admin-card,
    .single-popular-car,
    .single-new-car {
        margin-bottom: 20px;
    }

    /* Tables */
    table {
        font-size: 12px;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Vehicle cards */
    .p-car-thumbnails img,
    .vehicle-image {
        height: 200px !important;
        object-fit: cover;
    }
}

/* ===================================
   Tablets Portrait (481px - 768px)
   =================================== */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Typography */
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }

    /* Header */
    .logo h2 {
        font-size: 20px !important;
    }

    /* Login containers */
    .login-container {
        max-width: 90% !important;
        margin: 40px auto !important;
        padding: 30px !important;
    }

    .form-body-w3-agile {
        padding: 30px !important;
    }

    /* Navigation adjustments */
    .mainmenu ul li {
        padding: 0 10px;
    }

    /* Grid adjustments */
    .col-md-6,
    .col-md-4,
    .col-md-3 {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* ===================================
   Tablets Landscape (769px - 1024px)
   =================================== */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Container width */
    .container {
        max-width: 960px;
    }

    /* Navigation */
    .mainmenu ul li {
        padding: 0 12px;
    }

    .mainmenu ul li a {
        font-size: 14px;
    }

    /* Login containers */
    .login-container {
        max-width: 600px !important;
    }

    .form-body-w3-agile {
        max-width: 600px !important;
    }
}

/* ===================================
   Small Laptops (1025px - 1366px)
   =================================== */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
    .container {
        max-width: 1140px;
    }

    .login-container {
        max-width: 500px !important;
    }
}

/* ===================================
   Common Responsive Classes
   =================================== */

/* Hide on mobile */
@media only screen and (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    /* Admin sidebar adjustments */
    .ts-sidebar {
        position: fixed;
        left: -250px;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .ts-sidebar.open {
        left: 0;
    }

    /* Content wrapper for mobile */
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Dashboard cards */
    .stat-widget {
        margin-bottom: 20px;
    }

    /* Footer adjustments */
    footer {
        text-align: center;
    }

    footer .col-lg-3,
    footer .col-lg-4 {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Show only on mobile */
@media only screen and (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

/* ===================================
   Touch-friendly Elements
   =================================== */
@media only screen and (max-width: 768px) {
    /* Larger touch targets */
    a, button, input[type="submit"], .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form elements */
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    /* Navigation links */
    .mainmenu ul li a {
        padding: 15px !important;
        display: block;
    }
}

/* ===================================
   Print Styles
   =================================== */
@media print {
    .no-print,
    header,
    footer,
    .sidebar,
    .ts-sidebar,
    button,
    .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a {
        text-decoration: underline;
    }
}

/* ===================================
   High DPI Displays (Retina)
   =================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
    /* Optimize images for retina displays */
    .logo img,
    .vehicle-image {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ===================================
   Orientation Changes
   =================================== */
@media only screen and (orientation: landscape) and (max-width: 768px) {
    /* Landscape mobile optimizations */
    .login-container,
    .form-body-w3-agile {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}

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

/* ===================================
   Admin Panel Responsive
   =================================== */
@media only screen and (max-width: 768px) {
    /* Admin header */
    .admin-header {
        padding: 10px;
    }

    /* Admin tables */
    .panel-body {
        padding: 10px;
    }

    /* Form groups */
    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 10px;
    }

    /* Breadcrumbs */
    .breadcrumb {
        font-size: 12px;
    }
}