/* =====================================================
   Weswing.eu — Dialogs
   Modals, alerts, confirms, prompts e preloader
   Compatível com light/dark theme via tokens do main.css
   Nota: o JS usa fallback nativo em mobile; este UI é desktop/tablet.
===================================================== */

.app-dialog--lock{
  overflow: hidden !important;
}

/* =====================================================
   Overlay
===================================================== */
.app-dialog-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #000 58%, transparent);
  backdrop-filter: blur(6px);
}

/* =====================================================
   Modal
===================================================== */
.app-dialog{
  width: min(380px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  border-radius: var(--radius-lg);
  background: #101014;
  color: #faf7fb;
  border: 1px solid #ffffff1b;
  box-shadow: 0 24px 70px #0000008c, 0 0 0 1px #7851a91c;
  overflow: hidden;
}

.app-dialog__header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #ffffff12;
  background: #ffffff05;
}

.app-dialog__title{
  margin: 0;
  color: #c9addc;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.app-dialog__close{
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #ffffff1b;
  background: #ffffff08;
  color: #d8d0dc;
  box-shadow: none;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  transition: opacity .16s ease, transform .12s ease, background .16s ease, border-color .16s ease;
}
.app-dialog__close:hover{
  opacity: .92;
  border-color: #c9addc80;
}
.app-dialog__close:active{ transform: translateY(1px); }
.app-dialog__close:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

.app-dialog__body{
  padding: 14px 16px;
  background: #101014;
}

.app-dialog__msg{
  margin: 0;
  color: #b9b1bd;
  font-size: .9rem;
  line-height: 1.45;
}

.app-dialog__footer{
  /* Segue a disposição vertical das ações dos formulários. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 14px 12px;
  border-top: 1px solid #ffffff12;
  background: #ffffff05;
}

/* =====================================================
   Alert
===================================================== */
.app-dialog-overlay.app-dialog--alert .app-dialog__body{
  min-height: 76px;
  display: flex;
  align-items: center;
  padding: 16px 18px;
}

.app-dialog-overlay.app-dialog--alert .app-dialog__footer{
  justify-content: flex-end;
}

/* =====================================================
   Botões dentro dos dialogs
===================================================== */
.app-btn{
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--ink-900);
  white-space: nowrap;
}

.app-dialog .app-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 46px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}

.app-btn--secondary{
  background: #ffffff08;
  color: #d8d0dc;
  border-color: #ffffff1b;
}

.app-btn--primary{
  background: linear-gradient(115deg, #7451a8, #8b547e);
  border-color: #c7a6e04d;
  color: #fff;
  box-shadow: 0 8px 30px #7851a927;
}

.app-btn--primary:hover,
.app-btn--secondary:hover,
.app-btn:hover{
  opacity: .92;
}

/* =====================================================
   Campo do prompt
===================================================== */
.app-field{
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.app-field__label{
  color: #bdb5c1;
  font-size: .9rem;
  font-weight: 700;
}

.app-input{
  height: 44px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #ffffff1b;
  background: #ffffff09;
  color: #faf7fb;
  padding: 0 12px;
  outline: none;
  box-shadow: var(--shadow-sm);
}
.app-input::placeholder{ color: #958d9b; }
.app-input:focus{
  border-color: #b58ad2;
  box-shadow: 0 0 0 3px #a46fc52b;
}

/* =====================================================
   Preloader
===================================================== */
.app-preloader{
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #07070bd9;
  backdrop-filter: blur(8px);
}

.app-preloader__card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  width: min(320px, calc(100vw - 48px));
  padding: 18px;
  border: 1px solid #c7a6e061;
  border-radius: 18px;
  background: linear-gradient(135deg, #18101d, #101014 62%);
  box-shadow: 0 24px 70px #0000009c, 0 0 0 1px #7851a92e;
}

.app-preloader__spinner{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #ffffff1f;
  border-top-color: #c9addc;
  border-right-color: #8b547e;
  animation: app-spin .9s linear infinite;
}

.app-preloader__text{
  color: #faf7fb;
  font-weight: 700;
}

@keyframes app-spin{
  to{ transform: rotate(360deg); }
}

/* =====================================================
   Tones
===================================================== */
.app-dialog-overlay.app-dialog--danger{
  --dialog-tone: #d994ae;
  --dialog-tone-ink: #fff;
}

.app-dialog-overlay.app-dialog--info{
  --dialog-tone: #c9addc;
  --dialog-tone-ink: #fff;
}

.app-dialog-overlay.app-dialog--success{
  --dialog-tone: #c9addc;
  --dialog-tone-ink: #fff;
}

.app-dialog-overlay.app-dialog--warning{
  --dialog-tone: #c9addc;
  --dialog-tone-ink: #fff;
}

.app-dialog-overlay.app-dialog--danger .app-dialog,
.app-dialog-overlay.app-dialog--info .app-dialog,
.app-dialog-overlay.app-dialog--success .app-dialog,
.app-dialog-overlay.app-dialog--warning .app-dialog{
  border-color: color-mix(in srgb, var(--dialog-tone) 28%, var(--border-soft));
  box-shadow:
    var(--shadow-lg, var(--shadow-md)),
    0 0 0 1px color-mix(in srgb, var(--dialog-tone) 14%, transparent);
}

.app-dialog-overlay.app-dialog--danger .app-dialog__title,
.app-dialog-overlay.app-dialog--info .app-dialog__title,
.app-dialog-overlay.app-dialog--success .app-dialog__title,
.app-dialog-overlay.app-dialog--warning .app-dialog__title{
  color: var(--dialog-tone);
}

.app-dialog-overlay.app-dialog--danger .app-dialog__header::before,
.app-dialog-overlay.app-dialog--info .app-dialog__header::before,
.app-dialog-overlay.app-dialog--success .app-dialog__header::before,
.app-dialog-overlay.app-dialog--warning .app-dialog__header::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--dialog-tone);
}

.app-dialog-overlay.app-dialog--danger .app-dialog .app-btn.app-btn--primary,
.app-dialog-overlay.app-dialog--info .app-dialog .app-btn.app-btn--primary,
.app-dialog-overlay.app-dialog--success .app-dialog .app-btn.app-btn--primary,
.app-dialog-overlay.app-dialog--warning .app-dialog .app-btn.app-btn--primary{
  background: linear-gradient(115deg, #7451a8, #8b547e) !important;
  border-color: #c7a6e04d !important;
  color: #fff !important;
}