/* ============================================================================
   PointERP start screen: login, password recovery, company registration.

   One frame, three states. The graphite panel on the left never changes; only
   the right column swaps content. Values come from the handover document
   (PointERP-ekran-startowy-przekazanie.md) and match the tokens used on
   comtronic.pl and pointval.com, so the three sites read as one family.

   Everything is scoped under .login-screen: bootstrap.css is still loaded on
   this page for the policy modals, and unscoped rules would fight it.

   The type and the word mark itself live in brand.css, which the application
   layout loads as well - the mark is one thing, defined once.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens
   On :root rather than on .login-screen, because the page ground behind the
   screen needs them too. This stylesheet is loaded on the start screen only,
   so nothing else can pick them up. */

:root {
  --glass: #fbfcfd;
  --glass-tint: #eef1f4;
  --aluminium: #c9d0d6;
  --ink: #0f1317;
  --ink-muted: #5a646e;
  --accent: #eb1941;
  --graphite: #0e1a26;
  --graphite-line: #22394c;
  --graphite-text: #e6edf3;
  --graphite-muted: #93a7b8;
  /* The ground the application stands on, brought here so that signing in
     changes what is on the page and not the colour under it. glass-tint stays
     defined above: the cookie strip uses it to sit a step below this. */
  --page: #f5f7f9;
  /* Deep enough to be seen on a white field: the old #4aa3de gave 2.77:1 where
     a focus indicator needs 3:1. Same value as the application's --action. */
  --focus: #237cb8;
  /* Level with --focus and with the application's --action: #227dba, the
     websites' link colour, sits at 4.46:1 on the white card - just under. */
  --link: #237cb8;
  /* A quarter shorter than the 52 px of the mockup: the fields carry 15.4 px
     text now, and the original height left them looking empty. The button
     follows the same token, so the row keeps one height. */
  --field-h: 39px;
  --field-pad: 12px;
}

/* ----------------------------------------------------------------- frame */

/* The ground is one step darker than the screen. Without that step the screen
   is only marked on its left, by the graphite panel: the right margin is the
   same near-white as the form column, so the whole thing reads as pushed to
   the right rather than centred. The pair glass / glass-tint is the one the
   websites use. */
body.login-body {
  margin: 0;
  /* The same ground as the application behind it. It used to be glass-tint,
     a step darker, which framed the screen more strongly - but it also meant
     the colour under the page changed at the moment of signing in. The step
     that keeps the screen from reading as pushed to the right is still there,
     just smaller: the screen itself is glass, lighter than this. */
  background: var(--page);
  color: #0f1317;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The one number the whole screen is measured against: the application reads
     at .94rem (15.04 px), and this sits alongside it. Every other size on this
     screen is set in em, so changing this line rescales the lot. */
  font-size: 15.4px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* The screen holds the same width as the application behind it: .container in
   rwd/style.css runs 1180 / 960 / 770 px, and the breakpoints below repeat that
   ladder so signing in and working do not sit on differently wide pages. */
.login-screen {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--glass);
  color: var(--ink);
}

/* ------------------------------------------------------------- left panel
   Stands still in all three states: identity and one way to reach support.
   No phone number by design - tickets come by mail. */

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--graphite);
  color: var(--graphite-text);
  padding: 72px 64px;
}

.login-panel__head {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Construction comes from .brand-mark in brand.css; this only says how big it
   is here and on what background it sits. */
.login-brand {
  font-size: 2.000em;
  color: var(--graphite-text);
}

.login-panel__intro {
  margin: 0;
  max-width: 30ch;
  font-size: 1.059em;
  line-height: 1.5;
  color: var(--graphite-muted);
}

/* The second paragraph is the supporting one, so it reads a step quieter than
   the line above it. */
.login-panel__note {
  margin: 0;
  max-width: 34ch;
  font-size: 0.941em;
  line-height: 1.55;
  color: var(--graphite-muted);
}

.login-panel__foot {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login-panel__rule {
  height: 1px;
  background: var(--graphite-line);
}

.login-label-text {
  margin: 0;
  font-size: 0.765em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-muted);
}

.login-panel__mail {
  font-size: 1.294em;
  line-height: 1.3;
  color: var(--graphite-text);
}

.login-panel__hint {
  margin: 0;
  max-width: 36ch;
  font-size: 0.882em;
  line-height: 1.55;
  color: var(--graphite-muted);
}

/* The label link the websites use in their footers: small, spaced capitals over
   a two-pixel accent rule. Same shape as "PointERP - logowanie" on
   comtronic.pl, which is the door in the other direction. Inline-block so the
   rule is only as wide as the words. */
.login-panel__more {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-text);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.25rem;
}

