/* =========================================================
   MATERIEL AUTH ENTRY FINAL STANDARD LOCK
   Owner: assets/css/auth-entry-standard.css
   Scope only: index.php, login.php, resetpassword.php, register.php, newpassword.php
   Protected by MATERIEL_SYSTEM_REFERENCE.md.
   Purpose: final cascade owner for auth title, field title, field background, primary button and secondary navigation link.
   ========================================================= */

:root {
  --materiel-font-base: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --materiel-auth-entry-title-size: 16px;
  --materiel-auth-entry-title-text: #ffffff;
  --materiel-auth-entry-title-weight: 800;
  --materiel-auth-entry-field-title-size: 13px;
  --materiel-auth-entry-field-title-text: #ffffff;
  --materiel-auth-entry-field-title-weight: 600;
  --materiel-auth-entry-primary-button-size: 14px;
  --materiel-auth-entry-primary-button-text: #ffffff;
  --materiel-auth-entry-primary-button-weight: 800;
  --materiel-auth-entry-secondary-link-size: 13px;
  --materiel-auth-entry-secondary-link-text: #8ec5ff;
  --materiel-auth-entry-secondary-link-weight: 700;
  --materiel-auth-entry-field-bg: #ffffff;
  --materiel-auth-entry-field-text: #101820;
  --materiel-auth-entry-field-placeholder: #7b8794;
  --materiel-auth-entry-field-border: #d7dde4;
  --materiel-auth-entry-field-value-size: 11px;
  --materiel-auth-entry-field-value-weight: 700;
  --materiel-auth-entry-field-value-line-height: 1.24;
  --materiel-auth-entry-field-title-control-gap: 3px;
  --materiel-auth-entry-field-text-align: left;
  --materiel-auth-entry-field-text-indent: 0;
  --materiel-auth-entry-field-height: 32.2px;
  --materiel-auth-entry-field-mobile-height: 29.9px;
  --materiel-auth-entry-field-radius: 8px;
  --materiel-auth-entry-field-padding: 6px 13px;
  --materiel-auth-entry-field-mobile-padding: 5px 13px;
  --materiel-auth-entry-textarea-height: 63.25px;
  --materiel-auth-entry-textarea-mobile-height: 60.95px;
  --materiel-auth-entry-field-focus: #2f80ed;
  --materiel-auth-entry-field-focus-ring: 0 0 0 4px rgba(47, 128, 237, 0.14);
}

body.auth-page[data-page="index"],
body.auth-page[data-page="login"],
body.auth-page[data-page="resetpassword"],
body.auth-page[data-page="register"],
body.auth-page[data-page="newpassword"] {
  font-family: var(--materiel-font-base) !important;
}

body.auth-page[data-page="index"] .auth-card,
body.auth-page[data-page="login"] .auth-card,
body.auth-page[data-page="resetpassword"] .auth-card,
body.auth-page[data-page="register"] .register-card,
body.auth-page[data-page="newpassword"] .new-password-card {
  font-family: var(--materiel-font-base) !important;
}

body.auth-page[data-page="index"] .auth-card h1,
body.auth-page[data-page="index"] .auth-card h2,
body.auth-page[data-page="login"] .auth-card h1,
body.auth-page[data-page="login"] .auth-card h2,
body.auth-page[data-page="resetpassword"] .auth-card h1,
body.auth-page[data-page="resetpassword"] .auth-card h2,
body.auth-page[data-page="register"] .register-header h1,
body.auth-page[data-page="register"] .register-header h2,
body.auth-page[data-page="newpassword"] .new-password-card h1,
body.auth-page[data-page="newpassword"] .new-password-card h2 {
  color: var(--materiel-auth-entry-title-text) !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-title-text) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-title-size) !important;
  line-height: 1.12 !important;
  font-weight: var(--materiel-auth-entry-title-weight) !important;
  letter-spacing: 0 !important;
}

