:root {
  --logoColor:          #000;
  --textColor:          rgba(0, 0, 0, .87); /* same as semantic ui */
  --siteBackground:     #dadada;

  --segmentBackground:  #fff;
  --segmentBorder:      rgba(225, 225, 225, 0.12);

  /* inputs */
  --inputBackground:    #fff;
  --labelColor:         #000;
  --placeholderColor:   rgba(191, 191, 191, 0.87); /* same as semantic ui */

  /* messages */
  --infoText:           #276f86;
  --infoHeader:         #0e566c;
  --infoBackground:     #f8ffff;

  --errorText:          #9f3a38;
  --errorHeader:        #912d2b;
  --errorBackground:    #fff6f6;

  --warningText:        #573a08;
  --warningHeader:      #794b02;
  --warningBackground:  #fffaf3;

  --successText:        #2c662d;
  --successHeader:      #1a531b;
  --successBackground:  #fcfff5;

  /* buttons */
  --primaryButtonBackround: #2185d0;
  --primaryButtonText: #fff;

  --primaryButtonHoverBackround: #1678c2;
  --primaryButtonHoverText: #fff;

  --primaryButtonFocusBackround: #0d71bb;
  --primaryButtonFocusText: #fff;

  --primaryButtonActiveBackround: #1a69a4;
  --primaryButtonActiveText: #fff;
}

/* Automatic dark mode */
@media (prefers-color-scheme: dark) {
  :root{
    --logoColor:          #91171c; /* darkened using chatgpt and original vr red #cd0b11 */
    --textColor:          rgba(255, 255, 255, .87);
    --siteBackground:     #111;

    --segmentBackground:  #1c1c1c;
    --segmentBorder:      rgba(225, 225, 225, 0.12);

    /* inputs */
    --inputBackground:    #2b2b2b;
    --labelColor:         #9b9b9b;
    --placeholderColor:   #666;

    /* messages */
    --infoText:           #58c4e0;
    --infoHeader:         #3aa0ba;
    --infoBackground:     #0a1a1c;

    --errorText:          #f28b88;
    --errorHeader:        #e35d5b;
    --errorBackground:    #1c0d0d;

    --warningText:        #e5c07b;
    --warningHeader:      #d19a22;
    --warningBackground:  #1a1508;

    --successText:        #8dd694;
    --successHeader:      #4fa456;
    --successBackground:  #0e1a0e;

    /* buttons */
    --primaryButtonBackround:       #339af0;
    --primaryButtonText:            #ffffff;

    --primaryButtonHoverBackround:  #228be6;
    --primaryButtonHoverText:       #ffffff;

    --primaryButtonFocusBackround:  #1c7ed6;
    --primaryButtonFocusText:       #ffffff;

    --primaryButtonActiveBackround: #1864ab;
    --primaryButtonActiveText:      #ffffff;
  }
}

/* It seems that keycloak use 14px, we are smarter and are also a11y compliant */
html {
  font-size: 16px;
}

a {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

body {
  background: var(--siteBackground);
  font-size: 16px;
}

body > .ui.grid {
  min-height: 100%;
  @media screen and (max-width: 450px) {
    margin: unset;
  }
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block; /* prevents whitespace baseline issues */
}

#kc-header {
  margin-bottom: 2rem;

  .content {
    color: var(--textColor);
    margin-top: 1rem;
  }
}

#vrLogo {
  color: var(--logoColor);
}

.logo.image {
  max-height: 48px !important;
  max-width: 40px !important;
}

body > .ui.middle.aligned.center.aligned.grid > .column {
  max-width: 450px;
  @media screen and (max-width: 450px) {
    padding: 0.5rem;
  }
}

#kc-form label {
  text-align: left;
}

.ui.segment {
  margin-bottom: 0;
  background: var(--segmentBackground);
  border-color: var(--segmentBorder);
}

.ui.segment > .ui.header {
  padding: 8px 0;
  color: var(--textColor);
}

.forgot-password-link {
  margin-top: 10px !important;
  display: block;
  text-align: center;
}

.field-error {
  margin-top: 15px !important;
}

#kc-locale {
  position: absolute;
  top: 5px;
  right: 5px;
}

#kc-form-buttons > button:last-of-type {
  margin-top: 8px;
}

#kc-form-options .checkbox label input {
  vertical-align: baseline;
}

.instruction {
  color: var(--textColor);
}

/* =======================================================================
   🎨 Semantic UI Input Overrides
   -----------------------------------------------------------------------
   These variables customize Semantic UI input colors
   (replace the default palette with your own theme values).
   ======================================================================= */

.ui.form .field .input input {
  background: var(--inputBackground);
  color: var(--textColor);
}

.ui.form .field label {
  color: var(--labelColor);
}

.ui.form .field .input input::placeholder {
  color: var(--placeholderColor);
}

.ui.form .field.error label,
.ui.form .fields.error .field label {
  color: var(--errorText);
}

.ui.form .field.error input[type=text] {
  background: var(--errorBackground);
}

.ui.form .field.error input[type=text]:focus {
  background: var(--errorBackground);
  color: var(--errorText)
}

.ui.form .field.error .input::placeholder,
.ui.form .fields.error .field .input::placeholder {
  color: var(--errorText);
}

/* =======================================================================
   🎨 Semantic UI Message Overrides
   -----------------------------------------------------------------------
   These variables customize Semantic UI message colors
   (replace the default palette with your own theme values).
   ======================================================================= */

/* Info */
.ui.info.message {
  background: var(--infoBackground);
  color: var(--infoText);
}

.ui.info.message .header {
  color: var(--infoHeader);
}

/* Error */
.ui.error.message {
  background: var(--errorBackground);
  color: var(--errorText);
}

.ui.error.message .header {
  color: var(--errorHeader);
}

/* Warning */
.ui.warning.message {
  background: var(--warningBackground);
  color: var(--warningText);
}

.ui.warning.message .header {
  color: var(--warningHeader);
}

/* Success */
.ui.success.message {
  background: var(--successBackground);
  color: var(--successText);
}

.ui.success.message .header {
  color: var(--successHeader);
}

/* =======================================================================
   🎨 Semantic UI Button Overrides
   -----------------------------------------------------------------------
   These variables customize Semantic UI button colors
   (replace the default palette with your own theme values).
   ======================================================================= */

.ui.primary.button,.ui.primary.buttons .button {
  background-color: var(--primaryButtonBackround);
  color: var(--primaryButtonText);
}

.ui.primary.button:hover,.ui.primary.buttons .button:hover {
  background-color: var(--primaryButtonHoverBackround);
  color: var(--primaryButtonHoverText);
}

.ui.primary.button:focus,.ui.primary.buttons .button:focus {
  background-color: var(--primaryButtonFocusBackround);
  color: var(--primaryButtonFocusText);
}

.ui.primary.button:active,.ui.primary.buttons .button:active {
  background-color: var(--primaryButtonActiveBackround);
  color: var(--primaryButtonActiveText);
}