/* CorridorOS Z-Index Layer Scale
 * Single source of truth for all overlay z-indices
 * Never use random z-index values - always reference these tokens
 */

:root {
  /* Desktop layer */
  --z-desktop: 0;
  --z-wallpaper: 0;
  
  /* Window layer */
  --z-window-base: 100;
  --z-window-max: 999;
  
  /* Dock/Taskbar layer */
  --z-dock: 200;
  --z-taskbar: 200;
  
  /* Overlay root - all overlays live here */
  --z-overlay-root: 300;
  
  /* Overlay types (within overlay root) */
  --z-popover: 300;
  --z-menu: 400;
  --z-tooltip: 500;
  --z-dropdown: 400;
  
  /* Modal layer */
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-dialog: 1001;
  
  /* Notifications */
  --z-notify: 1100;
  --z-toast: 1100;
  
  /* System critical */
  --z-loader: 2000;
  --z-debug: 9999;
}

/* Desktop layer - base */
#desktop-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-desktop);
  overflow: hidden;
}

.desktop-wallpaper {
  position: absolute;
  inset: 0;
  z-index: var(--z-wallpaper);
}

/* Window layer */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  /* z-index set dynamically between var(--z-window-base) and var(--z-window-max) */
}

.window.focused {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.window-titlebar {
  user-select: none;
  -webkit-user-select: none;
}

/* Dock/Taskbar */
.dock,
.taskbar {
  position: fixed;
  z-index: var(--z-dock);
}

/* Overlay root - CRITICAL: all overlays must be children of this */
#ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay-root);
  /* NEVER apply transform, filter, or backdrop-filter here */
}

/* Overlays - positioned within ui-root */
.overlay {
  position: fixed;
  pointer-events: auto;
}

.overlay-menu {
  z-index: var(--z-menu);
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 200px;
}

.overlay-tooltip {
  z-index: var(--z-tooltip);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 300px;
  pointer-events: none;
}

.overlay-popover {
  z-index: var(--z-popover);
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.overlay-dialog {
  z-index: var(--z-modal);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  pointer-events: auto;
  animation: fadeIn 0.2s ease-out;
}

.overlay-toast {
  z-index: var(--z-notify);
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 16px;
  min-width: 300px;
  animation: slideInRight 0.3s ease-out;
}

/* Debug overlay */
.debug-overlay {
  z-index: var(--z-debug);
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #0f0;
  font-family: monospace;
  font-size: 12px;
  padding: 12px;
  border-bottom-left-radius: 8px;
  pointer-events: auto;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .overlay-menu,
  .overlay-dialog {
    max-width: calc(100vw - 32px);
  }
  
  .overlay-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    min-width: 0;
  }
}

/* Ensure transforms don't create new stacking contexts inside overlays */
/* Overlays can use transforms for animations without affecting stacking */

/* Toast stacking */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  z-index: var(--z-notify);
}

.toast-container > * {
  pointer-events: auto;
}