/* SSA sivukuluvertailu — sama visuaalinen ilme kuin talous.ssa.fi:ssä
   (SSA Brand Book: Playfair Display + Work Sans, kuusikko/okra/kaura). */
:root {
  --ssa-kuusikko: #17403a;
  --ssa-kuusikko-logo: #133c29;
  --ssa-okra: #af6327;
  --ssa-topaasi: #8b9585;
  --ssa-kaura: #d4b371;
  --ssa-laivasto: #263682;
  --ssa-kalkki: #c7c3ba;
  --ssa-mint: #bfe0d4;
  --ssa-coral: #e38a78;

  --bg: #f2f1ec;
  --panel: #ffffff;
  --border: #e2ddd2;
  --text: #1c1f1c;
  --text-muted: #6f6a5f;
  --accent: var(--ssa-kuusikko);
  --accent-soft: #e6ece9;
  --accent-2: var(--ssa-okra);
  --green: #1f6b4c;
  --red: #b3401f;
  --header-bg: var(--ssa-kuusikko);
  --header-text: #ece8de;
  font-size: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Work Sans", "TT Commons", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3 { font-family: "Playfair Display", "Larken", Georgia, "Times New Roman", serif; }

.app-shell { display: flex; min-height: 100vh; }

/* Sivupalkki */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--header-bg);
  color: var(--header-text);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  font-family: "Playfair Display", "Larken", Georgia, serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #ffffff;
  padding: 0 20px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 10px;
}
.sidebar .brand img { display: block; height: 28px; width: auto; margin-bottom: 6px; }
.sidebar .brand small {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  color: #b9c4bc;
  font-size: 11px;
  letter-spacing: 0.03em;
  margin-top: 6px;
}
.sidebar nav a {
  display: block;
  padding: 10px 20px;
  color: #cdd6cf;
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sidebar nav a.active { background: rgba(255, 255, 255, 0.08); color: #fff; border-left-color: var(--ssa-kaura); }
.sidebar nav .nav-otsikko { padding: 14px 20px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #9fab9f; border-top: 1px solid rgba(255,255,255,.12); margin-top: 8px; }
.sidebar-alaosa { padding: 10px 20px; margin-top: auto; }
.sidebar-kayttaja { font-size: 11.5px; color: #9fab9f; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asetukset-nappi {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 0 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--ssa-kuusikko);
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.asetukset-nappi svg { width: 19px; height: 19px; }
.asetukset-nappi:hover { border-color: var(--ssa-kaura); box-shadow: 0 0 0 2px rgba(212, 179, 113, 0.45); }
.asetukset-nappi.active { border-color: var(--ssa-kaura); box-shadow: 0 0 0 2px var(--ssa-kaura); }

.main { flex: 1; padding: 28px 34px; overflow-x: auto; min-width: 0; }

.page-title {
  font-family: "Playfair Display", "Larken", Georgia, serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--ssa-kuusikko);
  margin: 0 0 4px 0;
}
.page-sub { color: var(--text-muted); margin: 0 0 20px 0; font-size: 13px; max-width: 1100px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.panel h2 {
  font-family: "Playfair Display", "Larken", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ssa-kuusikko);
  margin: 0 0 14px 0;
}
.panel h3 { font-size: 14px; font-weight: 700; color: var(--ssa-kuusikko); margin: 0 0 10px 0; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.flash.success { background: #e9f3ec; color: var(--green); border: 1px solid #bfdcc9; }
.flash.error { background: #fbeee8; color: var(--red); border: 1px solid #edc6b3; }

.help-text { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
a.link { color: var(--ssa-kuusikko); text-decoration: none; font-weight: 600; }
a.link:hover { text-decoration: underline; color: var(--ssa-okra); }
.help-text a, .page-sub a, .panel p a { color: var(--ssa-kuusikko); font-weight: 600; text-decoration: none; }
.help-text a:hover, .page-sub a:hover, .panel p a:hover { text-decoration: underline; color: var(--ssa-okra); }

/* Painikkeet */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--ssa-kuusikko);
  background: var(--ssa-kuusikko);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.3;
}
.btn:hover { background: var(--ssa-kuusikko-logo); border-color: var(--ssa-kuusikko-logo); }
.btn.secondary { background: #fff; color: var(--ssa-kuusikko); border-color: var(--border); }
.btn.secondary:hover { background: var(--accent-soft); }
.btn.danger { background: #fff; color: var(--red); border-color: #edc6b3; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.btn.danger:hover { background: #fbeee8; }
.btn.microsoft { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Lomakekentät */
.field label {
  display: block;
  font-size: 11.5px;
  color: var(--ssa-okra);
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background-color: #fff;
}
.field select { padding-right: 30px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ssa-kaura);
  box-shadow: 0 0 0 3px rgba(212, 179, 113, 0.3);
}
.field.kapea { max-width: 260px; }
input[type="text"], input[type="password"], input[type="month"] {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--text); background-color: #fff;
}
input:focus { outline: none; border-color: var(--ssa-kaura); box-shadow: 0 0 0 3px rgba(212, 179, 113, 0.3); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236f6a5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px 7px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select:hover { border-color: var(--ssa-topaasi); }
select:focus { outline: none; border-color: var(--ssa-kaura); box-shadow: 0 0 0 3px rgba(212, 179, 113, 0.3); }
table select { padding: 4px 26px 4px 8px; font-size: 12.5px; background-position: right 8px center; }
input[type="file"] { font-family: inherit; font-size: 13px; }

.suodatinrivi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.suodatinrivi .btn { margin-bottom: 1px; }
.suodatinrivi .link { padding-bottom: 9px; font-size: 13px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.toolbar h2 { margin: 0; }
.yksikko-valinnat { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 5px; }
.yksikko-valinta, .field label.yksikko-valinta {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 13px; color: var(--text);
}
.yksikko-valinta input, .field .yksikko-valinta input { width: auto; margin: 0; padding: 0; cursor: pointer; }
.toiminnot { display: flex; gap: 12px; margin-top: 16px; align-items: center; }
.kaksi-saraketta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 1250px) { .kaksi-saraketta { grid-template-columns: 1fr; gap: 0; } }

/* Tilastokortit */
.stat-row { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ssa-kuusikko);
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 180px;
  flex: 1;
}
.stat-card .label { font-size: 11.5px; color: var(--ssa-okra); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.stat-card .value { font-family: "Playfair Display", "Larken", Georgia, serif; font-size: 24px; font-weight: 800; color: var(--ssa-kuusikko); }
.stat-card .apu { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-card.plus { border-top-color: var(--ssa-okra); }
.stat-card.miinus { border-top-color: var(--green); }

/* Taulukot */
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; background: var(--panel); }
th + th, td + td { border-left: 1px solid #eeebe2; }
th:first-child, td:first-child { text-align: left; }
thead th {
  color: var(--ssa-okra);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border);
  vertical-align: bottom;
}
.grid-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.grid-scroll table { width: auto; min-width: 100%; }
.grid-scroll tbody tr:last-child td, .grid-scroll tbody tr:last-child th { border-bottom: 0; }
td.neg { color: var(--red); }
td.nolla { color: #b8b3a8; }
.yhteensa { background: #faf8f3; font-weight: 700; border-left: 2px solid var(--ssa-topaasi) !important; }

/* Lukutaulukoiden yhteiset säännöt: kiinnitetty nimisarake, ryhmäviivat, vuororivit */
.kiinnitetty tbody tr:nth-child(even) th, .kiinnitetty tbody tr:nth-child(even) td { background: #f8f7f3; }
.kiinnitetty tbody tr:nth-child(even) td.yhteensa { background: #f3f0e8; }
.kiinnitetty tbody tr:hover th, .kiinnitetty tbody tr:hover td { background: #eef2ef; }
.kiinnitetty .nimi-sarake { position: sticky; left: 0; z-index: 1; min-width: 260px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border); }
.kiinnitetty thead .nimi-sarake { z-index: 2; }
.kiinnitetty .ryhma-alku { border-left: 2px solid var(--ssa-topaasi) !important; }
.kiinnitetty thead th.ryhma { text-align: center; border-left: 2px solid var(--ssa-topaasi); background: #f7f6f1; color: var(--ssa-kuusikko); }
.kiinnitetty thead .alaotsikko { display: block; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 2px; color: var(--text-muted); }
.kiinnitetty tfoot th, .kiinnitetty tfoot td { font-weight: 700; border-top: 2px solid var(--ssa-kuusikko); border-bottom: 0; background: #faf8f3; }

.vertailu th, .vertailu td { padding: 5px 9px; font-size: 12.5px; }
.vertailu tbody th { font-weight: 400; }
.vertailu tr.osio th {
  text-align: left; background: #f1efe6; color: var(--ssa-kuusikko);
  font-family: "Playfair Display", serif; font-size: 14px; font-weight: 700; padding: 9px 10px;
  text-transform: none; letter-spacing: 0; white-space: normal; position: static; max-width: none;
  border-top: 2px solid var(--border);
}
.vertailu tr.osio .help-text { display: inline; font-family: "Work Sans", sans-serif; font-weight: 400; font-size: 12px; margin-left: 8px; }
.vertailu tr.summa th, .vertailu tr.summa td { font-weight: 700; border-top: 1.5px solid var(--ssa-kuusikko); }
.vertailu tr.prosentti td, .vertailu tr.apu td, .vertailu tr.apu th, .vertailu tr.prosentti th { color: var(--text-muted); font-style: italic; }
.vertailu tbody tr.summa th, .vertailu tbody tr.summa td { background: #fff; }

.tyomaataulu th, .tyomaataulu td { font-size: 12.5px; padding: 6px 10px; line-height: 1.3; }
.tyomaataulu tbody th { font-weight: 400; }
.tyomaataulu .tnro { font-weight: 700; display: inline-block; min-width: 58px; margin-right: 6px; color: var(--ssa-kuusikko); }
.tyomaataulu td.summa { font-weight: 700; }
.tyomaataulu td.prosentti { color: var(--text-muted); font-size: 11.5px; }
.tyomaataulu .ero-sarake { font-weight: 700; background: #faf8f3; position: sticky; right: 0; z-index: 1; box-shadow: -1px 0 0 var(--border); }
.tyomaataulu thead .ero-sarake { z-index: 2; }
.tyomaataulu tbody tr:nth-child(even) .ero-sarake { background: #f3f0e8; }
.tyomaataulu tr.yksikko-otsikko th, .tyomaataulu tr.yksikko-otsikko td {
  background: #f1efe6; color: var(--ssa-kuusikko); font-family: "Playfair Display", serif; font-size: 14px; font-weight: 700; padding: 9px 10px; border-top: 2px solid var(--border);
}
.tyomaataulu tr.yksikko-otsikko .alaotsikko { font-family: "Work Sans", sans-serif; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 8px; }
.tyomaataulu tr.yksikko-otsikko .alaotsikko a { color: var(--ssa-okra); font-weight: 600; text-decoration: none; }
.tyomaataulu tr.yksikko-summa th, .tyomaataulu tr.yksikko-summa td { font-weight: 700; background: #f3f0e8; border-top: 1.5px solid var(--ssa-kuusikko); }
.tyomaataulu tbody tr.sivukulutyomaa th, .tyomaataulu tbody tr.sivukulutyomaa td { background: #fbf6ee; color: var(--text-muted); font-style: italic; }
.tyomaataulu tbody tr.sivukulutyomaa .tnro { color: var(--ssa-okra); }
.tyomaataulu .nimi-sarake .merkki { margin-left: 8px; }
.tyomaataulu tr.pois th, .tyomaataulu tr.pois td { color: var(--text-muted); font-style: italic; }
.oikaisutaulu.piilota-pois tr.pois, .oikaisutaulu.piilota-pois tbody[data-vain-pois="1"] { display: none; }
.tyomaataulu tr.vali td { height: 18px; padding: 0; border: 0; background: transparent; }
.tyomaataulu tbody.koko-yhtio tr.summa th, .tyomaataulu tbody.koko-yhtio tr.summa td {
  font-weight: 700; color: var(--ssa-kuusikko); background: rgba(23, 64, 58, 0.055);
  border-top: 2px solid var(--ssa-kuusikko); border-bottom: 1px solid var(--ssa-kuusikko);
}
.tyomaataulu tbody.koko-yhtio .alaotsikko { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.tyomaataulu tr.summa-apu th, .tyomaataulu tr.summa-apu td { font-weight: 500; color: var(--text-muted); border-top: 0; border-bottom: 1px solid var(--border); background: #faf8f3; }
.tyomaataulu tr.summa-apu .alaotsikko { font-weight: 400; font-size: 11px; margin-left: 6px; }
.tyomaataulu tbody.ei-mukana th, .tyomaataulu tbody.ei-mukana td { color: var(--text-muted); }
.tyomaataulu tbody.ei-mukana tr.yksikko-otsikko th { background: #f3f2ee; color: var(--text-muted); }
/* Yhteiset tila- ja yksikkötunnisteet (templates/_merkit.html), samat kuin
   talous.ssa.fi:ssä: yksiköt Brand Bookin korostusväreillä, tilat omilla sävyillään. */
.merkki {
  --merkki-bg: #eeece5;
  --merkki-fg: var(--text);
  --merkki-ikoni: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background: var(--merkki-bg);
  color: var(--merkki-fg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
  font-style: normal;
  font-family: "Work Sans", "TT Commons", "Helvetica Neue", Arial, sans-serif;
  margin-left: 6px;
}
.merkki svg { width: 15px; height: 15px; flex: none; color: var(--merkki-ikoni); }
.merkki.pieni { gap: 4px; padding: 1px 8px 1px 6px; font-size: 11.5px; font-weight: 600; }
.merkki.pieni svg { width: 13px; height: 13px; }
.merkki.vain-ikoni { gap: 0; padding: 2px 5px; margin: 0 6px 0 0; }
.merkki.vain-ikoni svg { width: 14px; height: 14px; }
.merkki.yksikko-hallinto        { --merkki-bg: var(--accent-soft); --merkki-fg: var(--ssa-kuusikko); }
.merkki.yksikko-asunnot         { --merkki-bg: #f6e8dc; --merkki-fg: #8c4c1d; }
.merkki.yksikko-palvelukodit    { --merkki-bg: #f9e3dd; --merkki-fg: #9c4436; }
.merkki.yksikko-toimitilat      { --merkki-bg: #e4e7f3; --merkki-fg: var(--ssa-laivasto); }
.merkki.yksikko-moduulitehdas   { --merkki-bg: #f3ebd8; --merkki-fg: #75591d; }
.merkki.yksikko-luokittelematon { --merkki-bg: transparent; --merkki-fg: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.merkki.tila-kaynnissa     { --merkki-bg: #dcefe5; --merkki-fg: var(--green); }
.merkki.tila-suunnitteilla { --merkki-bg: #f3e8d3; --merkki-fg: #8a5b1c; }
.merkki.tila-paattynyt     { --merkki-bg: #ebebe7; --merkki-fg: #6b7466; }
/* Muokattava tilamerkki: valikko pillerin sisällä ilman omaa reunusta. */
.merkki.tila-valinta { padding-right: 4px; gap: 2px; }
.merkki.tila-valinta.tila-tyhja { --merkki-bg: transparent; --merkki-fg: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.merkki.tila-valinta > span { display: none; line-height: 0; }
.merkki.tila-valinta > span svg { width: 13px; height: 13px; }
.merkki.tila-valinta.tila-kaynnissa > .ikoni-kaynnissa,
.merkki.tila-valinta.tila-suunnitteilla > .ikoni-suunnitteilla,
.merkki.tila-valinta.tila-paattynyt > .ikoni-paattynyt,
.merkki.tila-valinta.tila-tyhja > .ikoni-tyhja { display: inline; }
.merkki.tila-valinta select {
  border: 0; background-color: transparent; color: inherit; font: inherit; font-weight: 600;
  padding: 0 20px 0 4px; background-position: right 4px center; cursor: pointer; box-shadow: none;
}
.merkki.tila-valinta select:focus { outline: 2px solid var(--ssa-kaura); outline-offset: 1px; box-shadow: none; }
.merkki.varoitus { --merkki-bg: #fbeee5; --merkki-fg: var(--ssa-okra); }
.merkki.huomio { --merkki-bg: var(--accent-soft); --merkki-fg: var(--ssa-kuusikko); font-size: 11px; padding: 1px 7px; }

/* Yksikön väriraita ryhmäotsikoissa (vrt. talous.ssa.fi:n .tk-osio). */
.yksikko-otsikko th.nimi-sarake { border-left: 4px solid var(--osio-vari, var(--border)); }
.osio-asunnot       { --osio-vari: var(--ssa-okra); }
.osio-palvelukodit  { --osio-vari: var(--ssa-coral); }
.osio-toimitilat    { --osio-vari: var(--ssa-laivasto); }
.osio-moduulitehdas { --osio-vari: var(--ssa-kaura); }
.osio-hallinto      { --osio-vari: var(--ssa-kuusikko); }
.osio-luokittelematon { --osio-vari: var(--ssa-topaasi); }

/* Listataulukot (Aineisto, Asetukset) */
.lista th, .lista td { text-align: left; }
.lista td.luku, .lista th.luku { text-align: right; }
.lista.kapea { width: auto; min-width: 460px; }
.lista td.tiedosto { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.lista th form { margin-top: 6px; }
.lista td form { margin: 0; }
.esikatselu tr.th-lohko th, .esikatselu tr.th-lohko td { border-top: 2px solid var(--ssa-kuusikko); }
.esikatselu tr.tuotu-jo td { color: var(--text-muted); }
.tilit tr.luokka-ohita th, .tilit tr.luokka-ohita td { color: var(--text-muted); }
.tilit tr.luokka-sivukulu th { color: var(--ssa-okra); }
.tyomaat-lista tr.ryhma-otsikko th { background: #f1efe6; border-left: 4px solid var(--osio-vari, var(--border)); padding: 8px 10px; }
.tyomaat-lista tr.luokittelematon th, .tyomaat-lista tr.luokittelematon td { background: #fbeee5; }
details > summary { cursor: pointer; margin: 12px 0; color: var(--text-muted); font-size: 13px; }
.tuonti { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 18px; }
.tyhja { color: var(--text-muted); }

/* Kirjautuminen */
body.login-sivu { background: var(--ssa-kuusikko); }
.login-kuori { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.login-kuori > img { height: 40px; width: auto; margin-bottom: 20px; }
.login-kuori .panel { width: 100%; max-width: 340px; margin: 0; }
.login-kuori .field { margin-bottom: 14px; }
.login-erotin { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px 0; color: var(--text-muted); font-size: 12px; }
.login-erotin span { flex: 1; height: 1px; background: var(--border); }

/* Moduulitehtaan laskutus */
.mt-taulu th, .mt-taulu td { font-size: 12px; padding: 5px 8px; }
.mt-taulu .nimi-sarake { min-width: 240px; max-width: 280px; }
.mt-taulu input.mt-syotto { width: 72px; text-align: right; padding: 3px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; background: #f4f2ea; }
.mt-taulu input.mt-syotto:focus { background: #fff; }
.mt-taulu tbody tr.ei-raportissa th, .mt-taulu tbody tr.ei-raportissa td { color: var(--text-muted); font-style: italic; }
.mt-taulu tfoot th, .mt-taulu tfoot td { font-weight: 700; border-top: 2px solid var(--ssa-kuusikko); background: #faf8f3; }
.merkki.mt-tila-kaynnissa { --merkki-bg: #dcefe5; --merkki-fg: var(--green); }
.merkki.mt-tila-hankekehitys { --merkki-bg: #f3e8d3; --merkki-fg: #8a5b1c; }
.merkki.mt-tila-takuu, .merkki.mt-tila-paattynyt { --merkki-bg: #ebebe7; --merkki-fg: #6b7466; }
.merkki.vain-ikoni.mt-tila-kaynnissa, .merkki.vain-ikoni.mt-tila-hankekehitys, .merkki.vain-ikoni.mt-tila-takuu, .merkki.vain-ikoni.mt-tila-paattynyt { font-size: 10px; font-weight: 700; padding: 1px 6px; }
.mt-laskut { width: auto; min-width: 60%; }
.mt-laskut th, .mt-laskut td { font-size: 13px; padding: 7px 12px; }
.mt-laskut td.summa { font-weight: 700; }
.mt-laskut tfoot th, .mt-laskut tfoot td { font-weight: 700; border-top: 2px solid var(--ssa-kuusikko); background: #faf8f3; }
.mt-laskut tbody tr.laskutettu th, .mt-laskut tbody tr.laskutettu td { color: var(--text-muted); }
.mt-laskut tbody tr.laskutettu td.summa { color: var(--text); }
.mt-laskut .laskutettu-solu label { gap: 6px; }

/* ---------------------------------------------------------------- Tase */
.lista tr.korostus th, .lista tr.korostus td { background: var(--accent-soft); }
.lista td.neg, .lista th.neg { color: var(--red); font-weight: 700; }
.rivilomake { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rivilomake select { max-width: 260px; }
.rivilomake input[type="text"] { padding: 4px 6px; }
.tase-taulu td.summa { font-weight: 700; }
.tase-taulu td.nimi-sarake { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tase-taulu.tiivis { width: auto; min-width: 0; }
.tase-taulu tr.useita th, .tase-taulu tr.useita td { background: #fbeee5; color: var(--red); }
.tase-taulu tr.useita th { border-left: 3px solid var(--red); }
.tase-taulu td.vaara { font-weight: 800; text-decoration: underline; text-decoration-color: var(--red); }
.tase-taulu.tiivis th, .tase-taulu.tiivis td { padding: 2px 6px; font-size: 12.5px; line-height: 1.3; }
.tase-taulu.tiivis td.nimi-sarake { max-width: 240px; }
.tase-taulu.tiivis thead th.luku { white-space: normal; max-width: 130px; line-height: 1.2; vertical-align: bottom; }
.tase-taulu.tiivis thead th { padding-top: 5px; padding-bottom: 5px; }
.tase-taulu.tiivis .merkki.vain-ikoni { padding: 0 3px; margin-right: 4px; }
.tase-taulu.tiivis .merkki.vain-ikoni svg { width: 12px; height: 12px; }
.lista input.mt-syotto { text-align: right; padding: 3px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; background: #f4f2ea; }

/* ---------------------------------------------------------------- kassa.ssa.fi */
.main { max-width: none; }
th.ennuste, td.ennuste { background: #fbf7ec; }
.kiinnitetty thead th.ennuste { background: #f3ecd8; }
.hanketaulu th, .hanketaulu td, .kassataulu th, .kassataulu td { padding: 4px 7px; font-size: 12px; }
.hanketaulu thead th, .kassataulu thead th { font-size: 10.5px; }
.hanketaulu .nimi-sarake, .kassataulu .nimi-sarake { min-width: 230px; max-width: 320px; white-space: normal; }
/* Hankkeet: tasakorkeat rivit (nimi yhdelle riville), symbolit nimen edessä. */
.hanketaulu tbody th.nimi-sarake { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 320px; max-width: 320px; }
.hanketaulu .symbolit { display: inline-flex; gap: 3px; width: 58px; flex-shrink: 0; vertical-align: middle; margin-right: 2px; }
.hanketaulu .symbolit .merkki { margin: 0; }
.hanketaulu .symbolit a.merkki.vain-ikoni { font-size: 10px; font-weight: 700; padding: 2px 5px; line-height: 14px; }
.hanketaulu .symbolit .merkki.varoitus.vain-ikoni { font-size: 10px; padding: 2px 5px; line-height: 14px; }
.hanketaulu tr.yksikko-otsikko { cursor: pointer; user-select: none; }
.hanketaulu tr.yksikko-otsikko .piilota-nuoli { display: inline-block; width: 14px; color: var(--text-muted); transition: transform .12s ease; }
.hanketaulu tbody.piilotettu tr.yksikko-otsikko .piilota-nuoli { transform: rotate(-90deg); }
.hanketaulu tr.yksikko-otsikko .rivimaara { display: none; margin-left: 8px; font-weight: 400; color: var(--text-muted); font-size: 11px; }
.hanketaulu tbody.piilotettu tr.yksikko-otsikko .rivimaara { display: inline; }
.hanketaulu tbody.piilotettu tr:not(.yksikko-otsikko) { display: none; }
/* Korkea taulukko vierii omassa alueessaan: otsikkorivi pysyy ylhäällä ja
   vaakavierityspalkki on aina näkyvissä alareunassa. */
.grid-scroll.korkea { max-height: calc(100vh - 90px); overflow: auto; }
.grid-scroll.korkea thead th { position: sticky; top: 0; z-index: 2; }
.grid-scroll.korkea thead th.nimi-sarake { z-index: 3; }
.grid-scroll.korkea tfoot th, .grid-scroll.korkea tfoot td { position: sticky; bottom: 0; z-index: 2; }
.grid-scroll.korkea tfoot th.nimi-sarake { z-index: 3; }
.grid-scroll.korkea tfoot tr.summa + tr.summa th, .grid-scroll.korkea tfoot tr.summa + tr.summa td { border-top: 0; }
.hanketaulu tbody th.nimi-sarake small, .kassataulu tbody th.nimi-sarake small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }
.hanketaulu .tnro { color: var(--text-muted); font-weight: 600; margin-right: 4px; }
.hanketaulu td.yht, .hanketaulu th.yht { border-left: 2px solid var(--border); background: #faf9f5; }
.hanketaulu tbody tr.ei-mukana th, .hanketaulu tbody tr.ei-mukana td { color: #a39d91; }
.hanketaulu tbody tr.kustannuspaikka th.nimi-sarake { font-style: italic; }
.hanketaulu td.solu { cursor: cell; }
.hanketaulu td.solu:hover { outline: 2px solid var(--ssa-kaura); outline-offset: -2px; }
td.ylikirjoitus { background: #fff3c4 !important; font-weight: 600; }
.kiinnitetty tbody tr:nth-child(even) td.ylikirjoitus { background: #fff3c4 !important; }
td.varoitus-solu { color: var(--red); font-weight: 600; }
input.solu-syotto { width: 90px; padding: 2px 4px; font-size: 12px; text-align: right; border: 1px solid var(--ssa-kaura); border-radius: 4px; font-family: inherit; }
.hanketaulu tr.yksikko-otsikko th, .hanketaulu tr.yksikko-otsikko td { background: #f4f3ee; font-weight: 600; }
.hanketaulu tfoot tr.summa th, .hanketaulu tfoot tr.summa td, .kassataulu tr.summa th, .kassataulu tr.summa td { font-weight: 700; background: #eef2ef; border-top: 2px solid var(--ssa-kuusikko); }
.kassataulu tr.era th, .kassataulu tr.era td { color: #4f4a40; }
.kassataulu tr.apu th, .kassataulu tr.apu td { color: var(--text-muted); font-style: italic; }
.gryndi-taulu th, .gryndi-taulu td { padding: 3px 6px; font-size: 12px; }
.gryndi-taulu thead th.ryhma { text-align: center; border-bottom: 1px solid var(--ssa-okra); }
.gryndi-taulu tbody th { text-align: left; white-space: nowrap; }
.gryndi-taulu tr.ennuste th, .gryndi-taulu tr.ennuste td { background: #fbf7ec; }
.gryndi-taulu td.oikaisu { font-weight: 700; }
.gryndi-taulu td.ohitettu { text-decoration: line-through; color: var(--text-muted); }
.gryndi-taulu input.syotto { width: 100px; padding: 3px 5px; font-size: 12px; text-align: right; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; }
.gryndi-taulu input.syotto.kapea { width: 62px; }
.gryndi-taulu input.syotto:focus { border-color: var(--ssa-kaura); outline: none; box-shadow: 0 0 0 2px rgba(212, 179, 113, 0.3); }
.gryndi-taulu tfoot th, .gryndi-taulu tfoot td { font-weight: 700; background: #eef2ef; }
.merkki.huomio a, a.merkki { text-decoration: none; }
.merkki.tila-takuu { --merkki-bg: #eef0f7; --merkki-fg: var(--ssa-laivasto); }
.merkki.tila-arkistoitu { --merkki-bg: #f0efea; --merkki-fg: #8a8578; }
.hankelista select { min-width: 130px; }
.hankelista tbody tr.ei-mukana th, .hankelista tbody tr.ei-mukana td { color: #a39d91; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--text); }
textarea:focus { outline: none; border-color: var(--ssa-kaura); box-shadow: 0 0 0 3px rgba(212, 179, 113, 0.3); }
/* Kassaerät: annettu arvo keltainen, jatkuva arvo harmaa; erän tiedot avautuvat riville. */
.erataulu td.jatkuu { color: #9a948a; }
.erataulu .tilalomake select { padding: 2px 22px 2px 6px; font-size: 11px; background-position: right 5px center; }
.erataulu td.jatkuu.neg { color: #d08a74; }
.erataulu .era-nimi { font-weight: 600; }
.erataulu a.muokkaa-linkki { margin-left: 8px; font-size: 11px; color: var(--ssa-okra); text-decoration: none; font-weight: 600; }
.erataulu a.muokkaa-linkki:hover { text-decoration: underline; }
.erataulu tr.era-muokkaus td { background: #fbf9f2; border-left: 3px solid var(--ssa-kaura); white-space: normal; text-align: left; }
.erataulu tr.era-muokkaus .suodatinrivi { gap: 14px; }
.erataulu tr.era-muokkaus .sulje-linkki { padding-bottom: 9px; }
.asuntotaulu th, .asuntotaulu td { font-size: 11.5px; padding: 3px 5px; }
.asuntotaulu thead th { white-space: normal; line-height: 1.2; }
.asuntotaulu tr.myynti-alku th, .asuntotaulu tr.myynti-alku td { border-top: 2px solid var(--ssa-okra); }
.asuntotaulu input.syotto { width: 92px; }