.login-panel__more:hover,
.login-panel__more:focus {
  color: var(--accent);
  text-decoration: none;
}

/* ------------------------------------------------------------ form column */

/* No padding at the top. The automatic margins below centre the form inside
   this box, so anything padded here is added ABOVE that centred region and
   the form ends up sitting lower than it looks centred: with 72 px of padding
   the distance from the window edge to the heading was 80 px greater than the
   distance from the button down to the rule. The bottom padding is fine - it
   sits under the footer, outside the region being measured. */
.login-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 96px 72px;
}

/* A form stretched across a wide monitor is harder to aim at, not easier.
   The automatic margins take the space left over above the footer and split
   it in two, which centres the whole state - heading, fields and the way out
   below them - without pinning it to a number that would be wrong for the
   taller registration state. When the state is tall enough to fill the
   column, the margins collapse to nothing and it simply starts at the top. */
.login-body-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 420px;
  margin: auto 0;
}

.login-heading {
  margin: 0;
  font-size: 2.353em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* The labels in labels_pl.properties are lower case by convention; the
   heading needs one capital and nothing else, so capitalize the first
   letter here instead of duplicating the label. */
.login-heading:first-letter {
  text-transform: uppercase;
}

.login-fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ------------------------------------------------------------------ states
   One frame, several states: the column carries the state class and the rules
   below decide what is on screen. Done in CSS rather than by setting inline
   display from script, because a heading switched to display:flex stops being
   a block container and loses its :first-letter rule. */

.login-body-col .remind-form-fields,
.login-body-col .register-form-fields {
  display: none;
}

.login-body-col.is-remind .login-form-fields {
  display: none;
}

.login-body-col.is-remind h1.remind-form-fields {
  display: block;
}

.login-body-col.is-remind .login-field.remind-form-fields,
.login-body-col.is-remind .login-actions.remind-form-fields {
  display: flex;
}

/* Registration hides the login form whole, because it is a form of its own
   rather than another group inside it. */
.login-body-col.is-register .login-form-block,
.login-body-col.is-register .login-form-fields {
  display: none;
}

.login-body-col.is-register h1.register-form-fields {
  display: block;
}

.login-body-col.is-register form.register-form-fields {
  display: flex;
}

/* The registration form carries four fields in two columns, so it needs more
   room than the 420 px the login form is held to. */
.login-body-col.is-register {
  max-width: 688px;
}

/* ---------------------------------------------------------- registration */

.login-lead {
  margin: 0;
  font-size: 1.059em;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Required above, optional below: the split carries information, so it is a
   grid rather than a run of fields. The left column is wider because company
   names are long and the fields opposite them are not. */
.login-register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px 32px;
}

.login-required {
  margin-left: 0.25em;
  color: var(--accent);
}

.login-consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 0.941em;
  color: var(--ink-muted);
}

.login-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--graphite);
}

/* The wording toggles the box; the link opens the document, so it stays
   outside the label. */
.login-consent label {
  margin: 0 0.35em 0 0;
  cursor: pointer;
}

.login-consent .login-messages {
  grid-column: 2;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Label stands above the field and stays there. A floating label asks the
   user to remember what they typed. */
.login-field > label {
  margin: 0;
  font-size: 0.765em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.login-field__box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--field-h);
  padding: 0 var(--field-pad);
  background: #ffffff;
  border: 1px solid var(--aluminium);
}

.login-field__box:hover {
  border-color: var(--graphite-muted);
}

