/**
 * DeMV Platform - Enhanced Responsive Styles
 * Comprehensive responsive styling for the entire platform
 * Supporting mobile, horizontal, and vertical viewing modes
 */

/* Base responsive container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

/* Responsive Grid System */
.responsive-grid {
  display: grid;
  gap: 20px;
  width: 100%;
}

/* Orientation-specific styles */
@media screen and (orientation: landscape) {
  .orientation-specific-container {
    display: flex;
    flex-direction: row;
  }
  
  .side-panel {
    width: 30%;
  }
  
  .main-panel {
    width: 70%;
  }
  
  .vehicle-details-layout {
    flex-direction: row;
  }
  
  .vehicle-gallery {
    width: 60%;
  }
  
  .vehicle-info-panel {
    width: 40%;
  }
}

@media screen and (orientation: portrait) {
  .orientation-specific-container {
    display: flex;
    flex-direction: column;
  }
  
  .side-panel {
    width: 100%;
  }
  
  .main-panel {
    width: 100%;
  }
  
  .vehicle-details-layout {
    flex-direction: column;
  }
  
  .vehicle-gallery {
    width: 100%;
  }
  
  .vehicle-info-panel {
    width: 100%;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .vehicle-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .dashboard-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
  
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .vehicle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .dashboard-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .dashboard-header h2 {
    font-size: 2rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    max-width: 720px;
  }
  
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .dashboard-header h2 {
    font-size: 1.8rem;
  }
  
  .vehicle-card .vehicle-image {
    height: 160px;
  }
  
  .vehicle-title {
    font-size: 1.3rem;
  }
  
  /* Form layouts */
  .form-row {
    flex-direction: column;
  }
  
  .form-row .form-group {
    width: 100%;
  }
  
  /* Modal adjustments */
  .modal-content {
    width: 95%;
    max-width: 700px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 540px;
  }
  
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .dashboard-header h2 {
    font-size: 1.6rem;
  }
  
  .vehicle-card .vehicle-image {
    height: 140px;
  }
  
  .vehicle-title {
    font-size: 1.2rem;
  }
  
  .vehicle-meta {
    gap: 10px;
    font-size: 0.8rem;
  }
  
  .vehicle-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .vehicle-btn {
    width: 100%;
  }
  
  /* Form layouts */
  .form-row {
    flex-direction: column;
  }
  
  .form-row .form-group {
    width: 100%;
  }
  
  /* Modal adjustments */
  .modal-content {
    width: 95%;
    max-width: 500px;
  }
  
  .modal-header h2 {
    font-size: 1.5rem;
  }
  
  /* Table adjustments */
  .responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
  
  .responsive-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .main-content {
    padding: 60px 0 30px;
  }
  
  .vehicle-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .dashboard-stats {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .dashboard {
    padding: 20px;
  }
  
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .dashboard-header h2 {
    font-size: 1.5rem;
  }
  
  .vehicle-card .vehicle-image {
    height: 180px;
  }
  
  .vehicle-title {
    font-size: 1.2rem;
  }
  
  .vehicle-meta {
    gap: 10px;
    font-size: 0.8rem;
  }
  
  .vehicle-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .vehicle-btn {
    width: 100%;
  }
  
  /* Form layouts */
  .form-row {
    flex-direction: column;
  }
  
  .form-row .form-group {
    width: 100%;
  }
  
  /* Modal adjustments */
  .modal-content {
    width: 95%;
  }
  
  .modal-header h2 {
    font-size: 1.4rem;
  }
  
  .modal-header {
    padding: 15px;
  }
  
  .modal-body {
    padding: 15px;
  }
  
  .btn {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
  
  /* Footer adjustments */
  .footer-content {
    flex-direction: column;
  }
  
  .footer-section {
    margin-bottom: 20px;
  }
  
  .footer-section h3 {
    font-size: 1.3rem;
  }
  
  /* Table adjustments */
  .responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  
  /* Form elements */
  input, select, textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Device orientation specific styles */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .modal {
    align-items: flex-start;
  }
  
  .modal-content {
    max-height: 85vh;
    margin-top: 10px;
  }
  
  .modal-body {
    max-height: 60vh;
  }
  
  .vehicle-gallery {
    max-height: 40vh;
  }
  
  .form-step {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .vehicle-card {
    cursor: pointer;
  }
  
  .btn, .vehicle-btn {
    padding: 12px 20px; /* Larger touch targets */
  }
  
  .form-group input, 
  .form-group select, 
  .form-group textarea {
    padding: 12px 15px; /* Larger touch targets */
  }
  
  .nav-links a {
    padding: 12px 15px; /* Larger touch targets */
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .container {
    width: 100%;
    max-width: 100%;
  }
  
  body {
    background-color: #fff;
    color: #000;
  }
  
  .vehicle-card, .dashboard {
    break-inside: avoid;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .light-mode-only {
    display: none !important;
  }
}

@media (prefers-color-scheme: light) {
  .dark-mode-only {
    display: none !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}