// _breakpoints.scss - Centralized responsive breakpoints for the entire market_dashboard project

// ==========================================
// BREAKPOINT VALUES
// ==========================================
// Following Bootstrap's breakpoint system for consistency
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// Custom breakpoints for specific use cases
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
$breakpoint-wide: 1440px;
$breakpoint-ultrawide: 1920px;

// ==========================================
// BREAKPOINT MAP
// ==========================================
$breakpoints: (
  'xs': $breakpoint-xs,
  'sm': $breakpoint-sm,
  'md': $breakpoint-md,
  'lg': $breakpoint-lg,
  'xl': $breakpoint-xl,
  'xxl': $breakpoint-xxl,
  'mobile': $breakpoint-mobile,
  'tablet': $breakpoint-tablet,
  'desktop': $breakpoint-desktop,
  'wide': $breakpoint-wide,
  'ultrawide': $breakpoint-ultrawide
);

// ==========================================
// BREAKPOINT UTILITY FUNCTIONS
// ==========================================
@function breakpoint($name) {
  @if map-has-key($breakpoints, $name) {
    @return map-get($breakpoints, $name);
  }
  
  @warn "Unknown breakpoint: #{$name}";
  @return null;
}

@function breakpoint-next($name) {
  $breakpoint-names: map-keys($breakpoints);
  $n: index($breakpoint-names, $name);
  
  @if $n != null and $n < length($breakpoint-names) {
    @return nth($breakpoint-names, $n + 1);
  }
  
  @return null;
}

@function breakpoint-min($name) {
  $min: breakpoint($name);
  @return if($min != 0, $min, null);
}

@function breakpoint-max($name) {
  $next: breakpoint-next($name);
  @return if($next, breakpoint($next) - 0.02, null);
}

// ==========================================
// RESPONSIVE MIXINS
// ==========================================
// Media query for minimum width (mobile-first approach)
@mixin respond-above($breakpoint) {
  $min: breakpoint-min($breakpoint);
  
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media query for maximum width
@mixin respond-below($breakpoint) {
  $max: breakpoint-max($breakpoint);
  
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  }
}

// Media query for specific breakpoint range
@mixin respond-between($lower, $upper) {
  $min: breakpoint-min($lower);
  $max: breakpoint-max($upper);
  
  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include respond-above($lower) {
      @content;
    }
  } @else if $min == null {
    @include respond-below($upper) {
      @content;
    }
  }
}

// Media query for specific breakpoint only
@mixin respond-only($breakpoint) {
  @include respond-between($breakpoint, $breakpoint) {
    @content;
  }
}

// ==========================================
// COMMON RESPONSIVE PATTERNS
// ==========================================
// Mobile-first responsive pattern
@mixin mobile-first {
  // Mobile styles (default)
  @content;
  
  @include respond-above('sm') {
    @content;
  }
}

// Desktop-first responsive pattern (less common, but sometimes needed)
@mixin desktop-first {
  // Desktop styles (default)
  @content;
  
  @include respond-below('lg') {
    @content;
  }
}

// Hide on specific breakpoints
@mixin hide-on($breakpoint) {
  @include respond-only($breakpoint) {
    display: none !important;
  }
}

// Show only on specific breakpoints
@mixin show-only-on($breakpoint) {
  display: none !important;
  
  @include respond-only($breakpoint) {
    display: block !important;
  }
}

// ==========================================
// CONTAINER MIXINS
// ==========================================
@mixin container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@mixin make-container($max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
)) {
  @include container-fluid;
  
  @each $breakpoint, $container-max-width in $max-widths {
    @include respond-above($breakpoint) {
      max-width: $container-max-width;
    }
  }
}

// ==========================================
// GRID SYSTEM HELPERS
// ==========================================
@mixin make-col($size, $columns: 12) {
  flex: 0 0 auto;
  width: percentage(divide($size, $columns));
}

@mixin make-col-auto {
  flex: 0 0 auto;
  width: auto;
}

@mixin make-col-offset($size, $columns: 12) {
  $num: divide($size, $columns);
  margin-left: if($num == 0, 0, percentage($num));
}

// ==========================================
// UTILITY FUNCTIONS
// ==========================================
@function divide($dividend, $divisor) {
  @return calc($dividend / $divisor);
}