/* The blue is the focus signal and nothing else - one colour, one meaning.
   It must also answer to :focus-visible, or keyboard users lose the only
   sign of where they are. */
.login-field__box:focus-within {
  border-color: var(--focus);
  box-shadow: inset 0 -2px 0 0 var(--focus);
}

/* A field that failed validation. JSF marks the input, not the box that draws
   the border, so the box asks whether it holds one. Red says "here", the
   message underneath says what is wrong; focus still wins over it, because
   then the user is fixing exactly this field. */
.login-field__box:has(input.ui-state-error) {
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

.login-field__box:has(input.ui-state-error):focus-within {
  border-color: var(--focus);
  box-shadow: inset 0 -2px 0 0 var(--focus);
}

.login-screen .login-field__box input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.000em;
}

.login-field__box input::placeholder {
  color: var(--graphite-muted);
}

/* Password reveal: a button, not an image, so it is reachable by keyboard. */
.login-reveal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.login-reveal:hover {
  color: var(--ink);
}

.login-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.941em;
  color: var(--ink-muted);
}

.login-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--graphite);
}

.login-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Three items in the sign-in row now, so they need less air between them than
   two did. */
.login-actions {
  gap: 20px;
}

/* Graphite, not blue: white on #4aa3de gives 2.3:1 where 4.5:1 is needed.
   The dialogs on this page still come from Bootstrap and PrimeFaces, so their
   buttons arrive blue and rounded. They are listed here rather than restyled
   separately: one button look on the screen, described in one place. Scoped to
   the page body, because the dialogs live outside .login-screen. */
body.login-body .login-button,
body.login-body .r-modal .btn,
body.login-body .r-modal .ui-button {
  height: var(--field-h);
  padding: 0 40px;
  border: 0;
  border-radius: 0;
  background: var(--graphite);
  color: #ffffff;
  font-family: inherit;
  font-size: 1.000em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: var(--field-h);
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}

/* The dialogs used to centre their button with a Bootstrap grid plus a class
   from the application stylesheet, which this page does not load - so the
   button sat at the left edge of a centred third of the width. The grid is
   gone; the row centres itself. */
body.login-body .r-modal .modal-body {
  text-align: center;
}

body.login-body .login-dialog-actions {
  display: flex;
  justify-content: center;
}

/* The text in a dialog reads like the paragraph in the panel, not like a
   Bootstrap h5: same size and leading, so the screen speaks in one voice. */
body.login-body .r-modal p {
  font-size: 1.059em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

/* btn-block would stretch the dialog button across its column; the button on
   the form is as wide as its text plus padding, and these have to match. */
body.login-body .r-modal .btn,
body.login-body .r-modal .ui-button {
  display: inline-block;
  width: auto;
}

body.login-body .login-button:hover,
body.login-body .r-modal .btn:hover,
body.login-body .r-modal .ui-button:hover {
  background: var(--graphite-line);
  color: #ffffff;
}

body.login-body .login-button:focus-visible,
body.login-body .r-modal .btn:focus-visible,
body.login-body .r-modal .ui-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

body.login-body .login-button[disabled],
body.login-body .r-modal .btn[disabled],
body.login-body .r-modal .ui-button[disabled] {
  background: var(--ink-muted);
  cursor: wait;
}

.login-screen .login-link {
  font-size: 0.941em;
  color: var(--link);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.login-screen .login-link:hover,
.login-screen .login-link:focus {
  color: var(--ink);
  text-decoration: none;
}

/* Links and the reveal button carry the same focus ring as the buttons. A
   colour change alone is not enough: someone arriving by keyboard has to see
   where they are, not guess it from a shade. */
body.login-body .login-link:focus-visible,
body.login-body .login-reveal:focus-visible,
body.login-body .login-consent input:focus-visible,
body.login-body .login-check input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* PrimeFaces keeps the container in the markup so ajax can fill it later; an
   empty one would still take a row of the column gap. */
.login-screen .login-messages:empty {
  display: none;
}

/* Messages sit above the button, where the user is already looking. */
/* Fatal is in this list because the email validator raises its complaint at
   that severity, so an address typed wrongly arrived boxed in red with an icon
   while an address left empty was a line of red text. One kind of answer to
   one kind of mistake: the wording differs, the shape does not. */
.login-screen .login-messages .ui-messages-error,
.login-screen .login-messages .ui-messages-fatal,
.login-screen .login-messages .ui-messages-info,
.login-screen .login-messages .ui-message-error,
.login-screen .login-messages .ui-message-fatal {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-size: 0.824em;
  line-height: 1.45;
}

.login-screen .login-messages .ui-messages-error-icon,
.login-screen .login-messages .ui-messages-fatal-icon,
.login-screen .login-messages .ui-messages-info-icon,
.login-screen .login-messages .ui-message-error-icon,
.login-screen .login-messages .ui-message-fatal-icon {
  display: none;
}

/* One line under the rule: the company on the left, the version on the right,
   both at the same small size. The company line keeps the body face - the
   monospace is reserved for machine data, and it is wide enough that the two
   halves stopped fitting on one line when the company line used it too. */
.login-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--aluminium);
  padding-top: 12px;
  /* No top margin: the automatic margins on the column above measure the free
     space up to this rule, so any margin here would push the centre of the
     form off by half of it. */
  margin-top: 0;
  font-size: 0.765em;
  color: var(--ink-muted);
}

