/* COREACT static sign-in fallback — mirrors app.dev.coreact.gr/auth/login */
@font-face { font-family: Inter; src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  --primary: #125773;
  --accent: #27cdf2;
  --accent-text: #3dd5f6;      /* brand cyan, nudged for AA contrast on primary */
  --light-primary: #f1faff;
  --text-dark: #181c32;
  --label: #3f4254;
  --input-text: #334155;
  --input-border: #878ca0;     /* visible field boundary (3:1) */
  --danger: #f1416c;
  --danger-text: #d01b4a;      /* AA contrast for error text */
  --muted: #5e6278;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-dark);
  background: var(--light-primary);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }

/* Layout: column on mobile (image first), two halves from 1024px */
.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: 14px; background: var(--light-primary);
}
.auth__image-side {
  order: 1; display: flex; justify-content: center; align-items: center; width: 100%;
  background: url("assets/login-bg.jpg") center / cover no-repeat;
}
.auth__image-inner {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; padding: 60px 20px;
}
.auth__image-inner a { display: block; border-radius: 4px; }
.brand-logo { width: auto; max-width: 100%; }

@media (min-width: 1024px) {
  .auth { flex-direction: row; height: 100vh; }
  .auth__form-side { order: 1; width: 50%; }
  .auth__image-side { order: 2; width: 50%; }
  .auth__image-inner { padding: 60px; }
}

.auth__inner { width: 100%; max-width: 400px; height: 100%; display: grid; grid-template-rows: 1fr auto 1fr; }
.auth-panel { grid-row: 2; align-self: center; width: 100%; }
.auth-panel__head { text-align: center; margin-bottom: 17.5px; }
.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: 10.5px; }
.auth-panel__title h1 { margin: 0; font-size: 24.5px; font-weight: 700; line-height: 1.5; color: var(--text-dark); }
.auth-panel__title img { width: 15px; height: 15px; }

/* Fields */
.field { display: flex; flex-direction: column; }
.field--email { margin-bottom: 28px; }
.field--password { margin-bottom: 14px; }
.field label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--label); }
.field input {
  display: block; width: 100%; height: 37px; margin: 0;
  padding: 9.1px; font: inherit; font-size: 14px; color: var(--input-text);
  background: transparent no-repeat calc(100% - 10.675px) 50% / 21.35px 21.35px;
  border: 1px solid var(--input-border); border-radius: 5px;
  box-shadow: 0 1px 2px rgba(18, 18, 23, .05);
  transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.field input:hover { border-color: var(--primary); }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18, 87, 115, .2); }
.field input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.form.is-error .field input {
  border-color: var(--danger);
  padding-right: 42.7px;
  background-image: url("assets/icon-invalid.svg");
}

/* Forgot password (visual only, inactive) */
.forgot { display: flex; justify-content: flex-end; margin-bottom: 24.5px; }
.link-btn {
  padding: 0; border: 0; background: none; cursor: default;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--primary);
}

/* Status / error message */
.status:empty { display: none; }
.status {
  margin: -10px 0 14px; padding: 9px 10px;
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--danger-text);
  background: #fff5f8; border: 1px solid #f8c6d3; border-radius: 5px;
}
.status.is-info { color: var(--primary); background: #e7f5fb; border-color: #b9dcea; }

/* Primary button */
.submit { width: 100%; margin-bottom: 14px; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 37px; padding: 9.1px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 400; line-height: 1.2;
  color: var(--accent-text); background: var(--primary);
  border: 1px solid var(--primary); border-radius: 6px;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #0b3a4d; }
}
.btn-primary:active { background: var(--primary); border-color: var(--primary); color: var(--accent-text); }
.btn-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Unavailable notice */
.notice {
  display: flex; align-items: flex-start; justify-content: center; gap: 6px;
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center;
}
.notice svg { flex: none; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }