/* ========================================================
   Dialogs — modals, confirm dialogs, overlays.
   ======================================================== */

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--transition-fast);
}

/* Modal box */
.modal-box {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.2s;
}

.modal-box h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  color: var(--c-text);
}

.modal-box .modal-body {
  font-size: var(--font-size-base);
  color: var(--c-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
}

.modal-box .modal-body strong {
  color: var(--c-error);
}

/* Modal actions */
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-actions button {
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.btn-cancel {
  background: var(--c-surface-hover);
  color: #4b5563;
}

.btn-cancel:hover {
  background: #e5e7eb;
}

.btn-danger {
  background: var(--c-error);
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-primary {
  background: var(--c-accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--c-accent-hover);
}

/* Permission dialog (larger, more detail) */
.permission-dialog .modal-box {
  max-width: 520px;
}

.permission-dialog .risk-high { color: var(--c-error); font-weight: 600; }
.permission-dialog .risk-medium { color: var(--c-warning); font-weight: 600; }
.permission-dialog .risk-low { color: var(--c-success); font-weight: 600; }

.permission-dialog .cmd-preview {
  background: var(--c-surface-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  margin: var(--spacing-md) 0;
  white-space: pre-wrap;
  word-break: break-all;
}