// LLM UI Responsive Utilities
// Provides responsive breakpoints and utilities

// Responsive breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// Responsive display utilities
@media (max-width: $breakpoint-sm - 1) {
  .llm-d-sm-none { display: none !important; }
  .llm-d-sm-inline { display: inline !important; }
  .llm-d-sm-inline-block { display: inline-block !important; }
  .llm-d-sm-block { display: block !important; }
  .llm-d-sm-flex { display: flex !important; }
  .llm-d-sm-inline-flex { display: inline-flex !important; }
  .llm-d-sm-grid { display: grid !important; }
}

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1) {
  .llm-d-md-none { display: none !important; }
  .llm-d-md-inline { display: inline !important; }
  .llm-d-md-inline-block { display: inline-block !important; }
  .llm-d-md-block { display: block !important; }
  .llm-d-md-flex { display: flex !important; }
  .llm-d-md-inline-flex { display: inline-flex !important; }
  .llm-d-md-grid { display: grid !important; }
}

@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 1) {
  .llm-d-lg-none { display: none !important; }
  .llm-d-lg-inline { display: inline !important; }
  .llm-d-lg-inline-block { display: inline-block !important; }
  .llm-d-lg-block { display: block !important; }
  .llm-d-lg-flex { display: flex !important; }
  .llm-d-lg-inline-flex { display: inline-flex !important; }
  .llm-d-lg-grid { display: grid !important; }
}

@media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 1) {
  .llm-d-xl-none { display: none !important; }
  .llm-d-xl-inline { display: inline !important; }
  .llm-d-xl-inline-block { display: inline-block !important; }
  .llm-d-xl-block { display: block !important; }
  .llm-d-xl-flex { display: flex !important; }
  .llm-d-xl-inline-flex { display: inline-flex !important; }
  .llm-d-xl-grid { display: grid !important; }
}

@media (min-width: $breakpoint-xl) {
  .llm-d-xxl-none { display: none !important; }
  .llm-d-xxl-inline { display: inline !important; }
  .llm-d-xxl-inline-block { display: inline-block !important; }
  .llm-d-xxl-block { display: block !important; }
  .llm-d-xxl-flex { display: flex !important; }
  .llm-d-xxl-inline-flex { display: inline-flex !important; }
  .llm-d-xxl-grid { display: grid !important; }
}

// Responsive text alignment
@media (max-width: $breakpoint-sm - 1) {
  .llm-text-sm-left { text-align: left !important; }
  .llm-text-sm-center { text-align: center !important; }
  .llm-text-sm-right { text-align: right !important; }
}

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1) {
  .llm-text-md-left { text-align: left !important; }
  .llm-text-md-center { text-align: center !important; }
  .llm-text-md-right { text-align: right !important; }
}

@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 1) {
  .llm-text-lg-left { text-align: left !important; }
  .llm-text-lg-center { text-align: center !important; }
  .llm-text-lg-right { text-align: right !important; }
}

@media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 1) {
  .llm-text-xl-left { text-align: left !important; }
  .llm-text-xl-center { text-align: center !important; }
  .llm-text-xl-right { text-align: right !important; }
}

@media (min-width: $breakpoint-xl) {
  .llm-text-xxl-left { text-align: left !important; }
  .llm-text-xxl-center { text-align: center !important; }
  .llm-text-xxl-right { text-align: right !important; }
}

// Responsive spacing utilities
@media (max-width: $breakpoint-sm - 1) {
  .llm-m-sm-0 { margin: 0 !important; }
  .llm-m-sm-1 { margin: $spacing-xs !important; }
  .llm-m-sm-2 { margin: $spacing-sm !important; }
  .llm-m-sm-3 { margin: $spacing-md !important; }
  .llm-m-sm-4 { margin: $spacing-lg !important; }
  .llm-m-sm-5 { margin: $spacing-xl !important; }
  
  .llm-p-sm-0 { padding: 0 !important; }
  .llm-p-sm-1 { padding: $spacing-xs !important; }
  .llm-p-sm-2 { padding: $spacing-sm !important; }
  .llm-p-sm-3 { padding: $spacing-md !important; }
  .llm-p-sm-4 { padding: $spacing-lg !important; }
  .llm-p-sm-5 { padding: $spacing-xl !important; }
}

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1) {
  .llm-m-md-0 { margin: 0 !important; }
  .llm-m-md-1 { margin: $spacing-xs !important; }
  .llm-m-md-2 { margin: $spacing-sm !important; }
  .llm-m-md-3 { margin: $spacing-md !important; }
  .llm-m-md-4 { margin: $spacing-lg !important; }
  .llm-m-md-5 { margin: $spacing-xl !important; }
  
  .llm-p-md-0 { padding: 0 !important; }
  .llm-p-md-1 { padding: $spacing-xs !important; }
  .llm-p-md-2 { padding: $spacing-sm !important; }
  .llm-p-md-3 { padding: $spacing-md !important; }
  .llm-p-md-4 { padding: $spacing-lg !important; }
  .llm-p-md-5 { padding: $spacing-xl !important; }
}

