/* =====================================================================
   SILMU — Nodetec-brändi-ilme (Brand board 02/2024)

   Ladataan jokaisen sovelluksen <head>-lohkon LOPUSSA (sovelluksen oman
   <style>-lohkon jälkeen), jolloin tämän tiedoston :root-muuttujat
   korvaavat sovelluksen omat oletukset. Sovellusten sisäinen CSS käyttää
   muuttujia (--primary, --ink, --bg …), joten värit vaihtuvat keskitetysti.

   Periaatteet (brändiohje):
   - Pääväripaletti 60/30/10: valkoinen, tumma #26332D, minttu #91DBBA.
   - Palvelupaletti vain aksentteina: tunnisteet, taulukoiden otsikkosolut,
     linkit, graafiset yksityiskohdat. Ei koskaan tekstin värinä.
   - Otsikot ja leipäteksti aina tummassa päävärissä.
   - Typografia: Mulish Bold (otsikot, tracking −10 ≈ −0.01em),
     Mulish Regular (leipäteksti). Fontti ladataan Google Fontsista
     <link>-tagilla; @import tässä varalle tulostusikkunoita varten.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap");

:root {
  /* Brändin pääväripaletti */
  --brand-white: #FFFFFF;
  --brand-dark: #26332D;
  --brand-mint: #91DBBA;
  --brand-pattern: #BDE9D6;
  --brand-green: #4C9174;
  --brand-peach: #E9B0A3;
  --brand-coral: #DB7C65;

  /* Palvelupaletti 03 — Kuntotutkimukset ja Due Diligence (oletus) */
  --svc-light: #ECE7F2;
  --svc-mid: #B3A0CA;
  --svc-dark: #65527A;

  /* Sovellusten yhteiset muuttujat uudelleenmäärättynä */
  --bg: #F6F4F9;
  --surface: #FFFFFF;
  --border: #DDD6E6;
  --primary: var(--svc-dark);
  --primary-light: var(--svc-mid);
  --primary-dark: var(--brand-dark);
  --accent: var(--brand-mint);
  --accent-light: var(--brand-pattern);
  --accent-dark: var(--brand-green);
  --ink: var(--brand-dark);
  --text: var(--brand-dark);
  --muted: #667069;
  --shadow: 0 2px 4px rgba(38, 51, 45, .06), 0 1px 2px rgba(38, 51, 45, .08);

  /* Kuntoluokkien semanttiset värit säilyvät (tulosteessa merkitys, ei koriste) */
  --good: #2e8b57; --fair: #82b366; --warn: #e8b339; --bad: #e07b3f; --crit: #c0392b;
  --k1: #2e8b57; --k2: #82b366; --k3: #e8b339; --k4: #e07b3f; --k5: #c0392b;
  --k-good: #2e8b57; --k-fair: #82b366; --k-poor: #e8b339; --k-bad: #e07b3f; --k-crit: #c0392b;
}

/* Muut palvelukategoriat — kytketään <html data-palvelu="…">-attribuutilla
   (esim. tarjous.html vaihtaa palvelun mukaan). */
html[data-palvelu="rakennesuunnittelu"] { --svc-light: #E3F0F3; --svc-mid: #8FBFCD; --svc-dark: #3F6A76; }
html[data-palvelu="rakennuttaminen"]    { --svc-light: #F2EBDC; --svc-mid: #CDBB91; --svc-dark: #776A48; }
html[data-palvelu="kuntotutkimukset"]   { --svc-light: #ECE7F2; --svc-mid: #B3A0CA; --svc-dark: #65527A; }

/* ---------- Typografia ---------- */
body, .report-view, button, input, select, textarea {
  font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
}
.report-view h1, .report-view h2, .report-view h3, .report-view h4 { color: var(--brand-dark); }

/* ---------- Sovelluksen yläpalkki ja navigaatio ---------- */
body > header, header.app-head, header.app-header {
  background: var(--brand-dark) !important;
  background-image: none !important;
  color: #fff;
}
.nav-item.active, .nav-item[aria-current] {
  background: var(--svc-light);
  border-left-color: var(--svc-dark);
  color: var(--brand-dark);
}

/* ---------- Painikkeet ---------- */
.btn, button.btn, .btn-primary {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}
.btn:hover, button.btn:hover, .btn-primary:hover { background: #3F7A61; border-color: #3F7A61; }
.btn-secondary, .btn.secondary {
  background: transparent;
  color: var(--brand-dark);
  border: 1px solid var(--border);
}
.btn-secondary:hover, .btn.secondary:hover { background: var(--svc-light); }
.btn-accent { background: var(--brand-mint); color: var(--brand-dark); border-color: var(--brand-mint); }
.btn-danger { background: var(--brand-coral); border-color: var(--brand-coral); color: #fff; }
.btn-danger:hover { background: #C4684F; }

/* ---------- Linkit ja tunnisteet (palvelupaletti aksenttina) ---------- */
a { color: var(--svc-dark); }
.badge, .tag, .pill, .chip, .status-badge, .source-tag {
  font-family: "Mulish", system-ui, sans-serif;
  font-weight: 600;
}
.status-badge, .chip { background: var(--svc-light); color: var(--brand-dark); border: 1px solid var(--svc-mid); }

/* ---------- Taulukot ---------- */
table th {
  background: var(--svc-light);
  color: var(--brand-dark);
  border-bottom: 2px solid var(--svc-mid);
}
.report-view table th, table.pr-t th { background: var(--svc-light); color: var(--brand-dark); border-color: var(--svc-mid); }

/* ---------- Raportin tulostenäkymä ---------- */
.report-view h1 { border-bottom: 3px solid var(--brand-dark); }
.report-view h2 { border-bottom: 1px solid var(--svc-mid); color: var(--brand-dark); }
.report-view h3 { color: var(--brand-dark); }
.summary-box {
  background: var(--svc-light) !important;
  border: 1px solid var(--svc-mid) !important;
  border-left: 4px solid var(--svc-dark) !important;
  color: var(--brand-dark);
}
.print-header { border-bottom-color: var(--brand-mint); }
.pr-osio h2 { border-bottom-color: var(--svc-mid); color: var(--brand-dark); }

/* ---------- Lomakekentät ---------- */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--svc-dark);
  box-shadow: 0 0 0 3px rgba(101, 82, 122, .15);
}

/* ---------- Tulostus ---------- */
@media print {
  body, .report-view { font-family: "Mulish", system-ui, sans-serif; color: var(--brand-dark); }
  table th { background: var(--svc-light) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .summary-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}