/* =========================================================
   Layout for account forms — login, password, registration
   Colors: Obsidian-Nebula tokens via mp-tokens.css
   ========================================================= */


/* ── Reset ─────────────────────────────────────────────── */

input, select, textarea, button {
  -webkit-appearance: none;
  appearance:         none;
  border-radius:      0;
  font-family:        inherit;
  line-height:        normal;
  background-color:   inherit;
  color:              inherit;
}


/* ── Base ──────────────────────────────────────────────── */

html {
  font-size: 62.5%;
  height:    100%;
}

body {
  margin:      0;
  min-height:  100vh;
  font-family: Roboto, sans-serif;
  font-size:   1.6rem;
  background:  var(--mp-surface);       
  color:       var(--mp-text-primary);  
  overflow-x:  hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

h1 {
  font-size:     clamp(2.8rem, 2.4364rem + 1.5515vw, 3.6rem);
  font-weight:   700;
  line-height:   1.2;
  margin-bottom: 1rem;
}

h2 {
  font-size:   clamp(2.4rem, 1.9455rem + 1.9394vw, 3.4rem);
  font-weight: 600;
  line-height: 1.2;
}

a {
  margin-left: 1rem;
  color:       var(--mp-text-secondary);   
}


/* ── Shell & container ─────────────────────────────────── */

.app-shell {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

.app-container {
  width:           min(95%, 120rem);
  margin-inline:   auto;
  padding-block:   clamp(2rem, 5vh, 4rem);
  padding-top:     clamp(5.6rem, 5vw, 6.4rem);
  display:         flex;
  align-items:     center;
  justify-content: center;
}


/* ── Auth card ─────────────────────────────────────────── */

.auth-card {
  width:      100%;
  max-width:  48rem;
  padding:    clamp(2.4rem, 4vw, 3.2rem);
  background: var(--mp-card);         
  color:      var(--mp-text-muted);   
  border-radius: 1.6rem;
  box-shadow:
    0 1.2rem 3.2rem color-mix(in srgb, var(--mp-void) 18%, transparent),
    0 0.2rem 0.6rem color-mix(in srgb, var(--mp-void) 12%, transparent);
                                          
  border: solid 2px var(--mp-border); 
}

.auth-header-card {
  background:    var(--mp-base);      
  color:         var(--mp-accent-rose);   
  border:        2px solid var(--mp-border); 
  border-radius: 1.2rem;
  padding:       1rem;
  margin-bottom: 5rem;
  text-align:    center;
}

.auth-header {
  display:        flex;
  flex-direction: column;
  gap:            0.8rem;
}

.auth-header .auth-title {
  margin:     0;
  font-weight: 600;
  color:       var(--mp-text-muted);     
}

.auth-header .auth-subtitle {
  margin:    0;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  opacity:   0.9;
  color:     var(--mp-accent-rose);       
}


/* ── Auth content ──────────────────────────────────────── */

.auth-content {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.6rem, 3vh, 2.4rem);
}

.auth-content__title {
  margin:      0;
  font-size:   clamp(2.4rem, 2.1273rem + 1.1636vw, 3rem);
  font-weight: 600;
}

.auth-content__hint {
  margin:    0;
  font-size: clamp(1.6rem, 1.5091rem + 0.3879vw, 1.8rem);
}


/* ── Auth form & fields ────────────────────────────────── */

.auth-form {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.2rem, 2vh, 1.8rem);
}

.auth-field {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.auth-field__label {
  font-size:   1.4rem;
  font-weight: 500;
  color:       var(--mp-text-muted);  
}

.auth-field__input {
  width:         100%;
  padding:       0.9rem 1.2rem;
  background:    var(--mp-card) !important;  
  color:         var(--mp-text-primary) !important;         
  border-bottom: 3px solid var(--mp-input-border); 
  border-top:    3px solid var(--mp-card);    
  border-left:   3px solid var(--mp-card);    
  border-right:  3px solid var(--mp-card);    
  font-size:     1.5rem;
}

/* Defeat UA autofill background (Chrome/Edge/Safari) */
.auth-field__input:-webkit-autofill,
.auth-field__input:-webkit-autofill:hover,
.auth-field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 10rem var(--mp-card) inset !important;
  -webkit-text-fill-color: var(--mp-text-primary) !important;
  caret-color: var(--mp-text-primary);
}

.auth-field__password {
  display: flex;
  gap:     0.4rem;
}

.auth-field__toggle {
  border-radius: 0.8rem;
  border:        1px solid var(--mp-border); 
  background:    transparent;
  padding-inline: 1.2rem;
  cursor:        pointer;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
}

.auth-row {
  display:         flex;
  justify-content: space-between;
  font-size:       1.4rem;
}

.form-check-label {
  color: var(--mp-text-secondary);           
}


/* ── Auth buttons ──────────────────────────────────────── */

.auth-actions {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  margin-top:     clamp(1.6rem, 3vh, 2.4rem);
}

.auth-button {
  width:         100%;
  padding-block: 1rem;
  border-radius: 999px;
  border:        none;
  font-size:     1.5rem;
  font-weight:   500;
  cursor:        pointer;
}

