/* ============================================
   DC Dash Design System
   Centralized design tokens for consistent UI
   ============================================ */

:root {
    /* ----------------------------------------
       Z-Index Scale (Bootstrap 5 compatible)
       ---------------------------------------- */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-sidebar: 1045;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* ----------------------------------------
       Responsive Breakpoints (Bootstrap 5)
       ---------------------------------------- */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* ----------------------------------------
       Spacing Scale (4pt base)
       ---------------------------------------- */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */

    /* ----------------------------------------
       Modal Variants
       ----------------------------------------
       Usage:
       - default: bg-dark text-white (standard CRUD)
       - danger:  bg-danger text-white (destructive)
       - warning: bg-warning text-dark (caution)
       - brand:   bg-interact text-white (feature)
       ---------------------------------------- */
}

/* ============================================
   Utility Classes
   ============================================ */

/* Autocomplete dropdown positioning */
.autocomplete-dropdown {
    z-index: var(--z-popover);
    background-color: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Toast container override */
.toast-container {
    z-index: var(--z-toast);
}

/* Sidebar z-index consistency */
#sidebar {
    z-index: var(--z-sidebar);
}

/* Modal backdrop */
.modal-backdrop {
    z-index: var(--z-modal-backdrop);
}

/* Modal dialog */
.modal {
    z-index: var(--z-modal);
}