/*
 * Responsive Helper Classes
 * Additional responsive utilities beyond Bootstrap's defaults
 */

/* Responsive text utilities - Using clamp for fluid typography */
.text-responsive {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.text-responsive-lg {
  font-size: clamp(1rem, 3vw, 1.25rem);
}

.text-responsive-xl {
  font-size: clamp(1.125rem, 4vw, 1.5rem);
}

/* Reading-optimized container */
.container-reading {
  max-width: 65ch;
}

/* Responsive spacing utilities - Simplified using Bootstrap spacing scale */
@media (max-width: 576px) {
  .p-responsive { padding: 1rem !important; }
  .px-responsive { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-responsive { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

@media (min-width: 577px) {
  .p-responsive { padding: 1.5rem !important; }
  .px-responsive { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .py-responsive { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* Responsive grid helpers */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Responsive card grids */
.card-grid-responsive {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 576px) {
  .card-grid-responsive {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (min-width: 768px) {
  .card-grid-responsive {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }
}

@media (min-width: 992px) {
  .card-grid-responsive {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2.5rem;
  }
}

/* Dashboard specific responsive grids */
.dashboard-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (min-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 1fr 2fr;
    gap: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Aspect ratio helpers */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* Responsive visibility helpers */
.visible-mobile {
  display: none;
}

.visible-desktop {
  display: block;
}

@media (max-width: 768px) {
  .visible-mobile {
    display: block;
  }
  
  .visible-desktop {
    display: none;
  }
  
  .hidden-mobile {
    display: none !important;
  }
  
  /* Mobile navigation helpers */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    /* Ensure smooth transitions */
    transition: none !important;
  }
  
  /* Prevent horizontal scroll on mobile */
  body {
    overflow-x: hidden;
  }
  
  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  /* Touch-friendly sizing */
  .touch-target {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  
  /* Improve touch scrolling */
  .sidebar,
  .main-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Safe area support for devices with notches */
  .navbar {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }
  
  .sidebar {
    padding-top: env(safe-area-inset-top);
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .hidden-tablet {
    display: none !important;
  }
  
  .visible-tablet {
    display: block !important;
  }
  
  /* Tablet sidebar spacing */
  .main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
  }
  
  .sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-width-collapsed);
  }
  
  /* Optimize content spacing for tablets */
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Better card layouts for tablets */
  .card {
    margin-bottom: 1.5rem;
  }
  
  /* Optimize button groups for touch */
  .btn-group .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
  
  /* Better table responsiveness */
  .table-responsive {
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }
}

@media (min-width: 1025px) {
  .hidden-desktop {
    display: none !important;
  }
  
  .visible-desktop {
    display: block !important;
  }
  
  /* Desktop sidebar spacing */
  .main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
  }
  
  .sidebar.collapsed + .main-content {
    margin-left: var(--sidebar-width-collapsed);
  }
  
  /* Desktop optimizations */
  .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  /* Better spacing for large screens */
  .card {
    margin-bottom: 2rem;
  }
  
  /* Optimize for wide screens */
  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* Mobile-specific layout adjustments */
@media (max-width: 576px) {
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
  
  .btn-sm {
    min-height: 36px;
    padding: 0.25rem 0.75rem;
  }
}
/
* Large desktop optimizations (1200px+) */
@media (min-width: 1200px) {
  .container-fluid {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  
  /* Utilize full screen width effectively */
  .row {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  
  .row > * {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  /* Better card layouts for large screens */
  .card-deck-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }
  
  /* Optimize dashboard layouts */
  .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  /* Better chart containers */
  .chart-container {
    min-height: 400px;
  }
}

/* Extra large screens (1400px+) */
@media (min-width: 1400px) {
  .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
  }
  
  /* Prevent content from being too wide */
  .content-wrapper {
    max-width: 1500px;
  }
  
  /* Better sidebar utilization */
  .sidebar {
    width: 320px;
  }
  
  .main-content {
    margin-left: 320px;
  }
  
  .sidebar.collapsed + .main-content {
    margin-left: 80px;
  }
}

/* Responsive breakpoint helpers */
.breakpoint-xs { display: block; }
.breakpoint-sm,
.breakpoint-md,
.breakpoint-lg,
.breakpoint-xl { display: none; }

@media (min-width: 576px) {
  .breakpoint-xs { display: none; }
  .breakpoint-sm { display: block; }
}

@media (min-width: 768px) {
  .breakpoint-sm { display: none; }
  .breakpoint-md { display: block; }
}

@media (min-width: 992px) {
  .breakpoint-md { display: none; }
  .breakpoint-lg { display: block; }
}

@media (min-width: 1200px) {
  .breakpoint-lg { display: none; }
  .breakpoint-xl { display: block; }
}

/* Responsive text alignment */
@media (max-width: 767px) {
  .text-sm-center { text-align: center !important; }
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .text-md-center { text-align: center !important; }
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
}

@media (min-width: 992px) {
  .text-lg-center { text-align: center !important; }
  .text-lg-left { text-align: left !important; }
  .text-lg-right { text-align: right !important; }
}

/* Responsive spacing utilities */
@media (min-width: 768px) {
  .p-md-responsive { padding: var(--spacing-lg) !important; }
  .px-md-responsive { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
  .py-md-responsive { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
  .m-md-responsive { margin: var(--spacing-lg) !important; }
  .mx-md-responsive { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
  .my-md-responsive { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
}

@media (min-width: 992px) {
  .p-lg-responsive { padding: var(--spacing-xl) !important; }
  .px-lg-responsive { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
  .py-lg-responsive { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
  .m-lg-responsive { margin: var(--spacing-xl) !important; }
  .mx-lg-responsive { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
  .my-lg-responsive { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
}

/* Responsive flex utilities */
@media (max-width: 767px) {
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-row { flex-direction: row !important; }
  .justify-content-sm-center { justify-content: center !important; }
  .align-items-sm-center { align-items: center !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .flex-md-column { flex-direction: column !important; }
  .flex-md-row { flex-direction: row !important; }
  .justify-content-md-center { justify-content: center !important; }
  .align-items-md-center { align-items: center !important; }
}

@media (min-width: 992px) {
  .flex-lg-column { flex-direction: column !important; }
  .flex-lg-row { flex-direction: row !important; }
  .justify-content-lg-center { justify-content: center !important; }
  .align-items-lg-center { align-items: center !important; }
}