.auth-button--primary {
  background: var(--mp-elevated);           
  color:      var(--mp-accent-emerald);     
  border:     2px solid var(--mp-border); 
}

.auth-button--secondary {
  background: var(--mp-card);              
  color:      var(--mp-text-secondary);    
}

.auth-button--external {
  background: var(--mp-elevated);          
  color:      var(--mp-text-primary);      
}


/* ── Mat icon overrides ────────────────────────────────── */

body .mat-icon {
  width:    2.4rem !important;
  height:   2.4rem !important;
  font-size: clamp(2.4rem, 3vw, 2.8rem);
  display:   inline-flex !important;
  align-items:     center;
  justify-content: center;

  svg {
    width:  100%;
    height: 100%;
    fill:   var(--mp-accent-rose);        
  }
}

.mat-mdc-icon-button .mat-icon {
  width:     2.4rem !important;
  height:    2.4rem !important;
  font-size: clamp(2.4rem, 3vw, 2.8rem);
}


/* =========================================================
   Passkey login additions
   ========================================================= */

/* ── Passkey primary action block ──────────────────────── */

.auth-passkey {
  display:          flex;
  flex-direction:   column;
  align-items:      stretch;
  gap:              0.6rem;
  margin-block-end: 1.6rem;
}

.auth-passkey__icon {
  flex-shrink:       0;
  vertical-align:    middle;
  margin-inline-end: 0.8rem;
}

.auth-passkey__error {
  min-height: 1.8rem;
  font-size:  1.2rem;
  color:      var(--mp-accent-rose);
  text-align: center;
}

.auth-recovery-link {
  display:    block;
  text-align: center;
  font-size:  1.3rem;
  color:      var(--mp-text-muted);
  margin-top: 0.4rem;
}
 
.auth-recovery-link:hover {
  color: var(--mp-text-secondary);
}
 
/* ── Passkey button ────────────────────────────────────── */

.auth-button--passkey {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.8rem;
  width:            100%;
  padding:          1.2rem 2rem;
  font-size:        1.5rem;
  font-weight:      600;
  cursor:           pointer;
  border-radius:    0.8rem;
  transition:       background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  background:       var(--mp-elevated);
  color:            var(--mp-text-primary);
  border:           0.15rem solid var(--mp-accent-emerald);
}

.auth-button--passkey:hover:not(:disabled) {
  background:   color-mix(in srgb, var(--mp-accent-emerald) 12%, var(--mp-elevated));
  border-color: var(--mp-accent-emerald);
}

.auth-button--passkey:focus-visible {
  outline:        0.2rem solid var(--mp-accent-emerald);
  outline-offset: 0.2rem;
}

.auth-button--passkey:disabled {
  opacity: 0.55;
  cursor:  not-allowed;
}


/* ── Divider ───────────────────────────────────────────── */

.auth-divider {
  display:      flex;
  align-items:  center;
  gap:          1.2rem;
  margin-block: 1.6rem;
}

.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     0.1rem;
  background: var(--mp-border);
}

.auth-divider__text {
  font-size:   1.2rem;
  color:       var(--mp-text-muted);
  white-space: nowrap;
}

/* ── Remember Me checkbox ──────────────────────────────── */

/* ABP renders: div.mb-3 > div.form-check > input[type=checkbox] + label */

.auth-row .form-check {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  margin:      0;
  padding:     0;
}

.auth-row .form-check-input {
  appearance:    none;
  -webkit-appearance: none;
  width:         1.8rem;
  height:        1.8rem;
  min-width:     1.8rem;
  border:        2px solid var(--mp-input-border);
  border-radius: 0.3rem;
  background:    var(--mp-card);
  cursor:        pointer;
  position:      relative;
  margin:        0;
  flex-shrink:   0;
}

.auth-row .form-check-input:checked {
  background: var(--mp-accent-emerald);
  border-color: var(--mp-accent-emerald);
}

/* Checkmark via pseudo-element */
.auth-row .form-check-input:checked::after {
  content:      '';
  position:     absolute;
  inset:        0;
  margin:       auto;
  width:        0.5rem;
  height:       0.9rem;
  border:       2px solid var(--mp-void);
  border-top:   none;
  border-left:  none;
  transform:    rotate(45deg) translate(-0.05rem, -0.1rem);
  display:      block;
}

.auth-row .form-check-input:focus-visible {
  outline:        0.2rem solid var(--mp-input-border);
  outline-offset: 0.2rem;
}

.auth-row .form-check-label {
  font-size: 1.4rem;
  color:     var(--mp-text-secondary);
  cursor:    pointer;
  margin:    0;
}

/* ABP wraps the whole thing in a div.mb-3 — kill the margin */
.auth-row .mb-3 {
  margin: 0 !important;
}

.auth-field__hint {
    font-size:   1.2rem;
    color:       var(--mp-text-muted);
    margin-top:  0.4rem;
    line-height: 1.5;
}

.auth-biometric-collection {
  display:    block;
  text-align: center;
  font-size:   1.2rem;
  color:       var(--mp-text-muted);
  margin-top:  0.4rem;
  line-height: 1.5;
}