/* Kaplai-Kalender: login page in the Kaplai corporate design (KALENDER-7).
 *
 * The instance config does most of it (scripts/kunde.py, ERZWUNGEN and ERSCHEINUNGSBILD): colours of
 * the login box, background image, font, logo and title. This file covers only what EGroupware has
 * no setting for, and nginx links it into /egroupware/login.php alone (nginx/egroupware.conf):
 *   - EGroupware's own links: social media in the box, the app bar at the bottom
 *   - button and input colours (EGroupware's button colour ignores the template colour)
 *   - the customer logo stays above the box on short screens (EGroupware moves it below), the
 *     labels go above their fields on narrow ones ("Benutzername" did not fit beside it at 360 px)
 *   - the small Kaplai mark at the bottom edge
 * Selectors from api/templates/default/login.tpl and css/login.less of EGroupware, whose rules start
 * with #loginMainDiv #centerBox (two ids) - so do these. After an image update compare the
 * screenshots (README "Erscheinungsbild der Login-Seite").
 * Source Sans 3: Copyright Adobe, SIL Open Font License 1.1 (as on kaplai.com).
 */

/* EGroupware defines the family "egroupware" from font_face_url for weight 400 only; the file is a
   variable font, this face gives bold text the real weight instead of a synthetic one. */
@font-face {
  font-family: egroupware;
  src: url("/branding/kaplai/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --kaplai-akzent: #046bd2;
  --kaplai-akzent-dunkel: #03539e;
  --kaplai-text: #1e293b;
  --kaplai-feldrand: #6b7280;      /* 4.8:1 on white, field borders need 3:1 (WCAG 1.4.11) */
  --button-color: var(--kaplai-akzent);
  --button-text-color: #ffffff;
  --input-color: #ffffff;
  --input-text-color: var(--kaplai-text);
}

/* EGroupware's links: social media below the button, the app bar at the bottom */
#loginMainDiv #centerBox .divLoginbox > div:has(> #socialBox),
div#login_footer .apps {
  display: none;
}

/* the background from the config, centred instead of anchored top left (phones show its middle) */
#loginMainDiv #loginBackgroundImage {
  background-position: center;
}

#loginMainDiv div#loginScreenMessage {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: normal;
}

#loginMainDiv #centerBox .divLoginbox {
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgb(30 41 59 / 12%);
}

/* the glassy theme gives fields and button a shine with inset shadows */
#loginMainDiv #centerBox .divLoginbox input,
#loginMainDiv #centerBox .divLoginbox select {
  box-shadow: none;
  background-image: none;
}

#loginMainDiv #centerBox .divLoginbox input:not([type="checkbox"]):not([type="submit"]),
#loginMainDiv #centerBox .divLoginbox select {
  border: 1px solid var(--kaplai-feldrand);
  border-radius: 6px;
}

#loginMainDiv #centerBox .divLoginbox input:focus-visible,
#loginMainDiv #centerBox .divLoginbox select:focus-visible {
  outline: 2px solid var(--kaplai-akzent);
  outline-offset: 1px;
}

#loginMainDiv #centerBox .divLoginbox input[type="checkbox"] {
  accent-color: var(--kaplai-akzent);
}

#loginMainDiv #centerBox .divLoginbox input[type="submit"] {
  border: 0;
  border-radius: 6px;
  font-weight: 600;
}

#loginMainDiv #centerBox .divLoginbox input[type="submit"]:hover,
#loginMainDiv #centerBox .divLoginbox input[type="submit"]:focus-visible {
  background-color: var(--kaplai-akzent-dunkel);
}

/* EGroupware puts the logo below the form when the window is lower than 850 px (phones, laptops) */
@media (max-height: 850px) {
  #loginMainDiv #divAppIconBar {
    order: 0;
  }
  #loginMainDiv #login_logo {
    padding: 24px 0 8px;
    max-height: 96px;
  }
}

/* narrow screens: each label above its field */
@media (max-width: 480px) {
  #loginMainDiv #centerBox .divLoginbox {
    padding-inline: var(--sl-spacing-large, 1.25rem);
  }
  #loginMainDiv #centerBox .divLoginbox > div:not([class*="hidden"]):not(.centered):not(.remember_me_row) {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  #loginMainDiv #centerBox .divLoginbox > div:not([class*="hidden"]) > span,
  #loginMainDiv #centerBox .divLoginbox div.remember_me_row label {
    width: auto;
  }
  #loginMainDiv #centerBox .divLoginbox div.remember_me_row {
    gap: 12px;
  }
  #loginMainDiv #centerBox .divLoginbox input:not([type="checkbox"]) {
    width: 100%;
    box-sizing: border-box;
  }
}

/* the bar of the app links becomes the edge with the Kaplai mark */
#loginMainDiv:not(.stockLoginBackground) #login_footer,
div#login_footer {
  background: none;
  justify-content: flex-end;
  padding-inline: 24px;
  box-sizing: border-box;
  pointer-events: none;
}

div#login_footer::after {
  content: "Kaplai";
  padding-left: 30px;
  background: url("/branding/kaplai/zeichen.svg") left center / 24px 24px no-repeat;
  color: var(--kaplai-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  opacity: 0.8;
}