/* =========================================================
   PRIMARY COLOR & SIDEBAR
   ========================================================= */
   :root {
    --vz-primary: #052648;
    --vz-primary-rgb: 5, 38, 72;
  }
  
  /* Sidebar color override - light mode only */
  :root[data-sidebar=dark]:not([data-bs-theme=dark]) {
    --vz-vertical-menu-bg: #052648;
    --vz-vertical-menu-border: #052648;
    --vz-twocolumn-menu-iconview-bg: #052648;
  }
  
  /* =========================================================
     PAGE BACKGROUND OVERLAY (z-index: 0 - Background Layer)
     ========================================================= */
  
  /* Page content container - creates positioning context */
  .page-content {
      position: relative;
      /* No z-index here - let it be in normal flow */
      /* This ensures it doesn't create a stacking context that interferes with modals */
  }
  
  /* Background overlay - stays at the very bottom */
  .page-bg-overlay-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: clamp(100px, 35vh, 450px);
      z-index: 0;                 /* 👈 Background layer - lowest priority */
      pointer-events: none;       /* Allow clicks to pass through */
      /* No isolation - keep it simple to avoid stacking context issues */
  }
  
  .page-bg-overlay {
      position: absolute;
      inset: 0;
      background: var(--vz-vertical-menu-bg, #052648);
      z-index: 0;                 /* Explicitly set to 0 - background layer */
  }
  
  /* Page content container - normal flow, above overlay */
  .page-content .container-fluid {
      position: relative;
      /* No z-index needed - normal document flow is sufficient */
      /* Content will naturally appear above the overlay */
  }
  
  /* =========================================================
     HEADER & BREADCRUMB COLORS
     ========================================================= */
  .dashboard-header-text,
  .page-header-text {
      color: #ffffff;
  }
  
  .dashboard-description-text {
      color: rgba(255, 255, 255, 0.9);
  }
  
  /* Dark mode safety */
  [data-bs-theme=dark] .dashboard-header-text,
  [data-bs-theme=dark] .dashboard-description-text {
      color: #ffffff;
  }
  
  /* Breadcrumb inside overlay */
  .breadcrumb {
      --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.6);
      margin-bottom: 0;
  }
  
  .breadcrumb-item a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
  }
  
  .breadcrumb-item a:hover {
      color: #ffffff;
  }
  
  .breadcrumb-item.active {
      color: rgba(255, 255, 255, 0.9);
  }
  
  /* =========================================================
     FILE UPLOAD INTERACTIONS (NO STACKING IMPACT)
     ========================================================= */
  .file-upload-wrapper {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .file-upload-wrapper:hover {
      border-color: var(--vz-primary);
      background-color: #f1f5f9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(5, 38, 72, 0.1);
  }
  
  .file-upload-wrapper.dragover {
      border-color: #0ab39c;
      background-color: #f0fdf4;
      transform: scale(1.02) translateY(-2px);
      box-shadow: 0 8px 20px rgba(10, 179, 156, 0.15);
  }
  
  .file-upload-wrapper.uploaded {
      border-color: #0ab39c;
      background-color: #f0fdf4;
  }
  
  .file-upload-icon {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 8px rgba(5, 38, 72, 0.2);
  }
  
  .file-upload-wrapper:hover .file-upload-icon {
      transform: scale(1.1);
  }
  
  .file-upload-wrapper.dragover .file-upload-icon,
  .file-upload-wrapper.uploaded .file-upload-icon {
      background-color: #0ab39c;
      transform: scale(1.15);
  }
  
  /* Responsive tweaks */
  @media (max-width: 767.98px) {
      .file-upload-wrapper {
          padding: 1rem;
          min-height: 100px;
      }
  
      .file-upload-icon {
          width: 45px;
          height: 45px;
      }
  }
  
  /* =========================================================
     BOOTSTRAP LAYERS - PRESERVE ORIGINAL DESIGN
     ========================================================= */
  
  /* Ensure overlay never interferes with Bootstrap components */
  /* Bootstrap z-index hierarchy (from bootstrap.css):
     - Modal: 1055
     - Modal backdrop: 1050
     - Offcanvas: 1045
     - Offcanvas backdrop: 1040
     - Topbar (app.css): 1002
     - Sidebar (app.css): 1002-1004
     - Our overlay: 0 (background layer)
  */
  
  /* Ensure overlay stays in background and doesn't interfere */
  /* Since overlay is z-index: 0 and Bootstrap components are 1040-1055, */
  /* there's no conflict. Modals/offcanvas are fixed positioned and appended to body. */
  
  /* Plugins inside modals should appear above modal content */
  .modal .select2-container--open,
  .modal .flatpickr-calendar.open {
      z-index: 1056 !important;  /* Above modal (1055) */
  }
  
  /*# sourceMappingURL=custom.min.css.map */