/* Archivo is THE LOGO TYPEFACE. Without it the logo falls back to a system font and
   the sign-in page becomes the only place on the platform where "Movira" has a
   different shape.

   The files are HERE rather than from Google's CDN. These pages are deliberately
   without a framework and without a third-party request — a sign-in must not depend on
   somebody else's server or send the user's IP to a third party. Four files, ~55 kB in
   total; the applications load the same weights from @fontsource.

   Only woff2 and only 700 (the label) and 800 (the name). Italic and other weights are
   not used here — if one gets added, its file has to come too. */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/archivo-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: Archivo;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/archivo-latin-800-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;
}

/* Shared styling for all auth-service pages.

   auth-brand.js sets the module's colours:
     --accent      nupud, lingid, fookusraam (kassal tumedam merevaik!)
     --brand-color the tag's and the dot's colour in the logo
     --brand-ink   the tag's type colour
     --brand-tint  the brand panel's light background
   The defaults are here so the page is not colourless before the script runs. */
:root {
  --accent: #2563eb;
  --ink: #1b1f24;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand-color: #1f4ecd;
  --brand-ink: #ffffff;
  --brand-tint: #eef2f7;
}
* { box-sizing: border-box; }

/*
  The `hidden` attribute has to WIN.

  The browser's own rule is `[hidden] { display: none }`, but every class rule
  that sets `display` overrides it — `.or-rule { display: flex }` and
  `.btn-secondary { display: inline-block }` left hidden elements visible. From
  the outside that looked like the module-picker page showing "või" and the
  sign-in-link button even though the script had set `hidden = true` on them.
*/
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: #eef1f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 860px;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(30, 41, 59, 0.14);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.auth-card.single { grid-template-columns: 1fr; width: 420px; }

/* Left: form */
.auth-form { padding: 44px 40px 36px; }
.auth-form h1 { font-size: 1.5rem; margin: 0 0 4px; }
.auth-form .sub { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .8rem; color: #374151; margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field .hint { font-size: .72rem; color: #9ca3af; margin-top: 5px; }

.btn {
  width: 100%;
  margin-top: 8px;
  padding: .78rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.06); }

.row-between { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 6px; }
a.link { color: var(--accent); text-decoration: none; font-size: .85rem; cursor: pointer; }
a.link:hover { text-decoration: underline; }

/* The secondary button: the sign-in link, the account page's actions. The accent
   colour on the border and in the type rather than as a fill — a filled button
   beside a filled button does not say which is the main route. */
.btn-secondary {
  display: inline-block;
  width: 100%;
  padding: .7rem;
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-secondary:hover { background: color-mix(in srgb, var(--accent) 7%, #fff); }
.btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-small { width: auto; padding: .45rem .8rem; font-size: .85rem; }
.btn-danger { color: #b91c1c; border-color: #fca5a5; }
.btn-danger:hover { background: #fef2f2; }

/* The "või" rule between the two ways of signing in. */
.or-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: #9ca3af;
  font-size: .8rem;
}
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* The module picker: login.html with no client_id. See auth-brand.js. */
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--mod); background: #fafbfc; }
.choice:focus-visible { outline: 2px solid var(--mod); outline-offset: 2px; }
.choice-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mod); flex: none; }
.choice-name { flex: 1; }
/* The arrow is colourless until the mouse is over it: five coloured arrows side
   by side would compete with the dots, which carry the module's colour for
   real. */
.choice-arrow { color: #b8bfc8; font-size: 1rem; line-height: 1; }
.choice:hover .choice-arrow { color: var(--mod); }

.err {
  display: none;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: .85rem;
  margin-bottom: 16px;
}
.err.show { display: block; }
.note { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* --- The company part of the registration form ----------------------------
   The form now has two sections (your details, the company) and without a
   separator the eye reads them as one long list. */
.section {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* The dropdown in the same shape as an input: `select` does not inherit the
   `.field input` rules and would otherwise sit in the form with the browser's own
   look. */
.field select {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: #fff;
}
.field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The business register's matches. `position: static` rather than a floating
   panel: these pages are without a framework, and a floating list would need its
   position tracked while scrolling — a list that pushes the form down can never
   end up in the wrong place. */
.matches {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  max-height: 232px;
  overflow-y: auto;
}
.match {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: .5rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.match:last-child { border-bottom: 0; }
.match:hover { background: #fafbfc; }
.match:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.match-name { flex: 1; }
.match-code { color: var(--muted); font-size: .8rem; flex: none; }
.match-empty { padding: .5rem .7rem; color: var(--muted); font-size: .85rem; }

.alt { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--muted); }
.alt a { color: var(--accent); text-decoration: none; }
.alt a:hover { text-decoration: underline; }

/* Right: brand panel.

   A light module tone with dark type rather than a coloured gradient with white
   type. That way the logo can be in its real shape — a coloured tag on a
   coloured block turns into a muddy patch. See auth-brand.js. */
.auth-brand {
  background: var(--brand-tint);
  border-left: 1px solid rgba(15, 23, 42, .07);
  color: var(--ink);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.auth-brand .brand-tag {
  font-size: .95rem;
  color: #4b5563;
  line-height: 1.5;
  max-width: 300px;
  margin: 0;
}

/* The logo: the name, a dot, a tag. The same shape as the applications' Brand.tsx. */
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup-word {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.035em;
  line-height: 1;
  color: #0d0d0d;
  white-space: nowrap;
}
/* The dot sits on the baseline rather than in the middle: that way it reads as a
   full stop ending the name rather than as a separate icon. */
.lockup-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-color);
  flex: none;
}
/* The tag's type size IS NOT a multiple of the name's — it is fixed at 12 px. A
   multiplier would mean a smaller logo makes the tag unreadable. */
.lockup-tag {
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--brand-ink);
  background: var(--brand-color);
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
}

/* The module list: what else there is in Movira. */
.brand-modules {
  width: 100%;
  border-top: 1px solid rgba(15, 23, 42, .1);
  padding-top: 16px;
}
.brand-modules-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 10px;
}
.brand-module-list { list-style: none; margin: 0; padding: 0; }
.mod {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: .9rem;
}
.mod-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mod);
  flex: none;
}
/* `.mod-link` is a `span` before the server answers and an `a` after — both have
   to look the same, or the list jumps when the addresses arrive. */
