/* Responsive Layout Styles */

/* ============================================
   DESKTOP ENHANCEMENTS (Large screens)
   ============================================ */
@media (min-width: 1200px) {
  /* Better use of horizontal space on wide screens */
  .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
  }

  /* Cards in a row should have equal heights and better spacing */
  .row > [class*="col-"] > .card {
    height: 100%;
  }

  /* Dashboard stat cards - larger on desktop */
  .stat-card .stat-value {
    font-size: 2.25rem;
  }

  /* Better table spacing */
  .table > :not(caption) > * > * {
    padding: 1rem 1.25rem;
  }

  /* Action buttons have more breathing room */
  .btn-group .btn,
  .d-flex.gap-2 .btn {
    padding: 0.5rem 1rem;
  }
}

/* ============================================
   TABLET OPTIMIZATIONS (Medium screens)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
  .sidebar {
    width: 200px;
  }

  /* Two-column layout for cards on tablets */
  .card-grid > .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Reduce card padding slightly */
  .card-body {
    padding: 1rem;
  }
}

@media (min-width: 992px) {
  .sidebar {
    width: 250px;
  }

  /* More spacious layout on larger tablets/small desktops */
  .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS (Small screens)
   ============================================ */
@media (max-width: 576px) {
  /* Compact table styling */
  .table-responsive {
    font-size: 0.875rem;
  }

  .table > :not(caption) > * > * {
    padding: 0.5rem 0.75rem;
  }

  /* Smaller buttons on mobile */
  .btn-sm {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Full-width buttons in button groups */
  .btn-group-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-group-mobile .btn {
    width: 100%;
  }

  /* Stacked filters on very small screens */
  .filter-row .col-12 {
    margin-bottom: 0.5rem;
  }

  /* Page titles more compact */
  h1.h3 {
    font-size: 1.375rem;
  }

  /* Compact card headers */
  .card-header {
    padding: 0.75rem 1rem;
  }

  .card-header h5,
  .card-header h6 {
    font-size: 0.9375rem;
  }
}

/* ============================================
   ULTRA-WIDE DESKTOP (Very large screens)
   ============================================ */
@media (min-width: 1400px) {
  /* Prevent content from stretching too wide */
  .container-fluid {
    max-width: 1800px;
  }

  /* Three or four column layouts work well */
  .card-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
  }
}

/* ============================================
   PRINT OPTIMIZATIONS
   ============================================ */
@media print {
  .navbar,
  .btn,
  .alert-dismissible .btn-close {
    display: none !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }

  .container-fluid {
    max-width: 100% !important;
    padding: 0 !important;
  }
}