/*
    Default styles for login screens. Used in Puavo SSO logins and
    puavo-web logins, and also in the "menu" screen.

    This file does not contain any secrets. It is publicly and freely
    available, without any authentication, on any puavo-web server.
*/

:root {
  --font: "Cantarell", "Ubuntu", "Noto Sans", "Arial", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --page-background: rgb(245, 246, 247);
    --page-foreground: #000;
    --title-shadow: #ccc;
    --container-foreground: #000;
    --container-background: rgb(245, 246, 247);
    --container-border: rgb(207, 214, 230);
    --generic-border: rgb(207, 214, 230);
    --service-foreground: #5294e2;
    --service-foreground-hover: #fff;
    --service-background-hover: #5294e2;
    --service-foreground-active: #fff;
    --service-background-active: #2679db;
    --input-background: #fff;
    --input-foreground: #000;
    --input-border: var(--generic-border);
    --input-border-active: #2679db;
    --button-background: rgb(252, 253, 253);
    --button-foreground: #000;
    --button-border: rgb(207, 214, 230);
    --button-foreground-disabled: rgb(152, 154, 158);
    --button-background-disabled: transparent;
    --button-background-active: rgb(211, 216, 226);
    --button-foreground-active: #000;
    --button-border-active: rgb(183, 192, 211);
    --link-foreground: #5294e2;
    --link-foreground-hover: #2679db;
    --animation-filter: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: rgb(56, 60, 74);
    --page-foreground: #fff;
    --title-shadow: #666;
    --container-foreground: #fff;
    --container-background: rgb(56, 60, 74);
    --container-border: rgb(43, 46, 57);
    --generic-border: rgb(43, 46, 57);
    --service-foreground: #5294e2;
    --service-foreground-hover: #fff;
    --service-background-hover: #5294e2;
    --service-foreground-active: #fff;
    --service-background-active: #2679db;
    --input-background: rgb(64, 69, 82);
    --input-foreground: #fff;
    --input-border: var(--generic-border);
    --input-border-active: #2679db;
    --button-background: rgb(68, 74, 88);
    --button-foreground: #fff;
    --button-border: rgb(43, 46, 57);
    --button-foreground-disabled: rgb(134, 139, 151);
    --button-background-disabled: transparent;
    --button-background-active: rgb(46, 51, 64);
    --button-foreground-active: #fff;
    --button-border-active: rgb(82, 148, 226);
    --field-error-foreground: rgb(252, 65, 56);
    --link-foreground: #5294e2;
    --link-foreground-hover: #2679db;
    --animation-filter: invert(100%);
  }
}

.hidden { display: none; }

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--page-background);
}

body {
  font-family: var(--font);
  margin: 0;
  padding: 0;
}

#container {
  margin: 1em auto;
  padding: 1em;
  color: var(--container-foreground);
  background: var(--container-background);
  width: 100%;
  max-width: 650px;   /* Empirically determined, looks "nice" */
  border: 2px solid var(--container-border);
  border-radius: 5px;
}

#serviceName {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 125%;
  text-shadow: 2px 2px 0 var(--title-shadow);
}

#serviceName span {
  font-weight: bold;
}

#services {
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
  font-size: 110%;
}

#services li {
}

#services a {
  display: block;
  padding: 0.5em;
  text-align: center;
  text-decoration: none;
  color: var(--service-foreground);
  background: transparent;
}

#services a:hover {
  background: var(--service-background-hover);
  color: var(--service-foreground-hover);
}

#services a:active, #services a:focus {
  background: var(--service-background-active);
  color: var(--service-foreground-active);
}

.logoRow {
  display: flex;
  flex-direction: rows;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.logoRow > * {
  display: inline;
}

#upperLogos {
  margin-bottom: 1em;
}

#lowerLogos {
  margin: 1em 0;
}

#headerText {
  text-align: center;
  margin-bottom: 1em;
}

#error {
  background: #d00;
  border-radius: 5px;
  color: #f4f4f4;
  display: block;
  margin: 1em auto;
  padding: 0.75em;
  text-align: center;
  font-size: 90%;
}

form {
  margin: 1em auto;
  padding: 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

fieldset > .row {
  padding: 0.5em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

fieldset > .mfa_row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.col-username {
  flex-grow: 2;   /* shrink the domain name to minimum possible width */
}

.col-orgname {
  margin-left: 0.5em;
}

#username, #password {
  margin: 0;
  padding: 0.5em;
  width: 100%;
  font-size: 100%;
}

#animation {
  display: inline-block;
  visibility: hidden;
  width: 24px;  /* set in the embedded SVG itself, don't touch */
  margin-left: 64px;
  margin-right: 20px;
  filter: var(--animation-filter);
}

#submit {
  margin-right: 84px;  /* 24+40+20, see #animation above */
  flex-grow: 2;
}

#submit:disabled {
  background: var(--button-background-disabled);
  color: var(--button-foreground-disabled);
}

::placeholder {
  font-style: italic;
}

input[type="text"], input[type="password"] {
  padding: 5px;
  border: 1px solid var(--input-border);
  background: var(--input-background);
  color: var(--input-foreground);
  border-radius: 3px;
  outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid var(--input-border-active);
  background: var(--input-background);
  color: var(--input-foreground);
}

button, input[type="submit"] {
  background: var(--button-background);
  color: var(--button-foreground);
  border: 1px solid var(--button-border);
  padding: 10px 25px;
  border-radius: 3px;
}

button:hover, button:focus {
  outline: 1px solid var(--input-border-focused);
}

button:active, input[type="submit"]:active {
  border-color: var(--button-border-active);
  background: var(--button-background-active);
  color: var(--button-foreground-active);
  outline: none;
}

button:disabled, input[type="submit"]:disabled, input[type="submit"]:active:disabled {
  background: var(--button-background);
  border: 1px solid var(--button-border);
  color: var(--button-foreground-disabled);
}

#help {
  padding: 0;
  margin: 0 auto;
}

#help a {
  color: var(--link-foreground);
  white-space: nowrap;
  text-decoration: none;
}

#help a:hover {
  color: var(--link-foreground-hover);
  text-decoration: underline;
}

#help .support-info {
  text-align: center;
  font-size: 90%;
}

#help summary {
  font-weight: bold;
  outline: none;
  cursor: pointer;
  padding: 0.25em;
}

#help summary:hover {
  color: var(--link-foreground-hover);
}

#help details {
  margin: 0;
  padding: 0;
  font-size: 75%;
}

#help details p {
  margin-top: 0.5em;
  margin-left: 2em;
}

p#mfa_help {
  margin-top: 0;
  text-align: center;
}

p#mfa_help2 {
  margin-top: 0;
  margin-bottom: 2em;
  text-align: center;
  font-size: 80%;
}

input#mfa_code {
  margin: 0 auto;
  font-family: monospace;
  font-size: 120%;
  text-align: center;
}

div#mfa_invalid_code {
  background: #fdd;
  border-radius: 5px;
  color: #f00;
  width: 75%;
  margin: 0 auto;
  padding: 0.75em;
  text-align: center;
  font-size: 90%;
}

@media screen and (max-width: 670px) {
  #container {
    margin: 0 auto;
    max-width: reset;
    border: none;
  }
}

footer.public {
  text-align: center;
  font-size: 75%;
  color: #888;
  min-width: 600px;
  max-width: 800px;
  margin: 20px auto;
  padding-top: 10px;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

footer > * {
  padding: 0;
  margin: 0;
}