@font-face {
  font-family: "Juko Futura";
  src: local("Futura-Medium");
  font-weight: 400 500;
}
@font-face {
  font-family: "Juko Futura";
  src: local("Futura-Bold");
  font-weight: 600 900;
}

:root {
  --moi-tausta: #1e2129;
  --moi-teksti: #a3aead;
  --moi-vaalea: #d3dcdb;
  --moi-painike: #f4ecd9;
  --moi-fontti: "Juko Futura", Futura, "Century Gothic", sans-serif;
}

html[data-cms-view="loading"],
html[data-cms-view="login"],
body:has(.page-content.user.signin),
body:has(.oauth2-authorize-application-box) {
  color-scheme: dark;
  background: var(--moi-tausta);
  color: var(--moi-teksti);
  font-family: var(--moi-fontti);
}

html:is([data-cms-view="loading"], [data-cms-view="login"]) body,
body:has(.page-content.user.signin),
body:has(.oauth2-authorize-application-box) {
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  background: var(--moi-tausta);
  font-family: var(--moi-fontti);
  -webkit-font-smoothing: antialiased;
}

body:has(.page-content.user.signin) #navbar,
body:has(.oauth2-authorize-application-box) #navbar,
body:has(.page-content.user.signin) .page-footer,
body:has(.oauth2-authorize-application-box) .page-footer {
  display: none;
}

body:has(.page-content.user.signin) .full.height,
body:has(.oauth2-authorize-application-box) .full.height {
  padding: 0;
}

:is(.page-content.user.signin, .oauth2-authorize-application-box) {
  box-sizing: border-box;
  display: grid;
  min-height: 100svh;
  width: 100%;
  padding: 56px 24px;
  align-content: center;
  color: var(--moi-teksti);
}

.signin > .ui.page.grid,
.oauth2-authorize-application-box > .column {
  width: min(100%, 368px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.signin > .ui.page.grid > .column {
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 20px;
}

:is(.signin, .oauth2-authorize-application-box) :is(.ui.container.fluid, .ui.attached.segment) {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--moi-teksti);
}

:is(.signin, .oauth2-authorize-application-box) :is(h3, h4).ui.top.attached.header {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--moi-teksti);
  font-family: var(--moi-fontti);
  font-size: clamp(28.125px, 3.2vw, 43.938px);
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}

:is(.signin, .oauth2-authorize-application-box) :is(h3, h4).ui.top.attached.header::before {
  display: block;
  width: 160px;
  height: 21px;
  margin: 0 0 36px;
  background: url("./assets/juko-logo-black.png") left center / contain no-repeat;
  filter: invert(.9);
  content: "";
}

:is(.signin, .oauth2-authorize-application-box) .ui.form {
  font-family: var(--moi-fontti);
  font-size: 17px;
}

.page-content.user.signin form.ui.form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.page-content.user.signin form.ui.form .ui.top.attached.header {
  padding: 0 !important;
  text-align: left;
}

:is(.signin, .oauth2-authorize-application-box) .ui.form .field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--moi-teksti);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.signin .ui.form .field {
  margin: 0 0 20px;
}

.signin .ui.form input:not([type="checkbox"]):not([type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid #7b8590;
  border-radius: 0;
  background: var(--moi-painike);
  color: var(--moi-tausta);
  font: inherit;
  line-height: 1.5;
  box-shadow: none;
}

:is(.signin, .oauth2-authorize-application-box) .ui.checkbox label,
:is(.signin, .oauth2-authorize-application-box) p,
:is(.signin, .oauth2-authorize-application-box) a {
  color: var(--moi-teksti);
  font-family: var(--moi-fontti);
  font-size: 16px;
  line-height: 1.5;
}

:is(.signin, .oauth2-authorize-application-box) a {
  text-decoration: none;
}

:is(.signin, .oauth2-authorize-application-box) a:hover {
  color: var(--moi-tausta);
}

:is(.signin, .oauth2-authorize-application-box) .ui.button {
  box-sizing: border-box;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--moi-painike);
  color: var(--moi-tausta);
  font-family: var(--moi-fontti);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
}

:is(.signin, .oauth2-authorize-application-box) .ui.button:hover {
  background: var(--moi-vaalea);
}

:is(.signin, .oauth2-authorize-application-box) :is(input, button, a):focus-visible,
:is(.signin, .oauth2-authorize-application-box) .ui.form :is(input, button, a):focus-visible {
  outline: 3px solid var(--moi-vaalea);
  outline-offset: 4px;
}