body.auth-page[data-page="index"] .auth-card label,
body.auth-page[data-page="login"] .auth-card label,
body.auth-page[data-page="resetpassword"] .auth-card label,
body.auth-page[data-page="register"] .register-card label,
body.auth-page[data-page="newpassword"] .new-password-card label,
body.auth-page[data-page="register"] .password-title,
body.auth-page[data-page="newpassword"] .password-title {
  color: var(--materiel-auth-entry-field-title-text) !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-field-title-text) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-title-size) !important;
  line-height: 1.22 !important;
  font-weight: var(--materiel-auth-entry-field-title-weight) !important;
  letter-spacing: 0 !important;
  margin-bottom: var(--materiel-auth-entry-field-title-control-gap) !important;
}

body.auth-page[data-page="index"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="index"] select,
body.auth-page[data-page="index"] textarea,
body.auth-page[data-page="login"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="login"] select,
body.auth-page[data-page="login"] textarea,
body.auth-page[data-page="resetpassword"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="resetpassword"] select,
body.auth-page[data-page="resetpassword"] textarea,
body.auth-page[data-page="register"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="register"] select,
body.auth-page[data-page="register"] textarea,
body.auth-page[data-page="newpassword"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="newpassword"] select,
body.auth-page[data-page="newpassword"] textarea {
  background: var(--materiel-auth-entry-field-bg) !important;
  color: var(--materiel-auth-entry-field-text) !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-field-text) !important;
  caret-color: var(--materiel-auth-entry-field-text) !important;
  border-color: var(--materiel-auth-entry-field-border) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-value-size) !important;
  font-weight: var(--materiel-auth-entry-field-value-weight) !important;
  line-height: var(--materiel-auth-entry-field-value-line-height) !important;
  letter-spacing: 0 !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-align-last: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  vertical-align: middle !important;
}

body.auth-page[data-page="index"] input::placeholder,
body.auth-page[data-page="index"] textarea::placeholder,
body.auth-page[data-page="login"] input::placeholder,
body.auth-page[data-page="login"] textarea::placeholder,
body.auth-page[data-page="resetpassword"] input::placeholder,
body.auth-page[data-page="resetpassword"] textarea::placeholder,
body.auth-page[data-page="register"] input::placeholder,
body.auth-page[data-page="register"] textarea::placeholder,
body.auth-page[data-page="newpassword"] input::placeholder,
body.auth-page[data-page="newpassword"] textarea::placeholder {
  color: var(--materiel-auth-entry-field-placeholder) !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-field-placeholder) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-value-size) !important;
  font-weight: var(--materiel-auth-entry-field-value-weight) !important;
  line-height: var(--materiel-auth-entry-field-value-line-height) !important;
  letter-spacing: 0 !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  opacity: 1 !important;
}

/* Specificity lock for route/ID-scoped legacy placeholder alignment. */
body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) :is(
  #materiel-auth-placeholder-placement#materiel-auth-placeholder-placement#materiel-auth-placeholder-placement#materiel-auth-placeholder-placement#materiel-auth-placeholder-placement#materiel-auth-placeholder-placement,
  input,
  textarea
)::placeholder {
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
}

/* Register searchable Pangkat/Unit dropdown values are generated at runtime. */
body.auth-page[data-page="register"] .rank-list,
body.auth-page[data-page="register"] .rank-option {
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-value-size) !important;
  font-weight: var(--materiel-auth-entry-field-value-weight) !important;
  line-height: var(--materiel-auth-entry-field-value-line-height) !important;
  letter-spacing: 0 !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-align-last: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  vertical-align: middle !important;
}

body.auth-page[data-page="index"] input:-webkit-autofill,
body.auth-page[data-page="login"] input:-webkit-autofill,
body.auth-page[data-page="resetpassword"] input:-webkit-autofill,
body.auth-page[data-page="register"] input:-webkit-autofill,
body.auth-page[data-page="newpassword"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--materiel-auth-entry-field-text) !important;
  caret-color: var(--materiel-auth-entry-field-text) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-value-size) !important;
  font-weight: var(--materiel-auth-entry-field-value-weight) !important;
  line-height: var(--materiel-auth-entry-field-value-line-height) !important;
  letter-spacing: 0 !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  box-shadow: 0 0 0 1000px var(--materiel-auth-entry-field-bg) inset !important;
}

