/*
 * Login modal + shared login form - the owner's Dialog pattern, variant B
 * (form dialog: title row with the close button, subtitle, fields,
 * tinted footer band with two equal-width buttons), built from the IP
 * Design System's own components: Form Field (label above a Regular
 * 40px field), Regular buttons, the inline icon-only Close. The <dialog> shell lives in
 * auth/partials/login-modal.blade.php; the form content it shares with
 * the standalone /login page is auth/partials/login-form.blade.php.
 * Loaded site-wide from web.layouts.header since the modal can open from
 * any page's nav.
 *
 * Reused as-is from the rest of the system: .btn.btn-primary.btn-md and
 * .btn.btn-tertiary.btn-md (web.css), .ipflow-dialog-close (flow-forms.
 * css - the shared dialog close button, the design system's inline
 * icon-only Close), .ipflow-field-error (flow-forms.css). Everything
 * else is scoped to .login-form-* / .login-modal-* and touches no
 * shared rule.
 *
 * --login-pad is the horizontal padding of whatever box the form sits in
 * (the dialog, or the standalone page's card) - the footer band uses it
 * to run edge to edge of that box.
 */

/* ---- Dialog shell ---- */
.login-modal-dialog {
  --login-pad: var(--space-5, 24px);
  position: relative;
  border: none;
  background: var(--surface, #fff);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--elevation-3, 0 8px 16px rgba(68, 85, 91, 0.18));
  padding: var(--login-pad);
  width: 440px;
  max-width: calc(100vw - 2 * var(--space-4, 16px));
  max-height: calc(100vh - 2 * var(--space-6, 32px));
  overflow-y: auto;
  margin: auto;
  color: var(--ink, #44555b);
}
.login-modal-dialog::backdrop {
  /* surface-inverse (#333333) at 60% - the token is opaque, so the
     opacity is applied here rather than baked into a second token. */
  background: rgba(51, 51, 51, 0.6);
}
@media (max-width: 767px) {
  .login-modal-dialog {
    width: calc(100vw - 2 * var(--space-4, 16px));
    max-height: calc(100vh - 2 * var(--space-4, 16px));
  }
}

/* The standalone /login page has no dialog around the form - it draws
   the same card itself so the footer band has a box to belong to. */
.login-form-stack--card {
  --login-pad: var(--space-5, 24px);
  padding: var(--login-pad);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dedede);
  border-radius: var(--radius-xl, 16px);
}

/* ---- Vertical rhythm ---- */
.login-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 24px);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}
.login-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}
.login-form-status {
  margin: 0;
}

/* ---- Title row + subtitle ---- */
.login-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}
/* h3 scale (22/28/500); font-family deliberately inherits web.css's
   h1-h4 rule so this heading matches every other heading on the live
   site (the design system's Roboto heading face isn't loaded anywhere
   yet). */