:is(.signin, .oauth2-authorize-application-box) .ui.negative.message {
  width: 100%;
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid #9c5561;
  border-radius: 0;
  background: #faf0f2;
  color: #6d2434;
  font-family: var(--moi-fontti);
  font-size: 17px;
  line-height: 1.5;
  box-shadow: none;
}

html:is([data-cms-view="loading"], [data-cms-view="startup-error"]) .juko-loading-screen {
  box-sizing: border-box;
  background: var(--moi-tausta);
  color: var(--moi-teksti);
  font-family: var(--moi-fontti);
  gap: 32px;
}

.juko-loading-logo {
  width: min(160px, 60vw);
  height: auto;
}

.juko-loading-screen p {
  color: var(--moi-teksti);
  font-family: var(--moi-fontti);
  font-size: 17px;
  line-height: 1.5;
}

html[data-cms-view="login"] #nc-root .sui.app-shell .main {
  overflow: visible;
  background: transparent;
}

html[data-cms-view="login"] #nc-root .sui.app-shell .main::before,
html[data-cms-view="login"] #nc-root .sui.app-shell .main::after {
  display: none;
}

html[data-cms-view="login"] #nc-root .sui.app-shell .inner > .logo,
.juko-logout__logo {
  width: min(160px, 60vw);
  height: auto;
  margin-bottom: 32px;
  transform: none;
}

html[data-cms-view="login"] #nc-root .sui.button[data-login-action],
.juko-logout__action {
  min-height: 54px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--moi-painike);
  color: var(--moi-tausta);
  font-family: var(--moi-fontti);
  font-size: 17px;
  line-height: 1.5;
  text-shadow: none;
  box-shadow: none;
}

html[data-cms-view="login"] #nc-root .sui.button[data-login-action]::before {
  display: none;
}

html[data-cms-view="login"] #nc-root .sui.button[data-login-action] :is(.label, .truncated-text) {
  white-space: normal;
  overflow: visible;
}

.juko-logout :is(h1, p, a) {
  font-family: var(--moi-fontti);
  line-height: 1.5;
  text-decoration: none;
}

@media (max-width: 420px) {
  :is(.page-content.user.signin, .oauth2-authorize-application-box) {
    padding: 36px 24px;
  }
}

html[data-cms-view="login"] #nc-root > .sui.app-shell {
  --sui-control-font-family: var(--moi-fontti);
  --sui-font-family-default: var(--moi-fontti);
  --sui-heading-font-family: var(--moi-fontti);
  --sui-textbox-font-family: var(--moi-fontti);
}

html[data-cms-view="login"] #nc-root .buttons > [role="alert"] {
  margin: 0 0 16px;
  color: #f4ecd9;
  font-family: var(--moi-fontti);
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
}

.signin:has(#user_name) h4.ui.top.attached.header {
  font-size: 0;
  margin-bottom: 0;
}

:is(.signin, .oauth2-authorize-application-box) .ui.button:is(:focus, :active),
.oauth2-authorize-application-box .ui.basic.primary.button {
  background: var(--moi-painike);
  color: var(--moi-tausta) !important;
}

:is(.signin, .oauth2-authorize-application-box) a:is(:hover, :focus-visible) {
  color: var(--moi-vaalea);
}

.oauth2-authorize-application-box .ui.raised.segments {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.juko-loading-logo,
html[data-cms-view="login"] #nc-root .sui.app-shell .inner > .logo,
.juko-logout__logo {
  filter: invert(.9);
}

.juko-logout {
  background: var(--moi-tausta);
  color: var(--moi-teksti);
  font-family: var(--moi-fontti);
}

.juko-logout h1,
.juko-logout p,
.juko-logout__account,
.juko-logout__github {
  color: var(--moi-teksti);
}

:is(.signin, .oauth2-authorize-application-box) .ui.negative.message :is(p, a) {
  color: inherit;
}

html[data-cms-view="login"] #nc-root > .sui.app-shell {
  --sui-foreground-color-1-hsl: 174 6% 66%;
  --sui-foreground-color-2-hsl: 174 6% 66%;
  --sui-button-large-border-radius: 0;
  --sui-button-medium-border-radius: 0;
  --sui-button-small-border-radius: 0;
  --sui-focus-ring-color: #d3dcdb;
  color: var(--moi-teksti);
}

html[data-cms-view="login"] #nc-root .sui.button[data-login-action]:not(:disabled):is(:hover, :active, :focus-visible),
.juko-logout__action:is(:hover, :focus-visible) {
  background: var(--moi-vaalea);
  filter: none;
}

html[data-cms-view="login"] #nc-root .sui.button[data-login-action]:focus-visible,
.juko-logout :is(a, button):focus-visible {
  outline: 3px solid var(--moi-vaalea);
  outline-offset: 4px;
}