:root {
  /* EDi Color Palette - Primary Brand Colors */
  --edi-violet-300: #e4dcff;
  --edi-violet-500: #7f6fbd;
  --edi-violet-600: #6a52bf;
  --edi-violet-700: #5741a9;
  --edi-violet-800: #442f8e;
  /* EDi Color Palette - Grayscale */
  --edi-grayscale-100: #ffffff;
  --edi-grayscale-200: #f8f9fb;
  --edi-grayscale-300: #ebebeb;
  --edi-grayscale-350: #e4e4e4;
  --edi-grayscale-400: #d6d6d6;
  --edi-grayscale-500: #acacac;
  --edi-grayscale-600: #747474;
  --edi-grayscale-700: #3a3a3a;
  --edi-grayscale-800: #000000;
  /* EDi Color Palette - Status Colors */
  --edi-red-300: #fad9d9;
  --edi-red-500: #e06967;
  --edi-red-700: #d53734;
  --edi-red-800: #ba2926;
  --edi-yellow-50: #fffacb;
  --edi-yellow-100: #fbe92d;
  --edi-yellow-300: #ffc000;
  --edi-green-50: #bce4bf;
  --edi-green-300: #84d858;
  --edi-green-400: #5fb23a;
  --edi-green-600: #1d8c1d;
  --edi-green-800: #0d5c0d;
  --edi-blue-50: #b8e1ff;
  --edi-blue-200: #34aaff;
  --edi-blue-800: #3e57ff;
  --edi-blue-900: #00477a;
  --edi-blue-950: #002a47;
  --edi-orange-300: #fe9316;
  /* Semantic Color Variables */
  --primary: var(--edi-violet-600);
  --primary-800: var(--edi-violet-800);
  --text: var(--edi-grayscale-700);
  --muted: var(--edi-grayscale-500);
  --bg: var(--edi-grayscale-100);
  --card: var(--edi-grayscale-100);
  /* Design System Variables */
  --shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.06);
  --radius: 1rem;
  /* Common Measurements */
  --base-font-size: 14px;
  --input-height: 40px;
  --button-height: 35px;
  --border-radius-small: 0.5rem;
  --border-radius-medium: 5px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 3rem;
}

/* Text Color Utilities */
.color-primary {
  color: var(--primary) !important;
}

.color-violet-300 {
  color: var(--edi-violet-300) !important;
}

.color-violet-500 {
  color: var(--edi-violet-500) !important;
}

.color-violet-600 {
  color: var(--edi-violet-600) !important;
}

.color-violet-700 {
  color: var(--edi-violet-700) !important;
}

.color-violet-800 {
  color: var(--edi-violet-800) !important;
}

.color-grayscale-100 {
  color: var(--edi-grayscale-100) !important;
}

.color-grayscale-200 {
  color: var(--edi-grayscale-200) !important;
}

.color-grayscale-300 {
  color: var(--edi-grayscale-300) !important;
}

.color-grayscale-350 {
  color: var(--edi-grayscale-350) !important;
}

.color-grayscale-400 {
  color: var(--edi-grayscale-400) !important;
}

.color-grayscale-500 {
  color: var(--edi-grayscale-500) !important;
}

.color-grayscale-600 {
  color: var(--edi-grayscale-600) !important;
}

.color-grayscale-700 {
  color: var(--edi-grayscale-700) !important;
}

.color-grayscale-800 {
  color: var(--edi-grayscale-800) !important;
}

.color-red-300 {
  color: var(--edi-red-300) !important;
}

.color-red-500 {
  color: var(--edi-red-500) !important;
}

.color-red-700 {
  color: var(--edi-red-700) !important;
}

.color-red-800 {
  color: var(--edi-red-800) !important;
}

.color-yellow-50 {
  color: var(--edi-yellow-50) !important;
}

.color-yellow-100 {
  color: var(--edi-yellow-100) !important;
}

.color-yellow-300 {
  color: var(--edi-yellow-300) !important;
}

.color-green-50 {
  color: var(--edi-green-50) !important;
}

.color-green-300 {
  color: var(--edi-green-300) !important;
}

.color-green-400 {
  color: var(--edi-green-400) !important;
}

.color-green-600 {
  color: var(--edi-green-600) !important;
}

.color-green-800 {
  color: var(--edi-green-800) !important;
}

.color-blue-50 {
  color: var(--edi-blue-50) !important;
}

.color-blue-200 {
  color: var(--edi-blue-200) !important;
}

.color-blue-800 {
  color: var(--edi-blue-800) !important;
}

.color-blue-900 {
  color: var(--edi-blue-900) !important;
}

.color-blue-950 {
  color: var(--edi-blue-950) !important;
}

