/**
 * Task Modal Dialog Core Styles
 * P0-002: Essential dialog element styling for both light and dark themes
 * Ensures proper viewport coverage and theme support
 */

/* ============================================
   DIALOG BACKDROP - Theme-aware
   ============================================ */

.task-modal::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeInBackdrop 0.3s ease-out;
  position: fixed;
  inset: 0;
  z-index: 99999;
}

/* Light theme backdrop - slightly different opacity */
[data-theme="light"] .task-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@keyframes fadeInBackdrop {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ============================================
   DIALOG ELEMENT - Full viewport coverage
   ============================================ */

dialog.task-modal {
  /* Ensure COMPLETE viewport coverage */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;

  /* Ensure dialog is above everything */
  z-index: 100000;

  /* Theme-aware background */
  background: var(--bg-primary);

  /* CRITICAL: Flex layout for proper scrolling */
  display: flex;
  flex-direction: column;

  /* Smooth entry animation */
  animation: slideUpDialog 0.3s ease-out;
}

@keyframes slideUpDialog {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* When dialog is not open, hide it completely */
dialog.task-modal:not([open]) {
  display: none;
  visibility: hidden;
  opacity: 0;
}