:root {
  --background-color-light: #f5f7fa;
  --background-color-dark: #1a1c22;
  --sidebar-color-light: #1b1c1d;

  --theme-light-color: rgba(152, 152, 152, 0.3);
  --tcm-blue-color: rgb(99, 145, 210);

  /* Same as fomantic ui red */
  --support-button-color: #db2828;
  --red-mixin: 0%;
}

html {
  height: 100%;
}

/* Background: deep vignette with a centred radial glow */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--background-color-dark);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(99, 145, 210, 0.08) 0%, transparent 70%),
    linear-gradient(160deg, #1a1c22 0%, #0f1117 100%);
}

/* Subtle dot-grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

#login {
  /* Center on page */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(420px, 90vw);
  padding: 48px 44px 40px;
  box-sizing: border-box;

  --mixed-bg: color-mix(in srgb, rgba(255, 0, 0, 20%) var(--red-mixin, 0%), rgba(99, 145, 210, 10%));
  background: linear-gradient(160deg, rgba(30, 33, 42, 0.85), var(--mixed-bg));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  border-radius: 16px;

  animation: slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  z-index: 1;
}

/* Logo */
#login img,
#login .svg-container {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 80px;
  max-height: 80px;
}

/* App name below logo */
#login .app-name {
  margin: 10px 0 28px;
  padding: 0;
  color: color-mix(in srgb, red var(--red-mixin, 0%), var(--tcm-blue-color));
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  transition: color 0.4s;
}

#login .segment {
  background: unset;
}

#login .field {
  position: relative;
  margin-bottom: 36px;
}

/* Icon container: reset Fomantic sizing so floating label still works */
#login .field .ui.input {
  width: 100%;
}

#login .field input {
  width: 100%;
  padding: 10px 0 10px 28px !important;
  font-size: 16px;
  color: white;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, red var(--red-mixin, 0%), rgba(255,255,255,0.25)) !important;
  border-radius: 0 !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color 0.3s;
}

#login .field input:focus {
  border-bottom-color: color-mix(in srgb, red var(--red-mixin, 0%), var(--tcm-blue-color)) !important;
}

/* Fomantic icon inside the input */
#login .field .ui.input > i.icon {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s;
  left: -5px;
}

#login .field .ui.input:focus-within > i.icon {
  color: color-mix(in srgb, red var(--red-mixin, 0%), var(--tcm-blue-color));
}

#login .field label {
  position: absolute;
  top: 0;
  left: 28px;
  padding: 10px 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition: top 0.25s, left 0.25s, font-size 0.25s, color 0.25s;
}

#login .text.field input:focus ~ label,
#login .text.field input:valid ~ label {
  top: -20px;
  left: 0;
  color: color-mix(in srgb, red var(--red-mixin, 0%), var(--tcm-blue-color));
  font-size: 12px;
}

/* Login button */
#login-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  background: color-mix(in srgb, red var(--red-mixin, 0%), var(--tcm-blue-color));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 18px rgba(99, 145, 210, 0.25);
}

#login-btn:hover:not(:disabled) {
  background: color-mix(in srgb, red var(--red-mixin, 0%), rgb(120, 163, 225));
  box-shadow:
    0 0 8px color-mix(in srgb, red var(--red-mixin, 0%), var(--tcm-blue-color)),
    0 0 24px color-mix(in srgb, red var(--red-mixin, 0%), rgba(99, 145, 210, 0.5));
  transform: translateY(-1px);
}

#login-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99, 145, 210, 0.2);
}

#login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#login .forgot {
  cursor: pointer;
  display: inline-block;
  left: 50%;
  transform: translate(-50%);
  position: relative;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8em;
  transition: color 0.2s;
  text-decoration: none;
}

#login .forgot:hover,
#login .forgot:focus {
  color: crimson;
}

/* Animate logo */
svg .svg-elem-1 {
  fill: transparent;
  -webkit-transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.2s;
          transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.2s;
}

svg.active .svg-elem-1 {
  --layer-color: rgb(99, 145, 210);
}

svg .svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.27s;
          transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.27s;
}

svg.active .svg-elem-2 {
  --layer-color: white;
}

svg .svg-elem-3 {
  fill: transparent;
  -webkit-transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.34s;
          transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.34s;
}

svg.active .svg-elem-3 {
  --layer-color: rgb(99, 145, 210);
}

svg .svg-elem-4 {
  fill: transparent;
  -webkit-transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.41s;
          transition: fill 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.41s;
}

svg.active .svg-elem-4 {
  --layer-color: white;
}

svg.active * {
  fill: color-mix(in srgb, crimson var(--red-mixin, 0%), var(--layer-color));
}