// _mixins.scss - Centralized component mixins for the entire market_dashboard project

// ==========================================
// BUTTON MIXINS
// ==========================================
@mixin button-base {
  display: inline-block;
  font-weight: $font-weight-medium;
  line-height: $line-height-normal;
  text-align: center;
  text-decoration: $text-decoration-none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: $border-width-thin solid transparent;
  border-radius: $border-radius-md;
  transition: $transition-button;
  
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
  }
  
  &:disabled,
  &.disabled {
    pointer-events: none;
    opacity: $opacity-60;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $min-width: null) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  border-radius: $border-radius;
  
  @if $min-width {
    min-width: $min-width;
  }
}

@mixin button-hover-effect {
  @include hover-lift;
  
  &:active {
    transform: translateY(0);
  }
}

@mixin button-variant($background, $border, $color: $bootstrap-white, $hover-background: null, $hover-border: null, $hover-color: null) {
  color: $color;
  background-color: $background;
  border-color: $border;
  
  $hover-bg: if($hover-background, $hover-background, darken($background, 7.5%));
  $hover-border-color: if($hover-border, $hover-border, darken($border, 10%));
  $hover-text-color: if($hover-color, $hover-color, $color);
  
  &:hover {
    color: $hover-text-color;
    background-color: $hover-bg;
    border-color: $hover-border-color;
  }
  
  &:focus {
    color: $hover-text-color;
    background-color: $hover-bg;
    border-color: $hover-border-color;
  }
  
  &:active {
    color: $hover-text-color;
    background-color: darken($background, 10%);
    border-color: darken($border, 12.5%);
  }
}

// ==========================================
// FORM CONTROL MIXINS
// ==========================================
@mixin form-control-base {
  display: block;
  width: 100%;
  padding: $spacing-sm $spacing-md;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-normal;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: $border-width-thin solid var(--bs-border-color);
  border-radius: $border-radius-md;
  transition: $transition-colors, $transition-shadow;
  
  &:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
  }
  
  &::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
  }
  
  &:disabled,
  &[readonly] {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
  }
}

@mixin form-label-base($width: null) {
  display: inline-block;
  font-weight: $font-weight-medium;
  margin-bottom: $spacing-sm;
  
  @if $width {
    width: $width;
  }
}

// Chart control specific label mixin
@mixin chart-control-label($width: $label-width-md) {
  label {
    @include form-label-base($width);
    display: inline-block !important;
    font-weight: $font-weight-medium;
  }
}

// ==========================================
// CARD AND PANEL MIXINS
// ==========================================
@mixin card-base {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--bs-body-bg);
  background-clip: border-box;
  border: $border-width-thin solid var(--bs-border-color);
  border-radius: $border-radius-md;
}

@mixin panel-style {
  @include card-base;
  @include card-shadow;
  padding: $spacing-md;
  height: 100%;
  overflow: hidden;
}

@mixin panel-header {
  background-color: var(--bs-secondary-bg);
  margin: -$spacing-md;
  margin-bottom: $spacing-md;
  
  h3 {
    display: grid;
    grid-template-columns: auto 20px;
    background-color: var(--bs-secondary-bg);
    font-weight: $font-weight-bold;
    font-size: $font-size-lg;
    padding: $spacing-sm;
    padding-left: $spacing-lg;
    border-bottom: $border-width-thin solid var(--bs-border-color);
    margin: 0;
    color: var(--bs-body-color);
    
    span {
      display: flex;
      align-items: center;
      
      i {
        margin-right: $spacing-sm;
        color: var(--bs-primary);
      }
    }
    
    > i {
      cursor: pointer;
      color: var(--bs-secondary);
      font-size: $font-size-md;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        color: var(--bs-danger);
      }
    }
  }
}

// ==========================================
// SIDEBAR MIXINS
// ==========================================
@mixin sidebar-base {
  position: fixed;
  top: 0;
  bottom: 0;
  width: $sidebar-width;
  text-align: left;
  @include sidebar-transition;
  z-index: $z-index-sidebar;
}

@mixin sidebar-transition {
  transition: $transition-sidebar;
}

@mixin sidebar-collapsed {
  margin-left: $sidebar-margin-collapsed;
  padding-right: $spacing-sm;
  
  #sidebar-toggle {
    top: -2rem;
  }
  
  ~ #page-content {
    margin-left: $sidebar-collapsed-width;
  }
  
  > *:not(:first-child) {
    margin-left: -6rem;
    margin-right: 6rem;
  }
}

// ==========================================
// NAVIGATION MIXINS
// ==========================================
@mixin navbar-brand {
  display: inline-block;
  padding-top: $spacing-sm;
  padding-bottom: $spacing-sm;
  margin-right: $spacing-lg;
  font-size: $font-size-xl;
  line-height: inherit;
  white-space: nowrap;
  text-decoration: $text-decoration-none;
}

@mixin nav-link {
  display: block;
  padding: $spacing-sm $spacing-md;
  text-decoration: $text-decoration-none;
  transition: $transition-colors;
  
  &:hover,
  &:focus {
    text-decoration: $text-decoration-none;
  }
  
  &.disabled {
    color: var(--bs-nav-link-disabled-color);
    pointer-events: none;
    cursor: default;
  }
}

// ==========================================
// CHART MIXINS
// ==========================================
@mixin chart-container {
  width: 100%;
  height: 100%;
  min-height: $chart-min-height;
  position: relative;
  background: var(--bs-body-bg);
  border-radius: $border-radius-md;
  overflow: hidden;
  transition: $transition-colors;
  
  // Ensure plotly chart fills container
  .plotly-graph-div {
    width: 100% !important;
    height: 100% !important;
  }
}

@mixin chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: $chart-min-height;
  
  .loading-message {
    font-size: $font-size-lg;
    color: var(--bs-secondary-color);
    font-style: italic;
  }
}

// ==========================================
// TABLE MIXINS
// ==========================================
@mixin table-base {
  width: 100%;
  border-collapse: collapse;
  
  th, td {
    padding: $table-cell-padding;
    text-align: center;
    border-bottom: $border-width-thin solid var(--bs-border-color);
  }
  
  th {
    font-weight: $font-weight-semibold;
    background-color: var(--bs-secondary-bg);
  }
}

// ==========================================
// UTILITY MIXINS
// ==========================================
@mixin visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@mixin clearfix {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

@mixin center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin full-height-container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

// ==========================================
// SPINNER/LOADING MIXINS
// ==========================================
@mixin spinner-container {
  @include center-content;
  height: calc(100vh - 300px);
}

// ==========================================
// RESPONSIVE UTILITIES
// ==========================================
@mixin responsive-padding($base-padding: $spacing-md) {
  padding: $base-padding;
  
  @include respond-below('md') {
    padding: $base-padding * 0.75;
  }
  
  @include respond-below('sm') {
    padding: $base-padding * 0.5;
  }
}

@mixin responsive-font-size($base-size: $font-size-base) {
  font-size: $base-size;
  
  @include respond-below('md') {
    font-size: $base-size * 0.9;
  }
  
  @include respond-below('sm') {
    font-size: $base-size * 0.8;
  }
}