/* AUTH AUTOFILL PREVIEW TYPOGRAPHY LOCK
   Chromium paints a saved-credential preview through an internal first-line
   layer before it commits the value to input.value. Keep that preview on the
   same typography contract instead of waiting for focus/click to repaint it. */
body.auth-page[data-page="index"] input:-webkit-autofill::first-line,
body.auth-page[data-page="login"] input:-webkit-autofill::first-line,
body.auth-page[data-page="resetpassword"] input:-webkit-autofill::first-line,
body.auth-page[data-page="register"] input:-webkit-autofill::first-line,
body.auth-page[data-page="newpassword"] input:-webkit-autofill::first-line {
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-value-size) !important;
  font-weight: var(--materiel-auth-entry-field-value-weight) !important;
  line-height: var(--materiel-auth-entry-field-value-line-height) !important;
  letter-spacing: 0 !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
}

/* Standard selector for engines that expose committed autofill without the
   WebKit-prefixed state. Kept separate so an unsupported selector cannot
   invalidate the Chromium preview rule above. */
body.auth-page[data-page="index"] input:autofill,
body.auth-page[data-page="login"] input:autofill,
body.auth-page[data-page="resetpassword"] input:autofill,
body.auth-page[data-page="register"] input:autofill,
body.auth-page[data-page="newpassword"] input:autofill {
  color: var(--materiel-auth-entry-field-text) !important;
  caret-color: var(--materiel-auth-entry-field-text) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-field-value-size) !important;
  font-weight: var(--materiel-auth-entry-field-value-weight) !important;
  line-height: var(--materiel-auth-entry-field-value-line-height) !important;
  letter-spacing: 0 !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  box-shadow: 0 0 0 1000px var(--materiel-auth-entry-field-bg) inset !important;
}

body.auth-page[data-page="index"] .auth-card button,
body.auth-page[data-page="index"] .auth-card input[type="submit"],
body.auth-page[data-page="login"] .auth-card button,
body.auth-page[data-page="login"] .auth-card input[type="submit"],
body.auth-page[data-page="resetpassword"] .auth-card button,
body.auth-page[data-page="resetpassword"] .auth-card input[type="submit"],
body.auth-page[data-page="register"] .register-card button,
body.auth-page[data-page="register"] .register-card input[type="submit"],
body.auth-page[data-page="newpassword"] .new-password-card button,
body.auth-page[data-page="newpassword"] .new-password-card input[type="submit"] {
  color: var(--materiel-auth-entry-primary-button-text) !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-primary-button-text) !important;
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-primary-button-size) !important;
  line-height: 1.1 !important;
  font-weight: var(--materiel-auth-entry-primary-button-weight) !important;
  letter-spacing: 0 !important;
}

body.auth-page[data-page="login"] .auth-card .secondary-button,
body.auth-page[data-page="login"] .auth-card #forgotPasswordLink,
body.auth-page[data-page="resetpassword"] .auth-card p > a,
body.auth-page[data-page="register"] .register-footer p > a,
body.auth-page[data-page="newpassword"] .new-password-card p > a {
  font-family: var(--materiel-font-base) !important;
  font-size: var(--materiel-auth-entry-secondary-link-size) !important;
  line-height: 1.2 !important;
  font-weight: var(--materiel-auth-entry-secondary-link-weight) !important;
  letter-spacing: 0 !important;
}

body.auth-page[data-page="login"] .auth-card #forgotPasswordLink,
body.auth-page[data-page="resetpassword"] .auth-card p > a,
body.auth-page[data-page="register"] .register-footer p > a,
body.auth-page[data-page="newpassword"] .new-password-card p > a {
  color: var(--materiel-auth-entry-secondary-link-text) !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-secondary-link-text) !important;
}

