/* =====================================================
   الاستجابة - Responsive Design
   ===================================================== */

/* Mobile First Approach */

/* Extra Small: < 576px (default) */

/* Small: >= 576px */
@media (min-width: 576px) {
  .container {
    max-width: var(--container-sm);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
  }

  .grid {
    grid-template-columns: var(--grid-cols-2);
  }
}

/* Medium: >= 768px (Tablet) */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }

  .grid {
    grid-template-columns: var(--grid-cols-3);
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .desktop-hidden {
    display: none !important;
  }
}

/* Large: >= 992px */
@media (min-width: 992px) {
  .container {
    max-width: var(--container-lg);
  }

  .grid {
    grid-template-columns: var(--grid-cols-3);
  }

  .grid.grid-4 {
    grid-template-columns: var(--grid-cols-4);
  }
}

/* Extra Large: >= 1200px (Desktop) */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-xl);
  }

  .grid {
    grid-template-columns: var(--grid-cols-3);
  }

  .grid.grid-4 {
    grid-template-columns: var(--grid-cols-4);
  }

  .grid.grid-6 {
    grid-template-columns: var(--grid-cols-6);
  }
}

/* 2XL: >= 1400px (Large Desktop) */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* =====================================================
   Mobile Only
   ===================================================== */

@media (max-width: 767px) {
  .mobile-hidden,
  .desktop-only {
    display: none !important;
  }

  /* Adjust spacing for mobile */
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 24px;
  }

  body {
    font-size: var(--fs-sm);
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  /* Form adjustments */
  .form-label {
    margin-top: var(--spacing-md);
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--fs-sm);
  }

  /* Card adjustments */
  .card {
    border-radius: var(--radius-md);
  }

  /* Modal adjustments */
  .modal {
    padding: var(--spacing-md) !important;
  }

  .modal-content {
    border-radius: var(--radius-lg);
  }
}

/* =====================================================
   Landscape Mode
   ===================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --spacing-lg: 12px;
    --spacing-xl: 16px;
  }

  .navbar {
    height: 50px;
  }

  .sidebar {
    height: calc(100vh - 50px);
  }
}

/* =====================================================
   High Resolution Displays
   ===================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* =====================================================
   Reduced Motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   Dark Mode
   ===================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* =====================================================
   Print
   ===================================================== */

@media print {
  @page {
    margin: 2cm;
  }

  body {
    background-color: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }
}