/*
 * atlas-app.css — complementos do Atlas Meet sobre o CSS original do app (app.css).
 * NÃO altera tipografia, cores ou layout originais: só (1) troca a marca e (2) estiliza os
 * poucos elementos que não existiam na captura, usando as variáveis de tema originais.
 */

/* ---------- marca ---------- */
.discordLogo__921c5 {
  background: url("/assets/brand/logo-white.svg") no-repeat left center / contain !important;
}
.childWrapper__6e9f8 .atlasHomeIcon { width: 30px; height: 22px; display: block; }

/* ---------- formulários de auth ---------- */
.atlasFieldError { color: var(--text-feedback-critical); margin-top: 8px; text-align: left; }
.atlasFieldHint { margin-top: 8px; text-align: left; }
.atlasFormError {
  background: var(--background-feedback-critical, rgba(242, 63, 67, .1));
  border: 1px solid var(--border-feedback-critical, var(--text-feedback-critical));
  border-radius: var(--radius-sm, 8px); color: var(--text-default);
  margin-bottom: 20px; padding: 10px 12px; text-align: left;
}
.wrapper__72c38[data-error="true"] { border-color: var(--text-feedback-critical) !important; }
.atlasAuthHeader { text-align: center; }
.atlasAuthIcon { display: flex; justify-content: center; margin-bottom: 16px; }
.atlasAuthIcon img { border-radius: 18px; }
.atlasRegister { text-align: left; }
.atlasTerms a { color: var(--text-link); }
.atlasRow { display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; }

.atlasDateRow { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; gap: 12px; }
.atlasSelect .wrapper__72c38 { position: relative; }
.atlasSelectInput { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--text-default); cursor: pointer; width: 100%; padding-right: 28px; }
.atlasSelectInput option { background: var(--background-surface-high, #2b2d31); color: var(--text-default); }
.atlasSelectInput:invalid { color: var(--text-muted); }
.atlasSelectCaret { color: var(--interactive-icon-default, var(--text-muted)); pointer-events: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

.atlasCheckboxRow { align-items: flex-start; cursor: pointer; display: flex; gap: 10px; text-align: left; }
.atlasCheckboxRow input { position: absolute; opacity: 0; pointer-events: none; }
.atlasCheckbox {
  border: 1px solid var(--border-strong, var(--interactive-text-default)); border-radius: 6px; flex: 0 0 24px;
  height: 24px; position: relative; transition: background-color .15s ease, border-color .15s ease;
}
.atlasCheckboxRow input:checked + .atlasCheckbox { background: var(--brand-500, #5865f2); border-color: var(--brand-500, #5865f2); }
.atlasCheckboxRow input:checked + .atlasCheckbox::after {
  border: solid #fff; border-width: 0 2px 2px 0; content: ""; height: 11px; left: 8px; position: absolute; top: 4px; transform: rotate(45deg); width: 5px;
}
.atlasCheckboxRow input:focus-visible + .atlasCheckbox { outline: 2px solid var(--focus-primary, #00a8fc); outline-offset: 2px; }

.atlasCodeInputs { display: flex; gap: 8px; justify-content: center; }
.atlasCodeBox { flex: 0 0 48px; height: 56px; padding: 0 !important; }
.atlasCodeBox input { font-size: 24px; font-weight: 600; height: 100%; text-align: center; width: 100%; }

button[aria-busy="true"] { opacity: .7; pointer-events: none; }
button[aria-busy="true"] .buttonChildren_a22cb0 span::after { animation: atlasDots 1.2s infinite steps(4); content: ""; display: inline-block; width: 1.2em; text-align: left; }
@keyframes atlasDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- modais/toasts genéricos usados pelo JS ---------- */
.atlasLayer { align-items: center; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 1000; padding: 16px; }
.atlasLayer .scrim__40128 { opacity: 1; animation: atlasFade .15s ease-out; }
.atlasLayer .root__49fc1 { animation: atlasPop .18s cubic-bezier(.2,.9,.3,1.2); position: relative; }
@keyframes atlasFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlasPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.atlasModalBody { color: var(--text-default); padding: 0 16px 16px; }
.atlasModalHeader { padding: 16px; position: relative; }
.atlasModalHeader .atlasModalClose { background: none; border: 0; color: var(--interactive-icon-default, var(--text-muted)); cursor: pointer; padding: 4px; position: absolute; right: 12px; top: 12px; }
.atlasModalHeader .atlasModalClose:hover { color: var(--interactive-icon-hover, var(--text-default)); }
.atlasModalFooter { background: var(--modal-footer-background, transparent); border-radius: 0 0 var(--radius-md) var(--radius-md); display: flex; gap: 8px; justify-content: flex-end; padding: 16px; }

.atlasToastHost { bottom: 24px; display: flex; flex-direction: column; gap: 8px; left: 50%; position: fixed; transform: translateX(-50%); z-index: 2000; pointer-events: none; }
.atlasToast {
  align-items: center; animation: atlasPop .2s ease-out; background: var(--background-surface-highest, #111214);
  border: 1px solid var(--border-normal); border-radius: var(--radius-sm, 8px); box-shadow: var(--shadow-high, 0 8px 16px rgba(0,0,0,.24));
  color: var(--text-default); display: flex; font-size: 14px; gap: 8px; padding: 10px 14px; pointer-events: auto;
}
.atlasToast.error { border-color: var(--text-feedback-critical); }
.atlasToast.success { border-color: var(--text-feedback-positive, #23a55a); }

@media (max-width: 485px) {
  .atlasDateRow { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .atlasCodeBox { flex-basis: 40px; height: 50px; }
}