.mod-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
a.mod-link:hover { text-decoration: underline; }
a.mod-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* The current module: a small white card, so it stands out on the light tone. */
.mod.is-current {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 8px;
  padding: 4px 10px;
  margin: 2px -10px;
}
.mod-self { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.mod-here { font-size: .72rem; color: var(--muted); margin-left: auto; }

.status-icon { font-size: 2.4rem; margin-bottom: 6px; }
.title-ok { color: #16a34a; }
.title-bad { color: #dc2626; }

.auth-footer { margin-top: 18px; color: #9aa2ad; font-size: .8rem; }

/* The success message. The same shape as `.err`, a different colour. */
.ok {
  display: none;
  background: #dcfce7;
  color: #14532d;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: .85rem;
  margin-bottom: 16px;
}
.ok.show { display: block; }

/* ---- The account page (account.html) ---------------------------------
   The other pages are one card in the middle of the screen; this one is long and
   scrolls, so the `body` centring has to be overridden. */
body.page-account { justify-content: flex-start; padding: 32px 16px 64px; }
.account { width: 620px; max-width: 100%; }
.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(30, 41, 59, .09);
  padding: 24px 26px;
  margin-bottom: 16px;
}
.card h2 { font-size: 1.05rem; margin: 0 0 14px; }
.card .note { margin: 0 0 16px; }

/* The name and the email: the label left, the value right, stacked on mobile. */
.row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: .92rem; }
.row + .row { border-top: 1px solid var(--line); }
.row-label { width: 120px; flex: none; color: #6b7280; font-size: .85rem; }
.row-value { flex: 1; }
.row-form input {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .92rem;
}
.row-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.status { display: flex; align-items: center; gap: 8px; font-size: .92rem; margin: 0 0 14px; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-on { color: #14532d; }
.status-on::before { background: #16a34a; }
.status-off { color: var(--muted); }
.status-off::before { background: #cbd5e1; }

.steps { margin: 0 0 16px; padding-left: 20px; color: #374151; font-size: .9rem; line-height: 1.6; }
/* The QR code comes from the server as SVG, because there is no build and no
   library under public/. */
.qr { width: 168px; margin: 0 0 14px; }
.qr svg { width: 100%; height: auto; display: block; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }

.button-row { display: flex; flex-wrap: wrap; gap: 8px; }

.warning {
  background: #fef3c7;
  color: #713f12;
  border-radius: 8px;
  padding: .7rem .8rem;
  font-size: .85rem;
  line-height: 1.5;
  margin: 18px 0 12px;
}
.code-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}
.code-list code { font-size: .9rem; letter-spacing: .02em; }

@media (max-width: 560px) {
  .row { flex-wrap: wrap; }
  .row-label { width: 100%; }
  .code-list { grid-template-columns: 1fr; }
}

/* The language choice. Fixed to the page's corner rather than inside the card:
   the card is in two columns and on mobile in one, and in the corner it stays in
   the same place either way. */
.lang-switch {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.08);
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.on { background: var(--accent); color: #fff; }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .auth-card { grid-template-columns: 1fr; width: 420px; }
  /* The panel used to be hidden on mobile, because a coloured block under the
     form was half a screen of noise. The light tone is not, and the module list
     is exactly what somebody on a phone has the least other way of finding out.
     Only the tagline is left out instead of the tag: the heading "Logi sisse"
     stands two centimetres higher up and says the same thing. */
  .auth-brand {
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, .07);
    padding: 22px 28px 26px;
    gap: 14px;
  }
  .auth-brand .brand-tag { display: none; }
  /* On mobile the card is almost the width of the screen and a fixed switch would
     end up on top of it. `order: -1` puts it into the flow, ahead of the card —
     the body is a flex column, so the switch is one of its flex items. */
  .lang-switch { position: static; order: -1; margin-bottom: 12px; }
}