/* --- Layout -------------------------------------------------------- */
body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #1c1c1c;
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.wrap {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
}

/* --- Brand --------------------------------------------------------- */
.brand { margin: 0 0 1rem 0; }
.logo  { max-width: 140px; width: 100%; height: auto; }

/* --- Typography ---------------------------------------------------- */
h1     { margin: 0 0 1rem 0; font-size: 1.2rem; }
p      { margin: 0 0 0.9rem 0; line-height: 1.45; font-size: 0.95rem; }
.title { margin: 0 0 1rem 0; font-size: 1.2rem; }
.info  { margin: 0 0 1rem 0; font-size: 0.9rem; color: #555; }

/* --- Form ---------------------------------------------------------- */
form         { display: flex; flex-direction: column; align-items: center; }
.field       { margin: 0 0 1rem 0; width: 100%; }
.field label { display: block; margin: 0 0 0.35rem 0; font-size: 1rem; font-weight: bold; text-align: left; color: #0a78a8; }
.field input[type="text"],
.field input[type="password"] { width: 100%; padding: 0.55rem; box-sizing: border-box; font-size: 1rem; }
.label-row    { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.remember-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.remember-row label { margin: 0; }

/* --- Hint widget --------------------------------------------------- */
.hint { position: relative; }
.hint summary { list-style: none; cursor: pointer; color: #666; font-weight: bold; font-size: 1rem; line-height: 1; }
.hint summary::-webkit-details-marker { display: none; }
.hint summary:focus { outline: 2px solid #0a78a8; outline-offset: 2px; border-radius: 4px; }
.hint-box {
  position: absolute; z-index: 10; right: 0; top: 1.4rem;
  width: 220px; background: #fff; border: 1px solid #cfd8dc; border-radius: 6px;
  padding: 0.6rem; color: #1c1c1c; font-size: 0.9rem; font-weight: normal;
  line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); text-align: left;
}

/* --- Password requirements ---------------------------------------- */
.requirements { list-style: none; margin: -0.5rem 0 1rem 0; padding: 0; text-align: left; font-size: 0.85rem; }
.requirements li { padding: 0.15rem 0 0.15rem 1.4em; position: relative; color: #888; }
.requirements li::before { content: '\2022'; position: absolute; left: 0.4em; }
.requirements li[data-ok="1"] { color: #2e7d32; }
.requirements li[data-ok="1"]::before { content: '\2713'; }

/* --- Alerts ------------------------------------------------------- */
.error   { background: #fbe8e8; border: 1px solid #e3b7b7; color: #8b1f1f; padding: 0.6rem; margin-bottom: 0.9rem; font-size: 0.9rem; }
.success { background: #e6f4ea; border: 1px solid #a8d5b0; color: #1b5e20; padding: 0.8rem; margin-bottom: 0.9rem; font-size: 0.9rem; }

/* --- Context banners (forwarded by intranet on login_required / no_rights) */
.notice  { background: #e8f4fb; border: 1px solid #90cbe0; color: #0a4e6e; padding: 0.6rem 0.7rem; margin-bottom: 0.9rem; font-size: 0.9rem; text-align: left; line-height: 1.4; border-radius: 4px; }
.warning { background: #fff8e1; border: 1px solid #ffe082; color: #5a4000; padding: 0.6rem 0.7rem; margin-bottom: 0.9rem; font-size: 0.9rem; text-align: left; line-height: 1.4; border-radius: 4px; }
.warning p { margin: 0 0 0.5rem 0; }
.warning > strong:first-child { display: block; margin-bottom: 0.25rem; }
.success strong { display: block; margin-bottom: 0.3rem; font-size: 1rem; }
.email { font-weight: bold; }
.redirect-note { margin-top: 0.7rem; font-size: 0.85rem; color: #555; }
.redirect-link { color: #0a78a8; }

/* --- Actions ------------------------------------------------------ */
.actions        { margin-top: 0.5rem; width: 100%; }
.actions button { width: 100%; padding: 0.6rem 1rem; border: 0; background: #0a78a8; color: #fff; cursor: pointer; font-size: 1rem; }
.actions button:disabled { background: #6aaecb; cursor: not-allowed; }

/* --- Spinner ------------------------------------------------------ */
.spinner { display: inline-block; width: 0.85em; height: 0.85em; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 0.4em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Utilities ---------------------------------------------------- */
.display-inline { display: inline-block; }
.forgot { margin: 1.5rem 0 0.2rem 0; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.forgot a, .back a, .cancel a { color: #0a78a8; text-decoration: none; }
.forgot a:hover, .back a:hover, .cancel a:hover { text-decoration: underline; }
.back   { margin-top: 1rem; font-size: 0.9rem; }
.cancel { margin-top: 1rem; font-size: 0.9rem; }
.fallback { margin: 1.2rem 0 0 0; padding: 0.65rem 0.75rem; background: #fff8e1; border: 1px solid #ffe082; border-radius: 5px; font-size: 0.82rem; color: #555; text-align: left; line-height: 1.4; }
.fallback a { color: #0a78a8; }