/* /css/sys.css
   Add-only styles for /sys.php authentication UI.
   Works whether included as "sys.css" or "css/sys.css".
*/

/* Utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Auth container and tab switcher */
.auth { max-width: 440px; margin: 0 auto; padding: 20px; }
.switcher { display:flex; gap:10px; justify-content:center; margin-bottom:14px; }
.switcher a[role="tab"] {
  display:inline-block; padding:10px 14px; border:1px solid rgba(0,0,0,.12); background:#fff;
  border-radius:999px; font-weight:700; text-decoration:none;
}
.switcher a[aria-pressed="true"],
.switcher a[aria-selected="true"] {
  border-color:#7BC5D5;
  box-shadow:0 0 0 2px rgba(123,197,213,.25) inset;
}

/* Auth forms */
.auth form {
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:16px;
  background:#fff;
}
.auth label { display:block; font-weight:600; margin:10px 0 6px; }
.auth input[type="email"],
.auth input[type="password"],
.auth input[type="text"],
.auth input[type="number"],
.auth select {
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  font-size:1rem;
  background:#fff;
  color:inherit;
}

/* DOB inline: three selects at 30% each */
.auth fieldset.dob-inline {
  display:flex;
  gap:10px;
  align-items:end;
}
.auth fieldset.dob-inline label { margin:0; }
.auth fieldset.dob-inline select {
  flex:0 0 30%;
  max-width:30%;
  width:30%;
  min-width:0;
  padding-inline:6px;
}

/* Submit + helpers */
.auth .submit {
  margin-top:14px; width:100%; padding:12px 14px; border:0; border-radius:12px;
  background:#7BC5D5; color:#04313a; font-weight:800; cursor:pointer;
}
.auth .submit[disabled] { opacity:.6; cursor:progress; }
.auth .helper { display:flex; justify-content:space-between; margin-top:10px; font-size:.9rem; }
.auth .helper a { text-decoration: underline; }

/* Flash messages */
.msg {
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  font-size:.95rem;
  line-height:1.35;
}
.msg-error {
  background:rgba(210,85,86,.12);
  border-color:rgba(210,85,86,.35);
  color:#7c1f20;
}
.msg-ok {
  background:rgba(123,197,213,.12);
  border-color:rgba(123,197,213,.35);
  color:#04313a;
}
.auth .msg + label { margin-top:4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .switcher a[role="tab"] { transition:none !important; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .switcher a[role="tab"] { background:#121212; border-color:#2a2a2a; color:#e9e9e9; }
  .auth form { background:#0f0f0f; border-color:#2a2a2a; }
  .auth input[type], .auth select { background:#0f0f0f; border-color:#2a2a2a; color:#e9e9e9; }
}