body.auth-page[data-page="login"] .auth-card .secondary-button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Whole-project field shape contract for the five protected auth entries. */
body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) :is(
  #materiel-auth-field-shape#materiel-auth-field-shape#materiel-auth-field-shape#materiel-auth-field-shape#materiel-auth-field-shape#materiel-auth-field-shape,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select:not([multiple])
) {
  box-sizing: border-box !important;
  height: var(--materiel-auth-entry-field-height) !important;
  min-height: var(--materiel-auth-entry-field-height) !important;
  max-height: var(--materiel-auth-entry-field-height) !important;
  padding: var(--materiel-auth-entry-field-padding) !important;
  border: 1px solid var(--materiel-auth-entry-field-border) !important;
  border-radius: var(--materiel-auth-entry-field-radius) !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-align-last: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) :is(
  #materiel-auth-textarea-shape#materiel-auth-textarea-shape#materiel-auth-textarea-shape#materiel-auth-textarea-shape#materiel-auth-textarea-shape#materiel-auth-textarea-shape,
  textarea,
  select[multiple]
) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: var(--materiel-auth-entry-textarea-height) !important;
  max-height: none !important;
  padding: var(--materiel-auth-entry-field-padding) !important;
  border: 1px solid var(--materiel-auth-entry-field-border) !important;
  border-radius: var(--materiel-auth-entry-field-radius) !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-align-last: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  vertical-align: top !important;
}

/* Temporary autofill protection is not a business-locked field. Keep the
   editable text cue before first focus; genuine readonly/disabled rules remain
   owned by their existing selectors. Do not remove the credential guard. */
body.auth-page:is([data-page="index"], [data-page="login"]) input[data-auth-sensitive-autofill-guard]:not(:disabled) {
  cursor: text;
}

body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) input:not([type="hidden"]):hover:not(:disabled):not([readonly]) {
  border-color: #b7c7d5 !important;
}

body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) :is(input:not([type="hidden"]), select, textarea):is(:focus, :focus-visible) {
  border-color: var(--materiel-auth-entry-field-focus) !important;
  outline: 0 !important;
  box-shadow: var(--materiel-auth-entry-field-focus-ring) !important;
}

body.auth-page[data-page="register"] :is(.rank-option, [role="option"]) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 26px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  text-align: var(--materiel-auth-entry-field-text-align) !important;
  text-align-last: var(--materiel-auth-entry-field-text-align) !important;
  text-indent: var(--materiel-auth-entry-field-text-indent) !important;
  vertical-align: middle !important;
}

@media (max-width: 900px) {
  body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) :is(
    #materiel-auth-field-mobile-shape#materiel-auth-field-mobile-shape#materiel-auth-field-mobile-shape#materiel-auth-field-mobile-shape#materiel-auth-field-mobile-shape#materiel-auth-field-mobile-shape,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select:not([multiple])
  ) {
    height: var(--materiel-auth-entry-field-mobile-height) !important;
    min-height: var(--materiel-auth-entry-field-mobile-height) !important;
    max-height: var(--materiel-auth-entry-field-mobile-height) !important;
    padding: var(--materiel-auth-entry-field-mobile-padding) !important;
  }

  body.auth-page:is([data-page="index"], [data-page="login"], [data-page="resetpassword"], [data-page="register"], [data-page="newpassword"]) :is(
    #materiel-auth-textarea-mobile-shape#materiel-auth-textarea-mobile-shape#materiel-auth-textarea-mobile-shape#materiel-auth-textarea-mobile-shape#materiel-auth-textarea-mobile-shape#materiel-auth-textarea-mobile-shape,
    textarea,
    select[multiple]
  ) {
    min-height: var(--materiel-auth-entry-textarea-mobile-height) !important;
    padding: var(--materiel-auth-entry-field-mobile-padding) !important;
  }
}