/**
 * Modal Variant Styles
 * @countermeasure/web-components
 *
 * Supplements the base cmm-modal styles in ui.css with variant-specific
 * styles for confirm dialogs, alerts, loading states, and transitions.
 */

/* ============================================================================
   GLASS SURFACE PARITY (matches src/react/primitives/modal.tsx)
   Overrides the legacy base styles in ui.css. Imported after ui.css, so these
   win the cascade. Tokens resolved from src/styles/theme.css + tokens.css.
   ============================================================================ */

/* Overlay: bg-black/60 + backdrop-blur-sm */
.cmm-modal {
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
}

/* Panel: bg-glass + backdrop-blur-xl + border-border-glass + rounded-xl + shadow-xl */
.cmm-modal__dialog {
  box-sizing: border-box;
  background: var(--color-glass);
  backdrop-filter: blur(24px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.cmm-modal__header {
  border-bottom: 1px solid var(--color-border-glass);
}

.cmm-modal__title {
  color: var(--color-foreground);
}

.cmm-modal__body {
  color: var(--color-foreground-muted);
}

.cmm-modal__footer {
  border-top: 1px solid var(--color-border-glass);
}

/* Close button: text-foreground-muted, opacity-70 → 100 on hover, primary focus ring */
.cmm-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  color: var(--color-foreground-muted);
  opacity: 0.7;
  transition: opacity 150ms;
}

.cmm-modal__close:hover {
  opacity: 1;
  color: var(--color-foreground-muted);
}

.cmm-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

.cmm-modal__close-icon {
  width: 1rem;
  height: 1rem;
}

/* ============================================================================
   FOOTER BUTTONS
   Emitted by src/components/modal/index.ts as
   .cmm-modal__btn + --primary | --secondary | --destructive.
   Visual parity with src/styles/components/copy-button.css.
   ============================================================================ */
.cmm-modal__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.875rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: all 150ms;
}

.cmm-modal__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

.cmm-modal__btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.cmm-modal__btn--primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-color: transparent;
}

.cmm-modal__btn--primary:hover {
  background-color: color-mix(in oklab, var(--color-primary) 92%, black);
}

.cmm-modal__btn--secondary {
  background-color: var(--color-glass);
  color: var(--color-foreground);
  border-color: var(--color-border-glass);
}

.cmm-modal__btn--secondary:hover {
  background-color: var(--color-glass-hover);
}

.cmm-modal__btn--destructive {
  background-color: var(--color-destructive);
  color: var(--color-destructive-foreground);
  border-color: transparent;
}

.cmm-modal__btn--destructive:hover {
  background-color: color-mix(in oklab, var(--color-destructive) 92%, black);
}

/* ============================================================================
   MODAL TRANSITIONS
   ============================================================================ */
.cmm-modal__dialog--entering {
  animation: cmm-modal-enter var(--transition-normal, 200ms) ease-out;
}

.cmm-modal__dialog--exiting {
  animation: cmm-modal-exit var(--transition-normal, 200ms) ease-in forwards;
}

@keyframes cmm-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cmm-modal-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Backdrop fade */
.cmm-modal--entering {
  animation: cmm-modal-backdrop-enter var(--transition-normal, 200ms) ease-out;
}

.cmm-modal--exiting {
  animation: cmm-modal-backdrop-exit var(--transition-normal, 200ms) ease-in forwards;
}

@keyframes cmm-modal-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cmm-modal-backdrop-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ============================================================================
   CONFIRM VARIANT
   ============================================================================ */
.cmm-modal--confirm .cmm-modal__body {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.cmm-modal--confirm .cmm-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cmm-modal--confirm .cmm-modal__cancel {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms),
              border-color var(--transition-fast, 150ms);
}

.cmm-modal--confirm .cmm-modal__cancel:hover {
  background-color: hsl(var(--accent));
}

.cmm-modal--confirm .cmm-modal__confirm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  transition: opacity var(--transition-fast, 150ms);
}

.cmm-modal--confirm .cmm-modal__confirm:hover {
  opacity: 0.9;
}

/* Destructive confirm */
.cmm-modal--confirm-destructive .cmm-modal__confirm {
  background-color: hsl(var(--danger));
  color: hsl(var(--danger-foreground));
}

/* ============================================================================
   ALERT VARIANT
   ============================================================================ */
.cmm-modal--alert .cmm-modal__body {
  text-align: center;
  padding: 2rem 1.5rem;
}

.cmm-modal--alert .cmm-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
}

.cmm-modal--alert .cmm-modal__icon--success {
  background-color: hsl(var(--success) / 0.15);
  color: hsl(var(--success));
}

.cmm-modal--alert .cmm-modal__icon--error {
  background-color: hsl(var(--danger) / 0.15);
  color: hsl(var(--danger));
}

.cmm-modal--alert .cmm-modal__icon--warning {
  background-color: hsl(var(--warning) / 0.15);
  color: hsl(var(--warning));
}

.cmm-modal--alert .cmm-modal__icon--info {
  background-color: hsl(var(--info) / 0.15);
  color: hsl(var(--info));
}

.cmm-modal--alert .cmm-modal__footer {
  justify-content: center;
}

.cmm-modal--alert .cmm-modal__ok {
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  transition: opacity var(--transition-fast, 150ms);
}

.cmm-modal--alert .cmm-modal__ok:hover {
  opacity: 0.9;
}

/* ============================================================================
   LOADING OVERLAY
   ============================================================================ */
.cmm-modal__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--card) / 0.8);
  backdrop-filter: blur(2px);
  border-radius: 0.75rem;
}

.cmm-modal__loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--info));
  border-radius: 50%;
  animation: cmm-spin 0.75s linear infinite;
}

/* ============================================================================
   FOCUS TRAP HIGHLIGHT
   ============================================================================ */
.cmm-modal__dialog:focus-visible {
  outline: none;
}

.cmm-modal__dialog [data-focus-guard] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Highlight first focusable element when modal opens */
.cmm-modal--focus-visible .cmm-modal__dialog :focus-visible {
  outline: 2px solid hsl(var(--focus-ring));
  outline-offset: 2px;
}

/* ============================================================================
   SIZE VARIANTS
   ============================================================================ */
.cmm-modal--sm .cmm-modal__dialog {
  max-width: 24rem;
}

/* Default: mirrors the React twin's max-w-lg */
.cmm-modal--md .cmm-modal__dialog {
  max-width: 32rem;
}

.cmm-modal--lg .cmm-modal__dialog {
  max-width: 48rem;
}

.cmm-modal--xl .cmm-modal__dialog {
  max-width: 64rem;
}

.cmm-modal--full .cmm-modal__dialog {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  width: 100%;
  height: 100%;
}
