/* =====================
   TILISIVUT
   =====================

   Sama tumma sävy ja Oxanium kuin karttanäkymässä, mutta ilman
   text-transform: uppercase -sääntöä: sähköpostiosoite ja arvottu salasana on
   luettava sellaisena kuin se on, ja versaali tekee molemmista arvauspeliä. */

.account-page {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Oxanium", system-ui, sans-serif;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.account-page.wide {
  justify-content: flex-start;
  align-items: stretch;
}

.account-page .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Sama tunnus kuin kartalla, suurempana: tilisivujen nimi on 22 pikseliä
   ja kartan 15, ja merkin kuuluu olla nimen mittainen. */
.account-page .brand .brand-mark {
  width: 28px;
  height: 28px;
  background: url("../img/logo.svg") center / contain no-repeat;
  align-self: center;
  flex: 0 0 auto;
}
.account-page .brand-name {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.account-page .brand-sub {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-card {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 28px;
  width: 100%;
  max-width: 380px;
}

.account-card h1 {
  font-size: 18px;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.field { display: block; margin-bottom: 14px; }
.field span {
  display: block;
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.field input, .field select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}

.primary-button {
  width: 100%;
  padding: 9px;
  background: rgba(100, 210, 255, 0.16);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.primary-button:hover { background: rgba(100, 210, 255, 0.26); }
.primary-button:disabled { background: transparent; border-color: var(--panel-border); color: var(--ink-faint); cursor: default; }

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

.account-status {
  padding: 10px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  background: rgba(255, 77, 94, 0.14);
  border: 1px solid var(--sev-critical);
}
.account-status.ok   { background: rgba(53, 198, 107, 0.14); border-color: var(--lamp-green); }
.account-status.warn { background: rgba(245, 166, 35, 0.14); border-color: var(--accent-warm); }
.account-status ul { margin: 6px 0 0; padding-left: 18px; }
.account-status code {
  background: rgba(0, 0, 0, 0.28);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
  user-select: all;
}

.note {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.6;
  margin-top: 16px;
}
.note a { color: var(--accent); }
.note code { background: rgba(0, 0, 0, 0.28); padding: 2px 5px; border-radius: 3px; }

/* ----- käyttäjien hallinta ----- */

.account-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 20px;
}
.account-header .account-page .brand { margin: 0; }
.account-header nav { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.account-header nav a { color: var(--accent); text-decoration: none; }

.account-wide { width: 100%; max-width: 1200px; margin: 0 auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}
.panel h2 {
  font-size: 15px;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.inline-form {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.inline-form .field { margin-bottom: 0; flex: 1 1 200px; }
.inline-form .primary-button { width: auto; padding: 9px 20px; }

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.user-table th, .user-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: top;
}
.user-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
}
.user-table select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 3px 6px;
  font-family: inherit;
}
.user-table .actions { white-space: nowrap; }
.user-table .actions button {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 4px 9px;
  margin-right: 4px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.user-table .actions button:hover { background: rgba(255, 255, 255, 0.16); }
.user-table .actions button.danger { border-color: var(--sev-critical); color: var(--sev-critical); }

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-dim);
}
.tag.ok     { background: rgba(53, 198, 107, 0.14); color: var(--lamp-green); }
.tag.danger { background: rgba(255, 77, 94, 0.14); color: var(--sev-critical); }
.tag.warn   { background: rgba(245, 166, 35, 0.14); color: var(--accent-warm); }



/* =====================
   KIELIVALITSIN
   ===================== */

.language-picker select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 13px;
}

.card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: flex-end;
}

/* =====================
   ASETUKSET JA KIELET
   ===================== */

.settings-group {
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 14px 16px 4px;
  margin-bottom: 18px;
}

.settings-group legend {
  padding: 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
}

.setting-row { margin-bottom: 14px; }
.setting-row .note { margin-top: 4px; }

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
}

.checkbox-field input { width: auto; }

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.form-actions .primary-button { width: auto; padding: 9px 22px; }

.reset-setting, .test-service {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-dim);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.test-result { margin-left: 8px; font-size: 12px; }
.test-result.ok { color: var(--lamp-green); }
.test-result.fail { color: var(--sev-critical); }

.panel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.button-link {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 4px 9px;
  font-size: 12px;
  text-decoration: none;
}

/* ----- käännösmuokkain ----- */

.editor-controls {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.editor-controls .field { flex: 1 1 240px; margin-bottom: 0; }

.editor-rows {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}

.editor-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 2fr) minmax(200px, 2fr);
  gap: 12px;
  align-items: start;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-border);
}

.editor-row:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }

.editor-key {
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
}

.editor-reference {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.4;
}

.editor-row textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  resize: vertical;
  min-height: 34px;
}

/* =====================
   KAPEA NÄYTTÖ
   =====================

   Ylläpitosivut ovat taulukoita ja lomakkeita. Kapealla näytöllä taulukko on
   se joka rikkoo asettelun: se ei kutistu sisältönsä alle, joten se työntää
   koko sivun leveämmäksi kuin näyttö ja kaikki muu venyy mukana.

   Taulukko saa siis vierittää itseään omassa laatikossaan sen sijaan että se
   vierittäisi sivua. Navigaatio menee saman kohtelun sijaan valikon taakse:
   viisi linkkiä vierekkäin ei mahdu, ja rivittyneenä ne vievät puolet
   näytöstä. */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .user-table { min-width: 640px; }

.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  font-size: 18px;
  padding: 4px 12px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .account-page { padding: 14px; }

  .account-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-toggle { display: block; }

  /* Valikko piiloon oletuksena ja pystyyn auki. */
  .account-header nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
  }

  .account-header nav.open { display: flex; }

  .panel { padding: 16px 14px; }

  .inline-form { gap: 10px; }
  .inline-form .field { flex: 1 1 100%; }
  .inline-form .primary-button { width: 100%; }

  /*
   * Käännösmuokkain sarakkeista riveiksi: kolme saraketta 360 pikselissä
   * jättäisi jokaiselle sanan verran tilaa.
   */
  .editor-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .editor-rows { max-height: none; }
}

@media (max-width: 480px) {
  .account-card {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); padding: 20px 16px; }
  .account-page .brand-name { font-size: 22px; }
}

/* =====================
   OHJELMISTOPÄIVITYS
   ===================== */

/* Versio, haara ja lähde nimi–arvo-pareina: niitä luetaan, ei verrata
   keskenään, joten taulukko olisi liikaa rakennetta muutamalle riville. */
.update-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 16px;
  font-size: 13px;
}

.update-facts dt { color: var(--ink-dim); }
.update-facts dd { margin: 0; color: var(--ink); }

/* Gitin oma tuloste sellaisenaan: rivinvaihdot ja sarakkeet ovat osa
   viestiä, ja rivitetty versio olisi eri teksti. */
.update-output {
  margin: 12px 0 0;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-dim);
  white-space: pre;
}

/* Este päivitykselle. Varoitus eikä virhe: mitään ei ole mennyt rikki,
   mutta päivitys ei onnistu ennen kuin tämä on käsitelty. */
.note.warn {
  color: var(--accent-warm);
  border-left: 2px solid var(--accent-warm);
  padding-left: 10px;
}

/* Toissijainen toiminto samassa rivissä pääkomennon kanssa: sama muoto,
   vaimeampi reunus — kaksi yhtä korostettua nappia ei kerro kumpi on se
   jota ollaan tekemässä. */
.primary-button.subdued {
  background: transparent;
  border-color: var(--panel-border-strong);
  color: var(--ink);
}

.primary-button.subdued:hover { background: rgba(255, 255, 255, 0.08); }