.color-orange-300 {
  color: var(--edi-orange-300) !important;
}

/* Background Color Utilities */
.bg-violet-300 {
  background-color: var(--edi-violet-300) !important;
}

.bg-violet-500 {
  background-color: var(--edi-violet-500) !important;
}

.bg-violet-600 {
  background-color: var(--edi-violet-600) !important;
}

.bg-violet-700 {
  background-color: var(--edi-violet-700) !important;
}

.bg-violet-800 {
  background-color: var(--edi-violet-800) !important;
}

.bg-grayscale-100 {
  background-color: var(--edi-grayscale-100) !important;
}

.bg-grayscale-200 {
  background-color: var(--edi-grayscale-200) !important;
}

.bg-grayscale-300 {
  background-color: var(--edi-grayscale-300) !important;
}

.bg-grayscale-350 {
  background-color: var(--edi-grayscale-350) !important;
}

.bg-grayscale-400 {
  background-color: var(--edi-grayscale-400) !important;
}

.bg-grayscale-500 {
  background-color: var(--edi-grayscale-500) !important;
}

.bg-grayscale-600 {
  background-color: var(--edi-grayscale-600) !important;
}

.bg-grayscale-700 {
  background-color: var(--edi-grayscale-700) !important;
}

.bg-grayscale-800 {
  background-color: var(--edi-grayscale-800) !important;
}

.bg-red-300 {
  background-color: var(--edi-red-300) !important;
}

.bg-red-500 {
  background-color: var(--edi-red-500) !important;
}

.bg-red-700 {
  background-color: var(--edi-red-700) !important;
}

.bg-red-800 {
  background-color: var(--edi-red-800) !important;
}

.bg-yellow-50 {
  background-color: var(--edi-yellow-50) !important;
}

.bg-yellow-100 {
  background-color: var(--edi-yellow-100) !important;
}

.bg-yellow-300 {
  background-color: var(--edi-yellow-300) !important;
}

.bg-green-50 {
  background-color: var(--edi-green-50) !important;
}

.bg-green-300 {
  background-color: var(--edi-green-300) !important;
}

.bg-green-400 {
  background-color: var(--edi-green-400) !important;
}

.bg-green-600 {
  background-color: var(--edi-green-600) !important;
}

.bg-green-800 {
  background-color: var(--edi-green-800) !important;
}

.bg-blue-50 {
  background-color: var(--edi-blue-50) !important;
}

.bg-blue-200 {
  background-color: var(--edi-blue-200) !important;
}

.bg-blue-800 {
  background-color: var(--edi-blue-800) !important;
}

.bg-blue-900 {
  background-color: var(--edi-blue-900) !important;
}

.bg-blue-950 {
  background-color: var(--edi-blue-950) !important;
}

.bg-orange-300 {
  background-color: var(--edi-orange-300) !important;
}

* {
  box-sizing: border-box;
}

html {
  background: #442f8e !important;
}

html,
body {
  height: 100%;
}

::selection {
  color: white !important;
  background: var(--primary) !important;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Work Sans", sans-serif !important;
  font-size: 14px !important;
  color: #3a3a3a !important;
  background-color: #ebebeb !important;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  z-index: 10;
  -webkit-font-smoothing: antialiased;
}

/* Centering shell */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* Card */
.card {
  width: 92vw;
  max-width: 520px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.card-header {
  text-align: center;
  margin-bottom: 18px;
}

.logo {
  height: 32px;
  display: block;
}

.card-title {
  margin: 6px 0 18px 0;
  font-weight: 600;
  font-size: 22px;
}

label {
  margin-bottom: 6px;
  font-weight: bold;
  color: #3a3a3a;
}

.form-control {
  outline: 0;
  background-color: #fff !important;
  background-image: none !important;
  border-radius: 0.5rem !important;
  color: var(--edi-grayscale-700) !important;
  display: inline-block;
  font-size: 1em !important;
  height: 40px !important;
  line-height: 1.42857143;
  padding: 6px 20px !important;
  width: 100% !important;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s !important;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
  box-shadow: none !important;
  border: 1px solid #acacac !important;
}

.e-control-wrapper {
  padding: 4px 18px !important;
}

.e-control-wrapper .e-input {
  padding-left: 0 !important;
}

input[type="email"]:focus,
input.form-control:focus,
input.form-control:focus-visible,
.e-input-focus {
  outline: #6a52bf 1px solid;
  border: #6a52bf 1px solid;
}

select.form-select {
  border: 1px solid #acacac !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-select:focus,
select.form-select:focus-visible {
  outline: #6a52bf 1px solid !important;
  border: #6a52bf 1px solid !important;
}

input.form-control:disabled {
  background: #ebebeb !important;
}

input.form-control:read-only {
  background: #f5f5f5 !important;
}

.input-group-text {
  border-radius: 0.5rem 0 0 0.5rem !important;
  background-color: #f8f9fb !important;
}

.input-group input[type="email"] {
  border-radius: 0px 0.5rem 0.5rem 0px !important;
}

select {
  box-shadow: none !important;
}

button[type="submit"],
.btn {
  font-size: 14px !important;
  width: 100%;
  height: 35px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.02s ease;
  font-weight: 500;
}

button[type="submit"],
.btn-primary {
  border: 0;
  background: var(--primary);
  color: #fff;
  margin-top: 14px;
}

button[type="submit"]:hover,
button[type="submit"]:disabled,
button[type="submit"]:focus,
.btn-primary:hover,
.btn-primary:disabled,
.btn-primary:focus {
  background: var(--primary-800);
}

button[type="submit"]:active,
button[type="submit"]:focus-visible,
.btn:active,
.btn:focus-visible {
  transform: translateY(1px);
}

button[type="submit"]:active,
button[type="submit"]:focus-visible,
.btn-primary:active,
.btn-primary:focus-visible {
  background: var(--primary-800) !important;
}

button[type="submit"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(106, 82, 191, 0.5) !important;
}

/* Helpers */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--muted);
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

/* Footer */
.page-footer {
  margin-top: 16px;
  color: var(--muted);
  text-align: center;
}

.page-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.border-gradient {
  border: 8px transparent solid !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(
        180deg,
        rgba(87, 65, 169, 1) 0%,
        rgba(228, 220, 255, 1) 100%
      )
      border-box !important;
}

.panel {
  min-height: 363px;
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem;
  padding: 2rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.panel > main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.logo-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

a {
  color: white !important;
  text-decoration: none !important;
}

a:focus,
a:hover,
a:visited {
  color: white !important;
}

a:focus,
a:hover {
  text-decoration: underline !important;
}

.panel h2 {
  color: #4c4c4c;
  font-size: 30px;
  font-weight: 500;
  margin: 0;
}

.bg-auth {
  background: linear-gradient(180deg, #6a52bf 0%, #442f8e 100%);
}

footer {
  color: white;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.title {
  font-weight: 600;
  font-size: 2rem;
  line-height: 120%;
}

.subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--Grayscale-grayscale-700, rgba(58, 58, 58, 1));
}

.text-primary {
  color: var(--primary) !important;
}

a.text-primary:hover {
  text-decoration: underline !important;
}

a.text-primary:visited {
  color: var(--primary) !important;
}

.password-show-container {
  cursor: pointer;
  z-index: 5;
  position: absolute;
  right: 20px;
  top: 8px;
}

.password-show {
  color: var(--muted);
}

.password-show:hover {
  color: var(--primary);
}

.panel[data-in-progress="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.panel[data-in-progress="true"] * {
  pointer-events: none !important;
  user-select: none !important;
}

.panel[data-in-progress="true"] input,
.panel[data-in-progress="true"] button,
.panel[data-in-progress="true"] select,
.panel[data-in-progress="true"] textarea,
.panel[data-in-progress="true"] a {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Loading Spinner Styles */
.loading-spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  border-radius: var(--radius);
}

.spinner-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
}

.spinner-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: var(--primary);
  z-index: 1001;
}

/* Error Message Styles */
.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.error-message .error-icon {
  color: #dc3545;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.error-message .error-text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.4;
}

.error-message .error-close {
  background: none;
  border: none;
  color: #721c24;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.7;
  font-size: 1.25rem;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.error-message .error-close:hover {
  opacity: 1;
  background-color: rgba(114, 28, 36, 0.1);
}

/* Validation Summary Styles */
.validation-summary-errors {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style-type: none;
}

.validation-summary-errors li {
  margin-bottom: 0.25rem;
  position: relative;
}

.validation-summary-errors li:before {
  content: "•";
  color: #dc3545;
  position: absolute;
  left: -1rem;
}

/* Field Validation Styles */
.field-validation-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.input-validation-error,
.e-error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Success Message Styles */
.success-message {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.success-message .success-icon {
  color: #28a745;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--edi-grayscale-400) !important;
  color: var(--edi-grayscale-700) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
  background: var(--edi-grayscale-200) !important;
  border-color: var(--edi-grayscale-400) !important;
  color: var(--edi-grayscale-700) !important;
}

a.btn {
  text-decoration: none !important;
}

a.btn-outline-secondary {
  color: var(--edi-grayscale-700) !important;
}

a.btn-outline-secondary:visited {
  color: var(--edi-grayscale-700) !important;
}