/* Overlay: auth — redesign su design system nativo (design_brief §6)
   Segue il tema: default dark caldo, override per tema chiaro (carta/inchiostro).
   Tutto referenzia le variabili locali --auth-* per restare theme-aware. */

/* Token locali login su famiglia fredda; modale più scura del fondo.
   Definiti sul BODY (antenato) così che anche lo sfondo pagina possa usarli. */
body.route-login-shell, .auth-login-route{
  --auth-bg:            #21262E;   /* sfondo pagina, grigio-ardesia freddo (sposa il blu) */
  --auth-surface:       #181D26;   /* card, blu-notte più scuro del fondo */
  --auth-input:         #14181F;   /* campi input, ancora più profondi */
  --auth-elevated:      #232A34;   /* hover superfici (es. toggle password) */
  --auth-text:          var(--text-primary);
  --auth-text-2:        var(--text-secondary);
  --auth-text-3:        var(--text-tertiary);
  --auth-border-subtle: var(--border-subtle);
  --auth-border:        var(--border-default);
  --auth-border-strong: var(--border-strong);
  --auth-accent:        var(--accent);
  --auth-accent-ink:    var(--accent-ink);
  --auth-control:       var(--control);
  --auth-control-hover: var(--control-hover);
  --auth-control-active:var(--control-active);
  --auth-control-soft:  var(--control-soft);
  --auth-control-muted: var(--control-muted);
  --auth-error:         var(--error);
}

/* Sfondo dell'intera pagina login. Va applicato a body E ai wrapper #app/#loginMain,
   perché unified-pass.css forza #app{background:var(--color-bg-canvas)!important} (warm)
   che altrimenti copre il body. Solido sui wrapper, vignetta sul wrapper visibile. */
body.route-login-shell,
body.route-login-shell #app{
  background:var(--auth-bg) !important;
  background-image:none !important;
}

.login-main-shell{
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb, var(--auth-accent-ink) 12%, transparent) 0%,
      transparent 55%),
    var(--auth-bg) !important;
}

.auth-login-route{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:var(--space-lg, 24px);
  color:var(--auth-text);
  background:transparent;
}

/* — Tema chiaro: palette chiara calda (carta/inchiostro), non il freddo legacy — */
:is([data-theme-resolved="light"], [data-theme="light"], .theme-light) :is(body.route-login-shell, .auth-login-route){
  --auth-bg:            #F4EFE7;
  --auth-surface:       #FBF8F2;
  --auth-input:         #FFFFFF;
  --auth-elevated:      #F0EAE0;
  --auth-text:          #2A2620;
  --auth-text-2:        #6B6359;
  --auth-text-3:        #968C7E;
  --auth-border-subtle: rgba(40, 30, 20, 0.06);
  --auth-border:        rgba(40, 30, 20, 0.12);
  --auth-border-strong: rgba(40, 30, 20, 0.20);
  --auth-accent:        #5B4B8A;
  --auth-accent-ink:    #5B4B8A;
  --auth-control:       #2C3E60;
  --auth-control-hover: #374D78;
  --auth-control-active:#243250;
  --auth-control-soft:  rgba(44, 62, 96, 0.10);
  --auth-control-muted: rgba(44, 62, 96, 0.40);
  --auth-error:         #A85A5A;
}

.login-main-shell{ min-height:100vh; display:grid; place-items:center; padding:var(--space-lg,24px); }

.auth-login-card{
  width:min(420px, 94vw);
  display:grid;
  gap:var(--space-lg, 24px);
  padding:var(--space-2xl, 56px) var(--space-xl, 36px);
  border-radius:var(--radius-lg, 12px);
  border:1px solid var(--auth-border-subtle);
  background:var(--auth-surface);
}

/* — Intestazione editoriale — */
.auth-login-head{ display:grid; gap:6px; text-align:center; }
.auth-brand-eyebrow{
  margin:0;
  font-family:var(--font-sans);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--auth-text-3);
}
.auth-brand{
  margin:0;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:2.4rem;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--auth-accent);
}
.auth-login-sub{
  margin:4px 0 0;
  font-family:var(--font-sans);
  line-height:1.6;
  color:var(--auth-text-2);
}

