/* ============================================================
   GIORGIA - Backoffice Ophelia - Auth screens (Login/Register/ForgotPassword)
   "Comune Elegante" palette, centered glass-card layout
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: "Titillium Web", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
input:focus { outline: none; }
::selection { background: var(--status-soft); }

/* ---------------- COMUNE ELEGANTE THEME TOKENS ---------------- */
:root {
  --app-bg: radial-gradient(1200px 600px at 80% -10%, rgba(60,130,220,.18), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(120,170,235,.16), transparent 55%), linear-gradient(160deg,#eaf1fb,#e3ecf8 55%,#eef3fb);
  --surface: rgba(255,255,255,.70);
  --surface-2: rgba(255,255,255,.52);
  --line: rgba(255,255,255,.85);
  --ink: #12243a;
  --ink-soft: #46607e;
  --ink-faint: #7088a0;
  --primary: #0c4f9e;
  --btn-bg: linear-gradient(180deg,#1463c0,#0c4f9e);
  --btn-ink: #ffffff;
  --btn-shadow: 0 8px 20px rgba(12,79,158,.28);
  --field-bg: rgba(255,255,255,.6);
  --field-line: rgba(12,79,158,.18);
  --radius: 16px;
  --card-shadow: 0 10px 30px rgba(20,50,110,.10), inset 0 1px 0 rgba(255,255,255,.65);
  --card-blur: 14px;
  --status: #1c9b55;
  --status-soft: rgba(28,155,85,.14);
  --icon-bg: rgba(12,79,158,.10);
  --icon-ink: #0c4f9e;
}

/* ---------------- AUTH SHELL ---------------- */
.auth-shell {
  position: relative;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}

/* ---------------- BRAND ---------------- */
.auth-brand {
  position: absolute;
  top: 34px;
  left: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.auth-brand .brand-icon { color: var(--primary); display: flex; }
.auth-brand .wordmark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .16em;
  color: var(--ink);
  line-height: 1;
}
.auth-brand .tagline {
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 5px;
}

/* ---------------- AUTH CARD ---------------- */
.auth-card {
  width: 440px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  padding: 40px 38px;
}
.auth-card .eyebrow {
  text-align: center;
  font: 700 12px "Titillium Web", sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 8px;
}
.auth-card h1 {
  text-align: center;
  font: 700 27px "Titillium Web", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}
.auth-card .sub {
  text-align: center;
  font: 400 13.5px "Titillium Web", sans-serif;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.5;
}

/* ---------------- FIELDS ---------------- */
.field { margin-top: 18px; }
.field:first-of-type { margin-top: 30px; }
.field label {
  display: block;
  font: 700 11px "Titillium Web", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 13px 15px;
  font: 400 14px "Titillium Web", sans-serif;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder { color: var(--ink-faint); font-style: italic; opacity: .9; }
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--status-soft); }

/* password field with show/hide toggle button (Register) */
.field-input-group { position: relative; display: flex; align-items: center; }
.field-input-group input { flex: 1; padding-right: 44px; }
.field-input-group button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-faint); padding: 6px; display: flex;
}
.field-input-group button img { width: 20px; height: 20px; opacity: .8; }

/* ---------------- LINKS & BUTTONS ---------------- */
.forgot {
  display: block; text-align: right; margin-top: 12px;
  font: 600 12.5px "Titillium Web", sans-serif;
  color: var(--primary); text-decoration: none;
}
.forgot:hover { text-decoration: underline; }

.btn-primary, .btn-gaia {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 24px;
  background: var(--btn-bg); color: var(--btn-ink);
  border: none; border-radius: 10px; padding: 14px;
  font: 700 14px "Titillium Web", sans-serif; letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer; box-shadow: var(--btn-shadow);
  transition: filter .15s ease;
  text-decoration: none;
}
.btn-primary:hover, .btn-gaia:hover { filter: brightness(1.06); }
.btn-primary img, .btn-gaia img { width: 16px; height: 16px; }

/* ---------------- ERRORS ---------------- */
.field-error {
  font-size: 13px; color: #b3261e; background: rgba(179,38,30,.08);
  border: 1px solid rgba(179,38,30,.25); border-radius: 9px;
  padding: 10px 14px; margin-top: 18px; line-height: 1.5;
}
.field-error:empty { display: none; padding: 0; border: 0; margin: 0; }
.field-error.text-success {
  color: var(--status); background: var(--status-soft);
  border-color: rgba(28,155,85,.25);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 540px) {
  .auth-brand { position: static; margin-bottom: 24px; justify-content: center; }
  .auth-shell { flex-direction: column; padding: 24px; }
  .auth-card { padding: 30px 24px; }
}