@charset "utf-8";

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  /* src: url("../fonts/Rubik-VariableFont_wght.ttf") format("opentype"); Ensure path is correct */
}

/* GLOBAL - Modern Blue Gradient Theme */
:root {
  /* Base Blue Palette (from blue_gradient_css_v1) */
  --clr-blue-base: #003060;
  --clr-blue-dark: #002040;
  --clr-blue-medium: #004080;
  --clr-blue-light: #0050A0;
  --clr-blue-accent-bright: #3088FF;
  --clr-blue-accent-aqua: #60A5FA;
  --clr-blue-accent-pale: #B0CFFD;
  --clr-blue-bg-lightest: #EBF4FF;
  --clr-blue-bg-hover: #D6E6FF;
  --clr-blue-bg-gradient-start: #F0F4F8;
  --clr-blue-bg-gradient-end: #E0E8F0;

  --clr-text-primary: #1A202C;
  --clr-text-secondary: #4A5568;
  --clr-text-on-dark: #FFFFFF;
  --clr-text-on-accent: #003060;

  --clr-border-primary: #A0BBE4;
  --clr-border-light: #CBD5E0;
  --clr-input-bg: #FFFFFF;
  --clr-bg-white: #FFFFFF;
  --clr-error: #E53E3E;          /* Red for errors */
  --clr-success: #38A169;        /* Green for success */
  --clr-info-bg: var(--clr-blue-bg-lightest); /* For info messages */
  --clr-info-border: var(--clr-blue-accent-pale);
  --clr-info-text: var(--clr-blue-base);


  /* Gradients & Glows (from blue_gradient_css_v1) */
  --clr-body-bg-gradient: linear-gradient(180deg, var(--clr-blue-bg-gradient-start) 0%, var(--clr-blue-bg-gradient-end) 100%);
  --clr-button-primary-gradient: linear-gradient(45deg, var(--clr-blue-medium) 0%, var(--clr-blue-accent-bright) 100%);
  --clr-button-primary-hover-gradient: linear-gradient(45deg, var(--clr-blue-light) 0%, var(--clr-blue-medium) 100%);
  --clr-form-card-image-gradient: linear-gradient(135deg, var(--clr-blue-medium), var(--clr-blue-base));
  --clr-blob-bg-gradient: linear-gradient(135deg, var(--clr-blue-bg-lightest) 0%, var(--clr-blue-accent-aqua) 100%);
  --clr-blob-fill-gradient: linear-gradient(
    47deg,
    rgba(0, 64, 128, 0.5) 21%,  /* --clr-blue-medium with alpha */
    rgba(48, 136, 255, 0.4) 67%, /* --clr-blue-accent-bright with alpha */
    rgba(0, 80, 160, 0.3) 81%   /* --clr-blue-light with alpha */
  );


  --clr-focus-ring-glow: rgba(48, 136, 255, 0.25);
  --clr-focus-ring: 0 0 0 0.2rem var(--clr-focus-ring-glow);

  /* Shadows (from blue_gradient_css_v1) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06);


  /* Form Specific (mapped to blue theme) */
  --form-bg-color: var(--clr-bg-white);
  --form-text-color: var(--clr-text-primary);
  --form-label-color: var(--clr-text-secondary);
  --form-input-border: var(--clr-border-light);
  --form-input-focus-border: var(--clr-blue-accent-bright);
  --form-input-focus-shadow: var(--clr-focus-ring-glow);
  --form-placeholder-color: #a0aec0;

  /* Bootstrap Overrides (minimal for login, mostly custom) */
  --bs-body-bg: var(--clr-blue-bg-gradient-end); /* Fallback, actual body uses gradient */
  --bs-body-color: var(--form-text-color);
  --bs-body-font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-line-height: 1.6;
  --bs-border-radius: 0.75rem; /* Consistent with main theme's default radius */
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-sm: 0.375rem;
}

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: 1.5rem;
  margin: 0;
  background-image: var(--clr-body-bg-gradient); /* Use the blue gradient */
  background-attachment: fixed;
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 600;
  color: var(--clr-text-primary);
}
h1 {
  font-size: 1.875rem; /* 30px */
  margin-bottom: 0.75rem;
  text-align: center;
}
p {
  margin-bottom: 1rem;
  font-size: 0.9rem; /* 14.4px */
  color: var(--clr-text-secondary);
  line-height: var(--bs-body-line-height);
}
:is(a, .a) {
  color: var(--clr-blue-accent-bright); /* Blue link color */
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
:is(a, .a):where(:hover, :focus-visible) {
  color: var(--clr-blue-medium); /* Darker blue on hover */
  text-decoration: underline;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Animated Blobs Background - Blue Theme */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-image: var(--clr-blob-bg-gradient); /* Light blue/aqua gradient */
}
.blob, .blob-md, .blob-lg {
  opacity: 0.4;
  filter: blur(25px);
  background: var(--clr-blob-fill-gradient); /* Blue themed blob fill */
}

/* Effects - Entry Animation */
.fade-in-up {
  animation: fade-in-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes fade-in-up {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Form Card - Blue Inspired Design */
.form-card {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(28rem, 100%);
  max-height: calc(100vh - 3rem);
  background-color: var(--form-bg-color);
  border-radius: var(--bs-border-radius-lg); /* Consistent large radius */
  box-shadow: var(--shadow-lg); /* Use theme shadow */
  overflow: hidden;
}

.form-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--clr-form-card-image-gradient); /* Blue gradient for image area */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.form-card-logo {
  width: min(10rem, 60%);
  filter: brightness(0) invert(1); /* Keep logo white on dark bg */
}

.form-card-body {
  padding: 2rem 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.form-card-scrollable {
  /* Optional for internal spacing */
}

.info-msg, .success-msg, .error-msg {
  font-size: 0.875rem; /* 14px */
  padding: 0.75rem 1rem;
  border-radius: var(--bs-border-radius);
  margin-bottom: 1.5rem;
  border-width: 1px;
  border-style: solid;
  text-align: left;
}
.info-msg {
  color: var(--clr-info-text);
  background-color: var(--clr-info-bg);
  border-color: var(--clr-info-border);
}
.success-msg {
  color: #1c7430; /* Darker success green text */
  background-color: #f0fff4; /* Lighter green background */
  border-color: var(--clr-success); /* Success green border */
}
.error-msg {
  color: #a51825; /* Darker error red text */
  background-color: #fff0f1; /* Lighter red background */
  border-color: var(--clr-error); /* Error red border */
}

.form {
  margin-top: 1.5rem;
}
.form-label {
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  color: var(--form-label-color);
  margin-bottom: 0.5rem;
}
.form-control {
  padding: 0.875rem 1rem;
  border: 1px solid var(--form-input-border);
  border-radius: var(--bs-border-radius);
  background-color: var(--clr-input-bg);
  color: var(--form-text-color);
  font-size: 0.95rem; /* 15.2px */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  width: 100%;
  box-sizing: border-box;
}
.form-control::placeholder {
  color: var(--form-placeholder-color);
  opacity: 1;
}
.form-control:focus {
  border-color: var(--form-input-focus-border);
  box-shadow: 0 0 0 0.2rem var(--form-input-focus-shadow);
  outline: none;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
}
.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
  border: 1px solid var(--form-input-border);
  border-radius: 0.25em;
  flex-shrink: 0;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  cursor: pointer;
  appearance: none; /* For custom checkmark */
  position: relative;
}
.form-check-input:checked {
  background-color: var(--clr-blue-accent-bright); /* Blue check background */
  border-color: var(--clr-blue-accent-bright);
}
.form-check-input:checked::before { /* Custom checkmark */
  content: '';
  display: block;
  width: 0.65em;
  height: 0.35em;
  border-left: 2px solid var(--clr-text-on-accent);
  border-bottom: 2px solid var(--clr-text-on-accent);
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  margin-top: -0.25em; /* Adjust for centering */
  margin-left: -0.325em; /* Adjust for centering */
}
.form-check-input:focus {
  border-color: var(--form-input-focus-border);
  box-shadow: 0 0 0 0.2rem var(--form-input-focus-shadow);
  outline: none;
}
.form-check-label {
  font-size: 0.875rem; /* 14px */
  color: var(--clr-text-secondary);
  cursor: pointer;
}

.btn.btn-primary {
  padding: 0.875rem 1.5rem;
  border-radius: var(--bs-border-radius);
  font-weight: 600;
  font-size: 1rem; /* 16px */
  text-transform: none;
  letter-spacing: normal;
  color: var(--clr-text-on-accent);
  background-image: var(--clr-button-primary-gradient); /* Blue gradient button */
  border: none; /* Gradient handles border */
  transition: background-image 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease-in-out;
  box-shadow: var(--shadow-sm); /* Use theme shadow */
  width: 100%;
}
.btn.btn-primary:hover {
  background-image: var(--clr-button-primary-hover-gradient); /* Darker blue gradient on hover */
  transform: translateY(-1px);
  box-shadow: var(--shadow-md); /* Use theme shadow */
}
.btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  filter: brightness(0.95);
}

/* Desktop View - Two Column Layout */
@media (min-width: 60rem) { /* e.g., 960px */
  body {
    padding: 2rem;
  }
  .form-card {
    grid-template-columns: minmax(320px, 0.75fr) 1fr;
    grid-template-rows: 1fr;
    width: min(60rem, 90vw);
    min-height: min(35rem, 80vh);
    max-height: min(42rem, 90vh);
    border-radius: 1.25rem; /* 20px */
  }
  .form-card-image {
    padding: 3rem;
    background: var(--clr-form-card-image-gradient); /* Consistent blue gradient */
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .form-card-logo {
    width: min(15rem, 70%);
  }
  .form-card-body {
    padding: 3rem 3.5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  h1 {
    font-size: 2rem; /* 32px */
    margin-bottom: 1rem;
  }
  .form {
    margin-top: 2rem;
  }
}

/* Blob Animations (original animations kept, colors updated via .blob class) */
.blob {
  position: absolute;
  opacity: 0.3;
  width: 400px;
  aspect-ratio: 1/1;
  animation: animate 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite
    alternate forwards;
  filter: blur(20px);
  z-index: -100;
  top: 30%;
}

@keyframes animate {
  0% {
    transform: translate(40%, -25%);
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    transform: translate(0%, 13%);
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    transform: translate(-45%, 39%);
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.05;
  }
}

.blob-md {
  position: absolute;
  opacity: 0.3;
  width: 700px;
  aspect-ratio: 1/1;
  animation: animate-md 15s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite
    alternate forwards;
  filter: blur(20px);
  z-index: -100;
  top: 70%;
  left: 60%;
}

@keyframes animate-md {
  0% {
    transform: translate(20%, -15%);
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    transform: translate(35%, 23%);
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    transform: translate(-14%, 24%);
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 0.75;
  }
}

.blob-lg {
  position: absolute;
  opacity: 0.3;
  width: 900px;
  aspect-ratio: 1/1;
  animation: animate-lg 20s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite
    alternate forwards;
  filter: blur(20px);
  z-index: -100;
  top: -50%;
  left: 30%;
}


@keyframes animate-lg {
  0% {
    transform: translate(-25%, 50%);
    border-radius: 60% 40% 30% 70% / 100% 85% 92% 74%;
  }
  50% {
    transform: translate(35%, 13%);
    border-radius: 20% 71% 47% 70% / 81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.25;
  }
  100% {
    transform: translate(-45%, 39%);
    border-radius: 100% 75% 92% 74% / 60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.15;
  }
}