// _z-index.scss - Centralized z-index management for the entire market_dashboard project

// ==========================================
// BOOTSTRAP Z-INDEX SCALE
// ==========================================
// Following Bootstrap's z-index scale for consistency
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-offcanvas: 1045;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
$z-index-toast: 1080;

// ==========================================
// CUSTOM APPLICATION Z-INDEXES
// ==========================================
// Base level (0-99)
$z-index-base: 0;
$z-index-behind: -1;

// Content level (100-199)
$z-index-content: 100;
$z-index-sidebar: 100;
$z-index-panel: 110;
$z-index-chart: 120;

// Interactive level (200-299)
$z-index-button: 200;
$z-index-form: 210;

// Navigation level (300-399)
$z-index-navbar: 300;
$z-index-header: 310;
$z-index-breadcrumb: 320;

// Overlay level (400-499)
$z-index-overlay: 400;
$z-index-loading: 410;
$z-index-spinner: 420;

// Floating level (500-999)
$z-index-floating: 500;
$z-index-dropdown-custom: 600;
$z-index-notification: 700;
$z-index-alert: 800;

// Component specific z-indexes
$z-index-divider: 1;
$z-index-chart-modebar: 5;
$z-index-sidebar-toggle: 10;
$z-index-sidebar-buttons: 20;
$z-index-color-mode-switch: 30;
$z-index-user-avatar: 40;

// ==========================================
// Z-INDEX GROUPS
// ==========================================
// Group related z-indexes for easier management

// Chart components
$z-chart-background: $z-index-base;
$z-chart-content: $z-index-chart;
$z-chart-controls: $z-index-chart + 1;
$z-chart-overlay: $z-index-chart + 2;

// Sidebar components
$z-sidebar-base: $z-index-sidebar;
$z-sidebar-content: $z-index-sidebar + 1;
$z-sidebar-header: $z-index-sidebar + 2;
$z-sidebar-buttons: $z-index-sidebar + 3;

// Modal components
$z-modal-backdrop: $z-index-modal-backdrop;
$z-modal-content: $z-index-modal;
$z-modal-header: $z-index-modal + 1;
$z-modal-close: $z-index-modal + 2;

// Navigation components
$z-nav-base: $z-index-navbar;
$z-nav-dropdown: $z-index-navbar + 1;
$z-nav-submenu: $z-index-navbar + 2;

// ==========================================
// Z-INDEX UTILITY FUNCTIONS
// ==========================================
@function z($layer) {
  @if map-has-key($z-index-map, $layer) {
    @return map-get($z-index-map, $layer);
  }
  
  @warn "Unknown z-index layer: #{$layer}";
  @return null;
}

// Z-index map for utility function
$z-index-map: (
  'behind': $z-index-behind,
  'base': $z-index-base,
  'content': $z-index-content,
  'sidebar': $z-index-sidebar,
  'panel': $z-index-panel,
  'chart': $z-index-chart,
  'button': $z-index-button,
  'form': $z-index-form,
  'navbar': $z-index-navbar,
  'header': $z-index-header,
  'overlay': $z-index-overlay,
  'loading': $z-index-loading,
  'floating': $z-index-floating,
  'dropdown': $z-index-dropdown,
  'sticky': $z-index-sticky,
  'fixed': $z-index-fixed,
  'modal-backdrop': $z-index-modal-backdrop,
  'offcanvas': $z-index-offcanvas,
  'modal': $z-index-modal,
  'popover': $z-index-popover,
  'tooltip': $z-index-tooltip,
  'toast': $z-index-toast,
  'notification': $z-index-notification,
  'alert': $z-index-alert
);

// ==========================================
// Z-INDEX MIXINS
// ==========================================
@mixin z-index($layer) {
  z-index: z($layer);
}

@mixin above($element-z-index) {
  z-index: $element-z-index + 1;
}

@mixin below($element-z-index) {
  z-index: $element-z-index - 1;
}

// Stacking context mixin
@mixin stacking-context {
  position: relative;
  z-index: 0;
}