/* ui/dialog.css -- modal dialog and bottom-sheet primitives.
 *
 * Includes a small button system shared by dialog action footers. The full
 * Button primitive lives in components further along; this is the minimum to
 * paint a complete dialog without leaning on other modules.
 */

.acms-dialog-root {
  position: relative;
}

.acms-dialog__backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-quint);
}

.acms-dialog__backdrop.is-visible { opacity: 1; }
.acms-dialog__backdrop.is-leaving { opacity: 0; }

.acms-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 8px));
  width: calc(100vw - 32px);
  max-width: 560px;
  min-width: 320px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--bg-elevated);
  color: var(--fg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--space-7);
  z-index: var(--z-modal);
  opacity: 0;
  transition:
    opacity var(--duration-normal) var(--ease-out-quint),
    transform var(--duration-normal) var(--ease-out-quint);
}

.acms-dialog.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.acms-dialog.is-leaving {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px));
}

.acms-dialog:focus { outline: none; }
.acms-dialog:focus-visible { outline: none; box-shadow: var(--shadow-modal), var(--focus-ring); }

.acms-dialog__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}

.acms-dialog__body {
  margin: 0 0 var(--space-7);
  font-size: var(--font-size-sm);
  color: var(--fg-secondary);
  line-height: 1.55;
}

.acms-dialog__helper {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--fg-secondary);
  line-height: 1.55;
}

.acms-dialog__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
}

.acms-dialog__error {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--status-danger-fg);
}

.acms-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Bottom-sheet variant (mobile, or explicit sheet()). */
@media (max-width: 767px) {
  .acms-dialog:not(.acms-dialog--sheet) {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5) var(--space-5) var(--space-7);
  }
  .acms-dialog:not(.acms-dialog--sheet).is-visible {
    transform: translateY(0);
  }
  .acms-dialog:not(.acms-dialog--sheet).is-leaving {
    transform: translateY(100%);
  }
}

.acms-dialog--sheet {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  transform: translateY(100%);
  max-height: 80vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

.acms-dialog--sheet.is-visible { transform: translateY(0); }
.acms-dialog--sheet.is-leaving { transform: translateY(100%); }

.acms-dialog__handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-3);
}

/* ----------------------------------------------------------------
 * Minimal button system. Dialog footer + toast actions share this.
 * ---------------------------------------------------------------- */
.acms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out-quint),
    border-color var(--duration-fast) var(--ease-out-quint),
    color var(--duration-fast) var(--ease-out-quint);
}

.acms-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.acms-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Sizes */
.acms-btn--sm { height: 28px; padding: 0 10px; font-size: var(--font-size-sm); }
.acms-btn--md { height: 36px; padding: 0 14px; font-size: 14px; }
.acms-btn--lg { height: 44px; padding: 0 18px; font-size: var(--font-size-base); }

/* Variants */
.acms-btn--primary {
  background: var(--accent-bg);
  color: var(--accent-fg);
  border-color: var(--accent-bg);
}
.acms-btn--primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.acms-btn--primary:active { background: var(--accent-active); }

.acms-btn--secondary {
  background: var(--bg-elevated);
  color: var(--fg-primary);
  border-color: var(--border-default);
}
.acms-btn--secondary:hover { background: var(--bg-inset); border-color: var(--border-strong); }

.acms-btn--tertiary {
  background: var(--bg-inset);
  color: var(--fg-primary);
}
.acms-btn--tertiary:hover { background: var(--bg-elevated); border-color: var(--border-default); }

.acms-btn--ghost {
  background: transparent;
  color: var(--fg-secondary);
}
.acms-btn--ghost:hover { background: var(--bg-inset); }

.acms-btn--danger {
  background: var(--status-danger-fg);
  color: var(--bg-elevated);
  border-color: var(--status-danger-fg);
}
.acms-btn--danger:hover {
  background: var(--status-danger-fg-hover);
  border-color: var(--status-danger-fg-hover);
}

/* ----------------------------------------------------------------
 * Minimal input -- used by prompt(). Full Input primitive component
 * lives separately and follows the same conventions.
 * ---------------------------------------------------------------- */
.acms-input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: 14px;
  color: var(--fg-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration-fast) var(--ease-out-quint),
    box-shadow var(--duration-fast) var(--ease-out-quint);
}

.acms-input:hover { border-color: var(--border-strong); }
.acms-input:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

textarea.acms-input {
  height: auto;
  min-height: 80px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: var(--line-height-snug);
}