/* ============================================================
   SmartAdmin Bootstrap 5 - Responsive
   CSS Module: Mobile-First Design & Breakpoints
   ============================================================ */

/* Breakpoints */
/* Mobile: 320px - 575px */
/* Tablet (sm): 576px - 767px */
/* Tablet (md): 768px - 991px */
/* Desktop (lg): 992px - 1199px */
/* Desktop (xl): 1200px - 1399px */
/* Desktop (xxl): 1400px+ */

/* Mobile First - Base Styles */

/* Hide Elements on Mobile */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

/* Small Screens (≥576px - Tablet) */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-grid {
    display: grid !important;
  }

  .col-sm {
    flex: 1 0 0% !important;
  }

  .col-sm-1 { width: 8.33333333% !important; }
  .col-sm-2 { width: 16.66666667% !important; }
  .col-sm-3 { width: 25% !important; }
  .col-sm-4 { width: 33.33333333% !important; }
  .col-sm-5 { width: 41.66666667% !important; }
  .col-sm-6 { width: 50% !important; }
  .col-sm-7 { width: 58.33333333% !important; }
  .col-sm-8 { width: 66.66666667% !important; }
  .col-sm-9 { width: 75% !important; }
  .col-sm-10 { width: 83.33333333% !important; }
  .col-sm-11 { width: 91.66666667% !important; }
  .col-sm-12 { width: 100% !important; }

  .ms-sm-auto { margin-left: auto !important; }
  .me-sm-auto { margin-right: auto !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }

  .app-sidebar {
    width: 200px !important;
  }
}

/* Medium Screens (≥768px) */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-grid {
    display: grid !important;
  }

  .col-md {
    flex: 1 0 0% !important;
  }

  .col-md-1 { width: 8.33333333% !important; }
  .col-md-2 { width: 16.66666667% !important; }
  .col-md-3 { width: 25% !important; }
  .col-md-4 { width: 33.33333333% !important; }
  .col-md-5 { width: 41.66666667% !important; }
  .col-md-6 { width: 50% !important; }
  .col-md-7 { width: 58.33333333% !important; }
  .col-md-8 { width: 66.66666667% !important; }
  .col-md-9 { width: 75% !important; }
  .col-md-10 { width: 83.33333333% !important; }
  .col-md-11 { width: 91.66666667% !important; }
  .col-md-12 { width: 100% !important; }

  .ms-md-auto { margin-left: auto !important; }
  .me-md-auto { margin-right: auto !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }

  .app-content {
    padding: 2rem !important;
  }

  .mobile-menu-icon {
    display: none !important;
  }

  .app-mobile-menu-open .app-sidebar {
    position: relative !important;
    top: auto !important;
    box-shadow: none !important;
  }
}

/* Large Screens (≥992px) */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-grid {
    display: grid !important;
  }

  .col-lg {
    flex: 1 0 0% !important;
  }

  .col-lg-1 { width: 8.33333333% !important; }
  .col-lg-2 { width: 16.66666667% !important; }
  .col-lg-3 { width: 25% !important; }
  .col-lg-4 { width: 33.33333333% !important; }
  .col-lg-5 { width: 41.66666667% !important; }
  .col-lg-6 { width: 50% !important; }
  .col-lg-7 { width: 58.33333333% !important; }
  .col-lg-8 { width: 66.66666667% !important; }
  .col-lg-9 { width: 75% !important; }
  .col-lg-10 { width: 83.33333333% !important; }
  .col-lg-11 { width: 91.66666667% !important; }
  .col-lg-12 { width: 100% !important; }

  .ms-lg-auto { margin-left: auto !important; }
  .me-lg-auto { margin-right: auto !important; }
  .p-lg-4 { padding: 1.5rem !important; }
}

/* Extra Large Screens (≥1200px) */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-grid {
    display: grid !important;
  }

  .col-xl {
    flex: 1 0 0% !important;
  }

  .col-xl-1 { width: 8.33333333% !important; }
  .col-xl-2 { width: 16.66666667% !important; }
  .col-xl-3 { width: 25% !important; }
  .col-xl-4 { width: 33.33333333% !important; }
  .col-xl-5 { width: 41.66666667% !important; }
  .col-xl-6 { width: 50% !important; }
  .col-xl-7 { width: 58.33333333% !important; }
  .col-xl-8 { width: 66.66666667% !important; }
  .col-xl-9 { width: 75% !important; }
  .col-xl-10 { width: 83.33333333% !important; }
  .col-xl-11 { width: 91.66666667% !important; }
  .col-xl-12 { width: 100% !important; }

  .app-sidebar {
    width: 260px !important;
  }
}

/* Extra Extra Large Screens (≥1400px) */
@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }

  .d-xxl-block {
    display: block !important;
  }

  .d-xxl-inline {
    display: inline !important;
  }

  .d-xxl-inline-block {
    display: inline-block !important;
  }

  .d-xxl-flex {
    display: flex !important;
  }

  .d-xxl-grid {
    display: grid !important;
  }

  .col-xxl {
    flex: 1 0 0% !important;
  }

  .col-xxl-1 { width: 8.33333333% !important; }
  .col-xxl-2 { width: 16.66666667% !important; }
  .col-xxl-3 { width: 25% !important; }
  .col-xxl-4 { width: 33.33333333% !important; }
  .col-xxl-5 { width: 41.66666667% !important; }
  .col-xxl-6 { width: 50% !important; }
  .col-xxl-7 { width: 58.33333333% !important; }
  .col-xxl-8 { width: 66.66666667% !important; }
  .col-xxl-9 { width: 75% !important; }
  .col-xxl-10 { width: 83.33333333% !important; }
  .col-xxl-11 { width: 91.66666667% !important; }
  .col-xxl-12 { width: 100% !important; }
}

/* Print Styles */
@media print {
  .no-print,
  .d-print-none {
    display: none !important;
  }

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

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }
}

/* Touch-Friendly Targets */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem;
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header {
    padding: 0.5rem 1rem;
  }

  .app-content {
    padding: 1rem;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .btn,
  .form-control {
    border-width: 1px;
  }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}