@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 1) {
  .llm-m-lg-0 { margin: 0 !important; }
  .llm-m-lg-1 { margin: $spacing-xs !important; }
  .llm-m-lg-2 { margin: $spacing-sm !important; }
  .llm-m-lg-3 { margin: $spacing-md !important; }
  .llm-m-lg-4 { margin: $spacing-lg !important; }
  .llm-m-lg-5 { margin: $spacing-xl !important; }
  
  .llm-p-lg-0 { padding: 0 !important; }
  .llm-p-lg-1 { padding: $spacing-xs !important; }
  .llm-p-lg-2 { padding: $spacing-sm !important; }
  .llm-p-lg-3 { padding: $spacing-md !important; }
  .llm-p-lg-4 { padding: $spacing-lg !important; }
  .llm-p-lg-5 { padding: $spacing-xl !important; }
}

@media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 1) {
  .llm-m-xl-0 { margin: 0 !important; }
  .llm-m-xl-1 { margin: $spacing-xs !important; }
  .llm-m-xl-2 { margin: $spacing-sm !important; }
  .llm-m-xl-3 { margin: $spacing-md !important; }
  .llm-m-xl-4 { margin: $spacing-lg !important; }
  .llm-m-xl-5 { margin: $spacing-xl !important; }
  
  .llm-p-xl-0 { padding: 0 !important; }
  .llm-p-xl-1 { padding: $spacing-xs !important; }
  .llm-p-xl-2 { padding: $spacing-sm !important; }
  .llm-p-xl-3 { padding: $spacing-md !important; }
  .llm-p-xl-4 { padding: $spacing-lg !important; }
  .llm-p-xl-5 { padding: $spacing-xl !important; }
}

@media (min-width: $breakpoint-xl) {
  .llm-m-xxl-0 { margin: 0 !important; }
  .llm-m-xxl-1 { margin: $spacing-xs !important; }
  .llm-m-xxl-2 { margin: $spacing-sm !important; }
  .llm-m-xxl-3 { margin: $spacing-md !important; }
  .llm-m-xxl-4 { margin: $spacing-lg !important; }
  .llm-m-xxl-5 { margin: $spacing-xl !important; }
  
  .llm-p-xxl-0 { padding: 0 !important; }
  .llm-p-xxl-1 { padding: $spacing-xs !important; }
  .llm-p-xxl-2 { padding: $spacing-sm !important; }
  .llm-p-xxl-3 { padding: $spacing-md !important; }
  .llm-p-xxl-4 { padding: $spacing-lg !important; }
  .llm-p-xxl-5 { padding: $spacing-xl !important; }
}

// Responsive flex utilities
@media (max-width: $breakpoint-sm - 1) {
  .llm-flex-sm-row { flex-direction: row !important; }
  .llm-flex-sm-column { flex-direction: column !important; }
  .llm-flex-sm-wrap { flex-wrap: wrap !important; }
  .llm-flex-sm-nowrap { flex-wrap: nowrap !important; }
}

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1) {
  .llm-flex-md-row { flex-direction: row !important; }
  .llm-flex-md-column { flex-direction: column !important; }
  .llm-flex-md-wrap { flex-wrap: wrap !important; }
  .llm-flex-md-nowrap { flex-wrap: nowrap !important; }
}

@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 1) {
  .llm-flex-lg-row { flex-direction: row !important; }
  .llm-flex-lg-column { flex-direction: column !important; }
  .llm-flex-lg-wrap { flex-wrap: wrap !important; }
  .llm-flex-lg-nowrap { flex-wrap: nowrap !important; }
}

@media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 1) {
  .llm-flex-xl-row { flex-direction: row !important; }
  .llm-flex-xl-column { flex-direction: column !important; }
  .llm-flex-xl-wrap { flex-wrap: wrap !important; }
  .llm-flex-xl-nowrap { flex-wrap: nowrap !important; }
}

@media (min-width: $breakpoint-xl) {
  .llm-flex-xxl-row { flex-direction: row !important; }
  .llm-flex-xxl-column { flex-direction: column !important; }
  .llm-flex-xxl-wrap { flex-wrap: wrap !important; }
  .llm-flex-xxl-nowrap { flex-wrap: nowrap !important; }
}

// Responsive width utilities
@media (max-width: $breakpoint-sm - 1) {
  .llm-w-sm-25 { width: 25% !important; }
  .llm-w-sm-50 { width: 50% !important; }
  .llm-w-sm-75 { width: 75% !important; }
  .llm-w-sm-100 { width: 100% !important; }
  .llm-w-sm-auto { width: auto !important; }
}

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1) {
  .llm-w-md-25 { width: 25% !important; }
  .llm-w-md-50 { width: 50% !important; }
  .llm-w-md-75 { width: 75% !important; }
  .llm-w-md-100 { width: 100% !important; }
  .llm-w-md-auto { width: auto !important; }
}

@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 1) {
  .llm-w-lg-25 { width: 25% !important; }
  .llm-w-lg-50 { width: 50% !important; }
  .llm-w-lg-75 { width: 75% !important; }
  .llm-w-lg-100 { width: 100% !important; }
  .llm-w-lg-auto { width: auto !important; }
}

@media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 1) {
  .llm-w-xl-25 { width: 25% !important; }
  .llm-w-xl-50 { width: 50% !important; }
  .llm-w-xl-75 { width: 75% !important; }
  .llm-w-xl-100 { width: 100% !important; }
  .llm-w-xl-auto { width: auto !important; }
}

@media (min-width: $breakpoint-xl) {
  .llm-w-xxl-25 { width: 25% !important; }
  .llm-w-xxl-50 { width: 50% !important; }
  .llm-w-xxl-75 { width: 75% !important; }
  .llm-w-xxl-100 { width: 100% !important; }
  .llm-w-xxl-auto { width: auto !important; }
} 