/* Coburg — prihlasovacia stránka. Farby, rozmery a písmo prevzaté z prihlasovacej stránky
   aplikácie Coburg na Macu (Resources/Frontend/index.html, .login*), aby web vyzeral rovnako. */

/* Lora ako lokálne súbory (žiadne Google Fonts — CSP 'self'). Dve časti ako v aplikácii:
   latin pre bežné znaky, latin-ext pre slovenskú diakritiku. */
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --workflow-canvas: #F9F8F6;
  --surface: #ffffff;
  --ink: #0f0f0c;
  --dim: #3a3a32;
  --faint: #51514a;
  --line2: #dadad1;
  --soon: #D8D6D2;
  --coburg-mark-ink: .82;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body { background: var(--workflow-canvas); }

.login {
  background: var(--workflow-canvas); color: var(--ink); font-family: var(--sans);
  font-size: 15px; line-height: 1.5; padding: 20px 32px 56px; min-height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
}
.login-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 380px; margin: 0 auto; padding-bottom: 6vh;
}
.login-body section { display: flex; flex-direction: column; align-items: center; width: 100%; }
.login-mark {
  width: calc(52px / var(--coburg-mark-ink)); height: calc(52px / var(--coburg-mark-ink));
  margin: calc((52px / var(--coburg-mark-ink) - 52px) / -2); margin-bottom: 22px;
}
.login-body h1 {
  font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.15;
  letter-spacing: -.01em; margin: 0 0 10px; text-align: center;
}
.login-sub { font-size: 15px; color: var(--faint); margin: 0 0 32px; text-align: center; }
.login-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.login-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 50px; padding: 0 20px; box-sizing: border-box;
  border: 1px solid var(--line2); border-radius: 15px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s;
}
.login-btn:hover:not(:disabled) { border-color: var(--faint); }
.login-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.login-btn:disabled { cursor: default; }
.login-btn svg { width: 20px; height: 20px; flex: none; }

/* Zatiaľ neaktívne: celé sivé (text, značka aj štítok) a nedajú sa stlačiť. */
.login-btn.soon { color: var(--soon); }
.login-btn.soon:hover { border-color: var(--line2); }
.login-soon {
  position: absolute; right: 16px; font-size: 11.5px; font-weight: 500; color: inherit;
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px;
}

/* Kým prehliadač odchádza na Google: ostatné tlačidlá ustúpia, na Google sa točí koliesko. */
.login-spin {
  display: none; width: 16px; height: 16px; border: 2px solid var(--line2); border-top-color: var(--ink);
  border-radius: 50%; animation: login-spin .8s linear infinite; flex: none;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-list.busy .login-btn:not(.waiting) { opacity: .45; }
.login-btn.waiting { pointer-events: none; }
.login-btn.waiting svg { display: none; }
.login-btn.waiting .login-spin { display: block; }

/* Krátka správa nad tlačidlami (zrušené prihlásenie, odhlásenie z iného prehliadača a pod.). */
.login-note {
  width: 100%; box-sizing: border-box; margin: -12px 0 20px; padding: 10px 14px;
  border: 1px solid var(--line2); border-radius: 12px; background: var(--surface);
  font-size: 14px; color: var(--dim); text-align: center;
}

@media (max-width: 440px) {
  .login { padding: 20px 16px 40px; }
  .login-body h1 { font-size: 30px; }
}