/* COASSESS static login fallback — values taken from the live app's computed styles. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/inter-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/inter-greek-500-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/inter-greek-700-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

:root {
  --primary: #125773;
  --primary-accent: #27cdf2;
  --danger: #f1416c;
  --text: #181c32;
  --text-label: #181c32;
  --input-text: #334155;
  --input-border: #e1e3ea;
  --input-border-hover: #94a3b8;
  --bg-light-primary: #f1fafe;
  font-size: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: rgb(241, 250, 255);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }

/* ---------- Layout (mobile first: brand on top, form below) ---------- */
.auth { display: flex; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; }
.auth__form-side {
  order: 2; display: flex; justify-content: center; align-items: center;
  width: 100%; padding: 1rem; background: rgb(241, 250, 255);
}
.auth__container { width: 100%; max-width: 400px; }
.auth__brand-side {
  order: 1; display: flex; justify-content: center; align-items: center; width: 100%;
  background: #30466e url("assets/login-bg.jpg") center center / cover no-repeat;
}
.auth__brand-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 3.75rem 1.25rem; }
.auth__brand-inner a { display: block; width: 100%; }
.brand-logo { width: 100%; max-width: 100%; height: auto; }

@media (min-width: 1024px) {
  .auth { flex-direction: row; height: 100vh; min-height: 560px; }
  .auth__form-side { order: 1; width: 50%; overflow-y: auto; }
  .auth__brand-side { order: 2; width: 50%; }
  .auth__brand-inner { padding: 3.75rem; }
}

/* ---------- Panel ---------- */
.auth-panel__head { text-align: center; margin-bottom: 1.25rem; }
.login-logo { width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
@media (max-width: 425px) { .login-logo { max-width: 260px; } }
.auth-panel__title { display: flex; justify-content: center; align-items: center; gap: .75rem; }
.auth-panel__title h1 { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.5; color: var(--text); }
.lang-toggle { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 2px; }
.lang-toggle:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }

/* Unavailability notice — single quiet line */
.notice {
  margin: 0 0 1.5rem; padding: 0;
  color: #5a6473; font-size: .8125rem; line-height: 1.45; text-align: center;
}

/* Error alert (shown after submission) */
.alert {
  margin: 0 0 1.25rem; padding: .75rem .875rem;
  background: #fff5f8; border: 1px solid #f8c4d1; border-radius: 6px;
  color: #c71f4a; font-size: .9375rem; line-height: 1.45;
}
.alert[hidden] { display: none; }

/* ---------- Form ---------- */
.form { width: 100%; }
.field { display: flex; flex-direction: column; }
.mb-8 { margin-bottom: 2rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-4 { margin-bottom: 1rem; }
.field__label { font-weight: 700; color: var(--text-label); margin-bottom: .25rem; font-size: 1rem; line-height: 1.5; }
.form-control {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.2; color: var(--input-text);
  background-color: transparent; background-repeat: no-repeat;
  border: 1px solid var(--input-border); border-radius: 5px;
  padding: .65rem; height: 37px;
  box-shadow: 0 1px 2px 0 rgba(18, 18, 23, .05);
  transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.form-control:hover { border-color: var(--input-border-hover); }
.form-control:focus { outline: 0; border-color: var(--primary); }
.form-control.is-invalid,
.form-control.is-invalid:hover,
.form-control.is-invalid:focus {
  border-color: var(--danger);
  padding-right: calc(1.5em + 1.55rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f1416c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f1416c' stroke='none'/%3e%3c/svg%3e");
  background-position: right calc(.375em + .3875rem) center;
  background-size: calc(.75em + .775rem) calc(.75em + .775rem);
}
.field__error { margin-top: .5rem; font-size: .875rem; line-height: 1.2; color: var(--danger); }
.field__error[hidden] { display: none; }

.forgot { display: flex; justify-content: flex-end; font-weight: 500; }
.forgot__link { color: var(--primary); opacity: .5; cursor: default; user-select: none; } /* inactive while sign-in is unavailable */

.btn {
  position: relative; display: inline-flex; justify-content: center; align-items: center;
  width: 100%; height: 37px; padding: .65rem;
  font: inherit; font-size: 1rem; line-height: 1;
  color: var(--primary-accent); background: var(--primary);
  border: 1px solid var(--primary); border-radius: 6px; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.btn:not(:disabled):hover { background: var(--primary-accent); border-color: var(--primary-accent); color: #fff; }
.btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: default; }
.btn__spinner {
  display: none; width: 14px; height: 14px; margin-left: .5rem;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.noscript { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: .75rem; text-align: center; background: var(--primary); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 1.5s !important; }
}