/* — Form — */
.auth-login-form{ display:grid; gap:var(--space-md, 20px); }
.auth-field{ display:grid; gap:8px; }
.auth-login-form .label{
  font-family:var(--font-sans);
  font-size:.82rem;
  font-weight:500;
  color:var(--auth-text-2);
}
/* !important necessario per vincere su unified-pass.css §input dark
   (body.theme-dark :is(input[type=text]…){ background … !important }) */
#loginIdentity, #loginPassword{
  width:100%;
  height:46px;
  padding:0 14px;
  font-family:var(--font-sans);
  font-size:.95rem;
  color:var(--auth-text) !important;
  background:var(--auth-input) !important;
  border:1px solid var(--auth-border) !important;
  border-radius:var(--radius-sm, 8px) !important;
  box-shadow:none !important;
  transition:border-color var(--transition-base), box-shadow var(--transition-base);
}
#loginIdentity::placeholder, #loginPassword::placeholder{ color:var(--auth-text-3); }
#loginIdentity:focus, #loginPassword:focus{
  outline:none;
  border-color:var(--auth-control-muted) !important;
  box-shadow:0 0 0 3px var(--auth-control-soft) !important;
}

.password-field-wrap{ display:flex; align-items:center; gap:8px; }
.password-field-wrap .input{ flex:1 1 auto; min-width:0; }
.password-toggle-btn{
  flex:0 0 auto;
  min-width:74px;
  height:46px;
  padding:0 12px;
  font-family:var(--font-sans);
  font-size:.82rem;
  color:var(--auth-text-2);
  background:transparent;
  border:1px solid var(--auth-border);
  border-radius:var(--radius-sm, 8px);
  cursor:pointer;
  transition:color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}
.password-toggle-btn:hover{ color:var(--auth-text); background:var(--auth-elevated); border-color:var(--auth-border-strong); }
.password-toggle-btn:focus-visible{ outline:2px solid var(--auth-control-muted); outline-offset:1px; }

.auth-login-error{ min-height:18px; font-size:.85rem; color:var(--auth-error); text-align:center; }

/* Pulsante primario — blu funzionale; #id per vincere sugli stili .btn legacy */
/* !important per vincere su unified-pass.css §.btn dark
   (body.theme-dark :is(.btn,.btn-primary…){ background … !important }) */
#route-login #loginSubmit.auth-login-submit{
  width:100%;
  height:48px;
  margin-top:4px;
  font-family:var(--font-sans);
  font-size:.95rem;
  font-weight:500;
  color:#FFFFFF !important;
  background:var(--auth-control) !important;
  border:1px solid var(--auth-control) !important;
  border-radius:var(--radius-sm, 8px) !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background-color var(--transition-base), border-color var(--transition-base);
}
#route-login #loginSubmit.auth-login-submit:hover{ background:var(--auth-control-hover) !important; border-color:var(--auth-control-hover) !important; }
#route-login #loginSubmit.auth-login-submit:active{ background:var(--auth-control-active) !important; border-color:var(--auth-control-active) !important; }

.auth-login-hint{
  margin:0;
  text-align:center;
  font-family:var(--font-sans);
  font-size:.8rem;
  color:var(--auth-text-3);
}
.auth-login-hint code{
  font-size:.78rem;
  color:var(--auth-text-2);
  background:var(--auth-input);
  border:1px solid var(--auth-border-subtle);
  padding:1px 5px;
  border-radius:4px;
}

/* Stato readonly (invariato dalla versione precedente) */
body.auth-readonly .readonly-field-locked{
  opacity:.52 !important;
  filter:saturate(.22) brightness(.86);
  box-shadow:none !important;
}
body.auth-readonly textarea.readonly-field-locked,
body.auth-readonly input.readonly-field-locked,
body.auth-readonly .narrative-rich-editor.readonly-field-locked{
  pointer-events:none !important;
  user-select:none !important;
  caret-color:transparent !important;
}