.login-form-title {
  margin: 0;
  font-size: var(--h3-size, 22px);
  line-height: var(--h3-line-height, 28px);
  font-weight: var(--h3-weight, 500);
  color: var(--ink, #44555b);
}
/* Programmatic focus target when the modal opens - same treatment as
   .ipflow-heading[tabindex="-1"]:focus in flow-forms.css. */
.login-form-title[tabindex="-1"]:focus {
  outline: none;
}
.login-form-subtitle {
  margin: 0;
  font: var(--body-weight, 400) var(--body-size, 16px)/var(--body-line-height, 24px) var(--font-sans);
  color: var(--ink, #44555b);
}

/* ---- Fields (design system Form Field: label / Regular field / error) ---- */
.login-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.login-form-label {
  margin: 0;
  font: var(--label-weight, 600) var(--label-size, 12px)/var(--label-line-height, 16px) var(--font-sans);
  color: var(--ink, #44555b);
}
.login-form-input-wrap {
  position: relative;
}
.login-form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--border, #dedede);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-100, #f2f2f2);
  font: var(--body-weight, 400) var(--body-size, 16px)/var(--body-line-height, 24px) var(--font-sans);
  color: var(--ink, #44555b);
  box-shadow: none;
}
.login-form-input::placeholder {
  color: var(--ink-muted, #757575);
  opacity: 1;
}
.login-form-input:hover {
  border-color: var(--border-strong, #80838a);
}
.login-form-input:focus {
  border-color: var(--brand-blue, #3270a2);
  outline: 2px solid var(--focus-ring, #2e6fe0);
  outline-offset: 1px;
}
.login-form-input--password {
  padding-right: 40px;
}
.login-form-field.has-error .login-form-input {
  border-color: var(--danger-text, #9e4a46);
}
/* .ipflow-field-error brings its own 4px top margin for the older
   label/field/error stacks; here the field's gap already provides it. */
.login-form-field .ipflow-field-error {
  margin-top: 0;
  font-family: var(--font-sans);
  line-height: var(--caption-line-height, 16px);
}

/* Show/hide password: a Small icon-only button inset in the 40px field. */
.login-form-toggle-password {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--ink-muted, #757575);
  cursor: pointer;
}
.login-form-toggle-password:hover {
  color: var(--ink, #44555b);
}
.login-form-toggle-password:focus-visible {
  outline: 2px solid var(--focus-ring, #2e6fe0);
  outline-offset: -2px;
}
.login-form-toggle-password .login-form-eye-off,
.login-form-toggle-password.is-visible .login-form-eye {
  display: none;
}
.login-form-toggle-password.is-visible .login-form-eye-off {
  display: block;
}

/* ---- Remember me / Forgot password ---- */
.login-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1, 4px) var(--space-3, 12px);
}
.login-form-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: 44px;
}
.login-form-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand-blue, #3270a2);
  cursor: pointer;
}
.login-form-checkbox:focus-visible {
  outline: 2px solid var(--focus-ring, #2e6fe0);
  outline-offset: 2px;
}
.login-form-checkbox-label {
  margin: 0;
  font: var(--body-weight, 400) var(--body-size, 16px)/var(--body-line-height, 24px) var(--font-sans);
  color: var(--ink, #44555b);
  cursor: pointer;
}
.login-form-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 var(--body-size, 16px)/var(--body-line-height, 24px) var(--font-sans);
  color: var(--brand-blue, #3270a2);
  text-decoration: none;
}
.login-form-link:hover {
  color: var(--link-hover, #3c77a6);
  text-decoration: underline;
}
.login-form-link:focus-visible {
  outline: 2px solid var(--focus-ring, #2e6fe0);
  outline-offset: 2px;
}

/* ---- Footer band: Register (Secondary) | Log in (Primary) ---- */
.login-form-footer {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: a bare 1fr track's floor is the
     button's min-content width, so the longer "Zarejestruj się" label
     would widen its column and the two buttons stop being equal. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4, 16px);
  margin: var(--space-2, 8px) calc(-1 * var(--login-pad, 0px)) calc(-1 * var(--login-pad, 0px));
  padding: var(--space-5, 24px) var(--login-pad, var(--space-5, 24px));
  background: var(--surface-100, #f2f2f2);
  border-radius: 0 0 var(--radius-xl, 16px) var(--radius-xl, 16px);
}
/* web.css's base .btn adds a 10px vertical margin and bold weight for
   the legacy buttons; the design system's button-md style is 600.
   Scoped to these two Regular buttons only. */
.login-form-footer .btn {
  margin: 0;
  font-weight: var(--button-md-weight, 600);
  line-height: var(--button-md-line-height, 18px);
}
/* Tertiary's "no fill" is transparent, which on this band would read as
   a grey button; the pattern draws Register on a white surface. Hover/
   pressed fills from web.css's own .btn.btn-tertiary rules still win
   (higher specificity). */
.login-form-footer .btn-tertiary {
  background: var(--surface, #fff);
}
.login-form-submit {
  position: relative;
}
.login-form-spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: var(--space-2, 8px);
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-modal-spin .6s linear infinite;
}
.login-form-submit.is-loading .login-form-spinner {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .login-form-spinner {
    animation: none;
  }
}
@keyframes login-modal-spin {
  to { transform: rotate(360deg); }
}