/* =========================================================
   Dialogs
   ========================================================= */

.app-dialog {
  width:
    min(
      520px,
      calc(100vw - 28px)
    );

  max-width: 100%;
  max-height:
    calc(100dvh - 28px);

  padding: 0;

  border: 0;

  background: transparent;

  overflow: visible;
}

.app-dialog--wide {
  width:
    min(
      760px,
      calc(100vw - 32px)
    );
}

.app-dialog::backdrop {
  background:
    rgba(8, 28, 34, 0.48);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}


/* =========================================================
   Estrutura
   ========================================================= */

.app-dialog-card {
  max-height:
    calc(100dvh - 28px);

  padding:
    var(--space-5);

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-xl);

  display: grid;

  gap:
    var(--space-4);

  overflow-y: auto;

  background:
    var(--surface-card);

  box-shadow:
    var(--shadow-3);
}

.app-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap:
    var(--space-4);
}

.app-dialog-head > div {
  min-width: 0;
}

.app-dialog-head h2 {
  margin:
    4px 0 0;

  color:
    var(--text-primary);

  font-size: 22px;
  line-height: 1.2;

  letter-spacing:
    -0.025em;
}


/* =========================================================
   Fechar
   ========================================================= */

.dialog-close {
  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  padding: 0;

  border: 0;
  border-radius:
    var(--radius-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    var(--surface-muted);

  color:
    var(--text-secondary);

  font-size: 22px;
  line-height: 1;

  cursor: pointer;

  transition:
    color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast);
}

.dialog-close:hover {
  color:
    var(--text-primary);

  background:
    var(--border-subtle);
}

.dialog-close:focus-visible {
  outline: none;

  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   Conteúdo
   ========================================================= */

.dialog-message {
  margin: 0;

  color:
    var(--text-secondary);

  line-height: 1.55;
}

.dialog-highlight {
  padding:
    12px 14px;

  border:
    1px solid
    var(--border-default);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-subtle);

  color:
    var(--text-primary);
}

.dialog-error {
  padding:
    10px 12px;

  border:
    1px solid
    #efcbc7;

  border-radius:
    var(--radius-md);

  background:
    var(--danger-100);

  color:
    var(--danger-700);

  font-weight: 700;
}


/* =========================================================
   Formulários dentro de dialog
   ========================================================= */

.dialog-form {
  display: grid;

  gap:
    var(--space-4);
}

.dialog-form > label {
  display: grid;

  gap:
    var(--space-2);

  color:
    var(--text-secondary);

  font-size:
    var(--font-size-sm);

  font-weight: 750;
}

.dialog-form > label small {
  color:
    var(--text-tertiary);

  font-weight: 600;
}


/* =========================================================
   Ações
   ========================================================= */

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap:
    var(--space-2);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {
  .app-dialog,
  .app-dialog--wide {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100dvh - 20px);
  }

  .app-dialog-card {
    max-height:
      calc(100dvh - 20px);

    padding:
      var(--space-4);
  }

  .app-dialog-head h2 {
    font-size: 20px;
  }

  .dialog-actions {
    align-items: stretch;

    flex-direction: column-reverse;
  }

  .dialog-actions .button {
    width: 100%;
  }
}