/* .login-version now lives in brand.css, which both this screen and the
   application load - the version reads the same on either side of the sign-in. */

/* ----------------------------------------------------------- narrow views */

@media (max-width: 1199px) {
  /* The panel narrows with the page: at 960 px a 560 px panel would leave the
     form less room than the form needs. */
  .login-screen {
    max-width: 960px;
    grid-template-columns: 420px minmax(0, 1fr);
  }
  .login-panel {
    padding: 48px;
  }
  .login-main {
    padding: 0 56px 48px;
  }
}

@media (max-width: 991px) {
  .login-screen {
    max-width: 770px;
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .login-panel {
    padding: 32px;
  }
  .login-main {
    padding: 0 40px 40px;
  }
  .login-brand {
    font-size: 1.647em;
  }
  .login-panel__mail {
    font-size: 1.059em;
  }
}

@media (max-width: 899px) {
  .login-screen {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The panel keeps the name and the support address; the sentence about the
     system goes, because on a phone it pushes the form below the fold. */
  .login-panel {
    padding: 24px;
    gap: 16px;
  }
  .login-panel__intro,
  .login-panel__note,
  .login-panel__hint,
  .login-panel__rule {
    display: none;
  }
  .login-panel__head,
  .login-panel__foot {
    gap: 12px;
  }
  .login-main {
    padding: 32px 24px;
  }
  .login-body-col,
  .login-body-col.is-register {
    max-width: none;
  }
  .login-heading {
    font-size: 1.882em;
  }
}

/* Two columns of fields stop helping once each one is a few characters wide. */
@media (max-width: 599px) {
  .login-register-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ cookie strip
   The script draws this bar itself, in colours of its own: a #eee ground, and
   #4aa3de behind the white "Ok, rozumiem" - the blue the application has just
   left, which carried its white label at 2.77:1 where 4.5:1 is needed. The
   link fared worse, 2.39:1 against the ground.

   The strip is part of the start screen, so it answers to the start screen:
   the ground the page already uses, the button in the graphite the sign-in
   button wears, and the note as text with a rule under it rather than a colour
   too pale to carry it. Everything here is !important because the script
   writes its colours inline, and that is the only way to reach them. */
.cookieinfo {
  background: var(--glass-tint) !important;
  color: var(--ink) !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-size: 0.8rem !important;
}

.cookieinfo a {
  color: var(--ink) !important;
  text-decoration: underline !important;
}

.cookieinfo .cookieinfo-close {
  background: var(--graphite) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-weight: 500 !important;
}

.cookieinfo .cookieinfo-close:hover,
.cookieinfo .cookieinfo-close:focus {
  background: var(--graphite-line) !important;
}