/* ==========================================================================
   Waly & Rinne – asianhallinta
   Pohja: Tabler 1.7.3 (static/vendor/tabler). Tämä tiedosto ladataan Tablerin
   jälkeen ja ylikirjoittaa sen muuttujat brändin --wr-* -muuttujien kautta.
   Ks. docs/ulkoasu.md
   ========================================================================== */

/* --- Fontit (OFL, static/fonts/, ks. static/vendor/LUEMINUT.txt) ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800; 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: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; 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: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Brändin muuttujat ------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
  --wr-musta: #1a1a1a;          /* pääväri: teksti, logo */
  --wr-harmaa-brandi: #747071;  /* logon korostusharmaa: viivat, kuviot, reunat */
  --wr-harmaa: #676364;         /* toissijainen TEKSTI: brändiharmaa hieman tummennettuna, AA 4,8:1 myös #eeece8:lla */
  --wr-harmaa-vaalea: #b9b5b3;
  --wr-paperi: #f6f5f3;         /* sivun tausta, lämmin paperinsävy */
  --wr-paperi-2: #eeece8;       /* toissijaiset pinnat, aktiivinen valikko */
  --wr-pinta: #ffffff;          /* kortit */
  --wr-raja: #e3e0db;
  --wr-sininen: #1f3763;        /* aksentti: linkit, ensisijaiset painikkeet */
  --wr-sininen-rgb: 31, 55, 99;
  --wr-sininen-tumma: #16284a;
  --wr-sininen-vaalea: #e7ebf3;
  --wr-linkki: #1f3763;
  --wr-vihrea: #2d6a4f;
  --wr-vihrea-vaalea: #e4f0ea;
  --wr-oranssi: #9a5800;        /* tekstinä AA valkoisella 5,2:1 */
  --wr-oranssi-palkki: #d08a1e;
  --wr-oranssi-vaalea: #fbf1e1;
  --wr-punainen: #9f2a2a;
  --wr-punainen-vaalea: #f8e7e6;
  --wr-varjo: 0 1px 2px rgba(26, 26, 26, .05), 0 1px 1px rgba(26, 26, 26, .03);
  --wr-serif: "EB Garamond", "Cormorant Garamond", Garamond, "Hoefler Text", Georgia, "Times New Roman", serif;
  --wr-sans: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wr-pyoristys: 4px;
  --wr-sivupalkki: 15rem;
  --wr-logo-suodin: none;

  /* Tabler / Bootstrap */
  --tblr-primary: var(--wr-sininen);
  --tblr-primary-rgb: var(--wr-sininen-rgb);
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: var(--wr-sininen-tumma);
  --tblr-primary-lt: var(--wr-sininen-vaalea);
  --tblr-primary-lt-rgb: 231, 235, 243;
  --tblr-primary-text-emphasis: var(--wr-sininen-tumma);
  --tblr-primary-bg-subtle: var(--wr-sininen-vaalea);
  --tblr-primary-border-subtle: #b9c3d8;
  --tblr-body-bg: var(--wr-paperi);
  --tblr-body-bg-rgb: 246, 245, 243;
  --tblr-body-color: var(--wr-musta);
  --tblr-body-color-rgb: 26, 26, 26;
  --tblr-emphasis-color: var(--wr-musta);
  --tblr-bg-surface: var(--wr-pinta);
  --tblr-bg-surface-secondary: var(--wr-paperi-2);
  --tblr-bg-surface-tertiary: var(--wr-paperi);
  --tblr-secondary: var(--wr-harmaa);
  --tblr-secondary-rgb: 103, 99, 100;
  --tblr-secondary-color: var(--wr-harmaa);
  --tblr-muted: var(--wr-harmaa);
  --tblr-border-color: var(--wr-raja);
  --tblr-border-color-translucent: rgba(26, 26, 26, .09);
  --tblr-link-color: var(--wr-linkki);
  --tblr-link-color-rgb: var(--wr-sininen-rgb);
  --tblr-link-hover-color: var(--wr-sininen-tumma);
  --tblr-font-sans-serif: var(--wr-sans);
  --tblr-body-font-family: var(--wr-sans);
  --tblr-border-radius: var(--wr-pyoristys);
  --tblr-border-radius-sm: 3px;
  --tblr-border-radius-lg: 6px;
  --tblr-box-shadow-card: var(--wr-varjo);
  --tblr-focus-ring-color: rgba(var(--wr-sininen-rgb), .35);
  --tblr-success: var(--wr-vihrea);
  --tblr-success-rgb: 45, 106, 79;
  --tblr-warning: var(--wr-oranssi-palkki);
  --tblr-warning-rgb: 208, 138, 30;
  --tblr-danger: var(--wr-punainen);
  --tblr-danger-rgb: 159, 42, 42;
}

[data-bs-theme="dark"] {
  --wr-musta: #ecebe8;
  --wr-harmaa-brandi: #8f8b8c;
  --wr-harmaa: #aaa6a5;
  --wr-harmaa-vaalea: #6b6866;
  --wr-paperi: #141413;
  --wr-paperi-2: #24231f;
  --wr-pinta: #1c1b19;
  --wr-raja: #34322e;
  --wr-sininen: #3f62a6;        /* painikkeet: valkoinen teksti 5,9:1 */
  --wr-sininen-rgb: 63, 98, 166;
  --wr-sininen-tumma: #34548f;
  --wr-sininen-vaalea: #1f2a40;
  --wr-linkki: #a9bfeb;         /* linkit tummalla 9:1 */
  --wr-vihrea: #6cc39a;
  --wr-vihrea-vaalea: #17291f;
  --wr-oranssi: #e9b46a;
  --wr-oranssi-palkki: #d9972f;
  --wr-oranssi-vaalea: #2e2414;
  --wr-punainen: #ee8f8a;
  --wr-punainen-vaalea: #331a19;
  --wr-varjo: none;
  --wr-logo-suodin: invert(1) hue-rotate(180deg);

  --tblr-body-bg-rgb: 20, 20, 19;
  --tblr-body-color-rgb: 236, 235, 232;
  --tblr-secondary-rgb: 170, 166, 165;
  --tblr-primary-lt-rgb: 31, 42, 64;
  --tblr-primary-border-subtle: #33476f;
  --tblr-success-rgb: 108, 195, 154;
  --tblr-danger-rgb: 238, 143, 138;
  --tblr-border-color-translucent: rgba(255, 255, 255, .08);
}

/* --- Perustypografia ------------------------------------------------------ */
body {
  font-family: var(--wr-sans);
  font-feature-settings: "cv11", "ss01";
  background: var(--wr-paperi);
  color: var(--wr-musta);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title, .modal-title, .offcanvas-title, .empty-title, .wr-serif {
  font-family: var(--wr-serif);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--wr-musta);
}
.page-title { font-size: 1.75rem; line-height: 1.2; }
.card-title { font-size: 1.2rem; font-weight: 600; }
.page-pretitle { color: var(--wr-harmaa); letter-spacing: .08em; font-weight: 600; }
a { color: var(--wr-linkki); text-underline-offset: .15em; }
a:hover { color: var(--tblr-link-hover-color); }
.text-secondary, .text-muted { color: var(--wr-harmaa) !important; }

/* Luvut: tabular-nums, euromäärät oikealle */
.table, .datagrid, .wr-tunnusluku, .luku, .wr-luku { font-variant-numeric: tabular-nums; }
.luku, .wr-luku, th.luku, td.luku { text-align: right; white-space: nowrap; }

/* Näppäimistön fokus näkyväksi */
:focus-visible { outline: 2px solid var(--wr-sininen); outline-offset: 2px; }
[data-bs-theme="dark"] :focus-visible { outline-color: var(--wr-linkki); }
.wr-ohitus { position: absolute; left: .5rem; top: .5rem; z-index: 2000; padding: .5rem 1rem; background: var(--wr-pinta); border: 1px solid var(--wr-raja); }

/* --- Painikkeet ------------------------------------------------------------ */
.btn { font-weight: 500; border-radius: var(--wr-pyoristys); }
.btn-primary {
  --tblr-btn-bg: var(--wr-sininen);
  --tblr-btn-border-color: var(--wr-sininen);
  --tblr-btn-color: #fff;
  --tblr-btn-hover-bg: var(--wr-sininen-tumma);
  --tblr-btn-hover-border-color: var(--wr-sininen-tumma);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-active-bg: var(--wr-sininen-tumma);
  --tblr-btn-active-border-color: var(--wr-sininen-tumma);
  --tblr-btn-active-color: #fff;
  --tblr-btn-disabled-bg: var(--wr-sininen);
  --tblr-btn-disabled-border-color: var(--wr-sininen);
}
.btn-outline-primary {
  --tblr-btn-color: var(--wr-linkki);
  --tblr-btn-border-color: var(--wr-sininen);
  --tblr-btn-hover-bg: var(--wr-sininen);
  --tblr-btn-hover-border-color: var(--wr-sininen);
  --tblr-btn-hover-color: #fff;
}
.btn-ghost-secondary { --tblr-btn-color: var(--wr-harmaa); }
.btn .ti { font-size: 1.15em; }
.btn-icon .ti { margin: 0; }

/* --- Sivupalkki ------------------------------------------------------------ */
.wr-sivupalkki {
  --tblr-navbar-bg: var(--wr-pinta);
  --tblr-navbar-border-color: var(--wr-raja);
  --tblr-navbar-color: var(--wr-musta);
  --tblr-navbar-active-color: var(--wr-musta);
  --tblr-navbar-active-bg: var(--wr-paperi-2);
  background: var(--wr-pinta) !important;
  border-right: 1px solid var(--wr-raja);
  box-shadow: none;
}
.wr-sivupalkki .navbar-brand { padding: 1.25rem 1rem 1rem; justify-content: center; width: 100%; }
.wr-logo { display: block; height: auto; filter: var(--wr-logo-suodin); }
.wr-sivupalkki .wr-logo { width: 11rem; max-width: 100%; }
.wr-merkki { display: block; height: 2.25rem; width: auto; filter: var(--wr-logo-suodin); }
.wr-valikko .nav-link {
  color: var(--wr-musta);
  border-left: 3px solid transparent;
  padding: .55rem 1rem .55rem calc(1rem - 3px);
  border-radius: 0;
  font-weight: 500;
}
.wr-valikko .nav-link:hover { background: var(--wr-paperi); color: var(--wr-musta); }
.wr-valikko .nav-link.active,
.wr-valikko .nav-item.active > .nav-link {
  background: var(--wr-paperi-2);
  border-left-color: var(--wr-sininen);
  color: var(--wr-musta);
  font-weight: 600;
}
.wr-valikko .nav-link-icon { color: var(--wr-harmaa); width: 1.5rem; margin-right: .5rem; }
.wr-valikko .nav-link.active .nav-link-icon { color: var(--wr-linkki); }
.wr-valikko .wr-alavalikko .nav-link { padding-left: 3.25rem; font-weight: 400; font-size: .9rem; }
.wr-valikko-otsikko { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-harmaa); padding: 1rem 1rem .35rem; font-weight: 600; }
.wr-sivupalkki-ala { margin-top: auto; padding: 1rem; border-top: 1px solid var(--wr-raja); font-size: .8rem; color: var(--wr-harmaa); }
.wr-piste { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wr-oranssi-palkki); margin-left: auto; }

/* --- Yläpalkki ------------------------------------------------------------- */
.wr-ylapalkki {
  background: color-mix(in srgb, var(--wr-paperi) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--wr-raja);
  min-height: 3.75rem;
  z-index: 1020;
}
.wr-pikahaku { position: relative; flex: 1 1 auto; max-width: 34rem; }
.wr-pikahaku .form-control { background: var(--wr-pinta); }
.wr-pikahaku-valikko {
  width: 100%; max-height: 70vh; overflow-y: auto; margin-top: .25rem;
  border-color: var(--wr-raja); box-shadow: 0 8px 24px rgba(26, 26, 26, .12);
}
.wr-pikahaku-valikko .dropdown-header { font-family: var(--wr-sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-harmaa); }
.pikahaku-kohde { display: flex !important; align-items: center; gap: .6rem; white-space: normal; }
.pikahaku-kohde .ti { color: var(--wr-harmaa); }
.pikahaku-kohde small { margin-left: auto; color: var(--wr-harmaa); white-space: nowrap; }
.pikahaku-kohde:focus, .pikahaku-kohde:hover { background: var(--wr-paperi-2); }
.vain-pikahaku { display: none !important; }
.wr-pikahaku-valikko .vain-pikahaku, #kirjaa-tulokset .vain-pikahaku { display: block !important; }
.wr-avatar { background: var(--wr-sininen-vaalea); color: var(--wr-linkki); font-family: var(--wr-serif); font-weight: 600; }

.wr-nayta-tummassa { display: none !important; }
[data-bs-theme="dark"] .wr-nayta-tummassa { display: inline-block !important; }
[data-bs-theme="dark"] .wr-nayta-vaaleassa { display: none !important; }

/* --- Mobiilin alapalkki ----------------------------------------------------- */
.wr-alapalkki {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; justify-content: space-around;
  background: var(--wr-pinta); border-top: 1px solid var(--wr-raja);
  padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
}
.wr-alapalkki a, .wr-alapalkki button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .35rem .25rem; font-size: .7rem; color: var(--wr-harmaa); text-decoration: none;
  background: none; border: 0; min-height: 3rem;
}
.wr-alapalkki .ti { font-size: 1.4rem; }
.wr-alapalkki a.active { color: var(--wr-linkki); font-weight: 600; }
.wr-alapalkki .wr-alapalkki-paa .ti {
  background: var(--wr-sininen); color: #fff; border-radius: 50%; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center; margin-top: -1rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
@media (max-width: 991.98px) {
  body.wr-kirjautunut { padding-bottom: 4.25rem; }
}

/* --- Sivun otsikko ja kortit ----------------------------------------------- */
.page-header { margin-bottom: .5rem; }
.card { border-color: var(--wr-raja); box-shadow: var(--wr-varjo); background: var(--wr-pinta); }
.card-header { border-bottom-color: var(--wr-raja); }
.card-footer { background: transparent; border-top-color: var(--wr-raja); }
.wr-korostus { border-left: 3px solid var(--wr-sininen); }
.wr-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--wr-harmaa); font-size: .875rem; margin-top: .35rem; }
.wr-meta .ti { margin-right: .25rem; }
.wr-meta a { color: inherit; }

/* Tunnusluvut */
.wr-tunnusluku .subheader { color: var(--wr-harmaa); letter-spacing: .06em; }
.wr-tunnusluku .h1 { font-family: var(--wr-serif); font-weight: 500; font-size: 2rem; margin: .25rem 0 0; }
.wr-tunnusluku .wr-ikoni {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--wr-paperi-2); color: var(--wr-musta); font-size: 1.25rem;
}
.wr-tunnusluku.varoitus .wr-ikoni { background: var(--wr-oranssi-vaalea); color: var(--wr-oranssi); }
.wr-tunnusluku.varoitus .h1 { color: var(--wr-oranssi); }

/* Kaavio */
.wr-kaavio { display: block; width: 100%; height: 6rem; }
.wr-palkki { fill: var(--wr-sininen); opacity: .85; }
.wr-palkki.viikonloppu { fill: var(--wr-harmaa-vaalea); }
.wr-palkki.tanaan { fill: var(--wr-musta); opacity: 1; }
.wr-palkki:hover { opacity: 1; }
.wr-kaavio-akseli { display: flex; justify-content: space-between; font-size: .75rem; color: var(--wr-harmaa); margin-top: .25rem; }

/* --- Merkit (badge) -------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 3px; }
.wr-peruste { font-family: var(--wr-sans); border: 1px solid transparent; min-width: 2.25rem; }
.wr-peruste-a1 { background: var(--wr-sininen-vaalea); color: var(--wr-linkki); border-color: rgba(var(--wr-sininen-rgb), .35); }
.wr-peruste-a2 { background: var(--wr-vihrea-vaalea); color: var(--wr-vihrea); border-color: rgba(45, 106, 79, .35); }
.wr-peruste-a3 { background: var(--wr-oranssi-vaalea); color: var(--wr-oranssi); border-color: rgba(154, 88, 0, .35); }
.wr-tila-avoin { background: var(--wr-vihrea-vaalea); color: var(--wr-vihrea); }
.wr-tila-avauspyynto { background: var(--wr-oranssi-vaalea); color: var(--wr-oranssi); }
.wr-tila-paattynyt, .wr-tila-passiivinen { background: var(--wr-paperi-2); color: var(--wr-harmaa); }
.wr-rooli-asiakas { background: var(--wr-sininen-vaalea); color: var(--wr-linkki); }
.wr-rooli-osapuoli { background: var(--wr-paperi-2); color: var(--wr-musta); }
.wr-rooli-vastapuoli { background: var(--wr-punainen-vaalea); color: var(--wr-punainen); }

/* --- Taulukot -------------------------------------------------------------- */
.table { --tblr-table-bg: transparent; color: var(--wr-musta); }
.table thead th {
  font-family: var(--wr-sans); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wr-harmaa); background: var(--wr-paperi); font-weight: 600; white-space: nowrap;
}
.card-table thead th { background: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--wr-raja); }
.table-hover > tbody > tr:hover > * { --tblr-table-bg-state: var(--wr-paperi); }
tr.huomio > * { background: var(--wr-oranssi-vaalea) !important; }
tr.huomio > *:first-child { box-shadow: inset 3px 0 0 var(--wr-oranssi-palkki); }
tr.passiivinen, tr.tila-ei_laskuteta, tr.tila-laskutettu { color: var(--wr-harmaa); }
.wr-rivilinkki { color: var(--wr-musta); font-weight: 600; text-decoration: none; }
.wr-rivilinkki:hover { color: var(--wr-linkki); text-decoration: underline; }
.wr-lajittelu {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.wr-lajittelu .ti { opacity: .5; font-size: .9rem; }
th[aria-sort="ascending"] .wr-lajittelu .ti, th[aria-sort="descending"] .wr-lajittelu .ti { opacity: 1; color: var(--wr-linkki); }
.wr-lajittelu:focus-visible { outline: 2px solid var(--wr-sininen); outline-offset: 2px; }
th.luku .wr-lajittelu { flex-direction: row-reverse; }
ul.muutokset { padding-left: 1rem; margin: .25rem 0; font-size: .8rem; word-break: break-word; }

/* Puhelimella taulukot kortteina (data-label) */
@media (max-width: 767.98px) {
  .wr-kortit thead { display: none; }
  .wr-kortit, .wr-kortit tbody, .wr-kortit tr, .wr-kortit td { display: block; width: 100%; }
  .wr-kortit tr {
    border: 1px solid var(--wr-raja); border-radius: var(--wr-pyoristys); background: var(--wr-pinta);
    margin: .5rem 0; padding: .6rem .8rem;
  }
  .card > .table-responsive > .wr-kortit tr, .card > .wr-kortit tr { margin: .5rem .75rem; width: auto; }
  .wr-kortit td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border: 0 !important; padding: .2rem 0 !important; text-align: right; background: transparent !important;
  }
  .wr-kortit td[data-label]::before { content: attr(data-label); font-size: .8rem; color: var(--wr-harmaa); text-align: left; flex: 0 0 auto; }
  .wr-kortit td.wr-paa { display: block; text-align: left; font-size: 1rem; padding-bottom: .35rem !important; }
  .wr-kortit td.wr-paa::before { display: none; }
  .wr-kortit td:empty { display: none; }
  .wr-kortit tr.huomio { border-left: 3px solid var(--wr-oranssi-palkki); background: var(--wr-oranssi-vaalea); }
  .wr-kortit tr.huomio > *:first-child { box-shadow: none; }
  .table-responsive { overflow: visible; }
}

/* --- Datagrid / tiedot ----------------------------------------------------- */
.datagrid { --tblr-datagrid-padding: 1.25rem; --tblr-datagrid-item-width: 13rem; }
.datagrid-title { color: var(--wr-harmaa); }
.datagrid-content { word-break: break-word; }

/* --- Edistymispalkki (sopimushinta) ---------------------------------------- */
.seuranta { height: .6rem; background: var(--wr-paperi-2); border-radius: 1rem; }
.seuranta .progress-bar { border-radius: 1rem; }
.seuranta.vihrea .progress-bar { background: var(--wr-vihrea); }
.seuranta.oranssi .progress-bar { background: var(--wr-oranssi-palkki); }
.seuranta.punainen .progress-bar { background: var(--wr-punainen); }
.wr-seuranta-teksti.punainen { color: var(--wr-punainen); }
.wr-seuranta-teksti.oranssi { color: var(--wr-oranssi); }

/* --- Sirupainikkeet (suodattimet) ----------------------------------------- */
.wr-sirut { display: flex; flex-wrap: wrap; gap: .4rem; }
.wr-sirut .form-selectgroup-label {
  border-radius: 2rem; padding: .3rem .85rem; font-size: .85rem; background: var(--wr-pinta);
  border-color: var(--wr-raja); color: var(--wr-musta);
}
.wr-sirut .form-selectgroup-input:checked + .form-selectgroup-label {
  background: var(--wr-sininen); border-color: var(--wr-sininen); color: #fff;
}
.wr-sirut .form-selectgroup-input:focus-visible + .form-selectgroup-label { outline: 2px solid var(--wr-sininen); outline-offset: 2px; }
.wr-sirut .form-selectgroup-item { margin: 0; }
.wr-suodatin-select { width: auto; min-width: 12rem; border-radius: 2rem; font-size: .85rem; padding-top: .3rem; padding-bottom: .3rem; }

/* --- Lomakkeet ------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .875rem; }
.form-label.required::after { color: var(--wr-punainen); }
.wr-kentat { --bs-gutter-y: 1rem; }
.wr-ryhma { border: 0; padding: 0; margin: 0 0 1.5rem; }
.wr-ryhma > legend {
  font-family: var(--wr-serif); font-size: 1.15rem; font-weight: 600; float: none; width: 100%;
  padding-bottom: .35rem; margin-bottom: 1rem; border-bottom: 1px solid var(--wr-raja);
}
.wr-alilomake { background: var(--wr-paperi); border: 1px solid var(--wr-raja); border-radius: var(--wr-pyoristys); padding: 1rem; margin-bottom: 1rem; }
.wr-kentta textarea { min-height: 6rem; }
.wr-kentta .form-check { margin-bottom: 0; }
.wr-kentta ul { list-style: none; padding: 0; margin: 0; }
.wr-kentta ul li label { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.wr-lomaketoiminnot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-control, .form-select { background-color: var(--wr-pinta); border-color: var(--wr-raja); }
input, select, textarea { font-size: max(16px, 1rem); } /* iOS ei zoomaa */
@media (min-width: 768px) { input, select, textarea { font-size: .875rem; } }

/* Pikakirjaus */
.wr-pikakirjaus .card-header { background: var(--wr-paperi); }
.wr-pikakirjaus .wr-ryhma > legend { display: none; }
.wr-pikakirjaus .wr-ryhma { margin-bottom: 1rem; }

/* --- Välilehdet ------------------------------------------------------------ */
.nav-tabs .nav-link { font-weight: 500; color: var(--wr-harmaa); }
.nav-tabs .nav-link.active { color: var(--wr-musta); border-bottom-color: var(--wr-sininen) !important; }
.nav-tabs .nav-link .badge { margin-left: .4rem; }
@media (max-width: 767.98px) {
  .wr-valilehdet { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .wr-valilehdet .nav-link { white-space: nowrap; }
}

/* --- Vaiheet (avauspyyntö) ------------------------------------------------- */
.wr-vaiheet { list-style: none; padding: 0; margin: 0; counter-reset: vaihe; }
.wr-vaiheet li { display: flex; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--wr-raja); align-items: flex-start; }
.wr-vaiheet li:last-child { border-bottom: 0; }
.wr-vaiheet .wr-vaihe-nro {
  counter-increment: vaihe; flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--wr-harmaa-vaalea); font-family: var(--wr-serif); font-weight: 600; color: var(--wr-harmaa);
}
.wr-vaiheet .wr-vaihe-nro::before { content: counter(vaihe); }
.wr-vaiheet li.valmis .wr-vaihe-nro { background: var(--wr-vihrea); border-color: var(--wr-vihrea); color: #fff; }
.wr-vaiheet li.valmis .wr-vaihe-nro::before { content: "✓"; }

/* --- Tyhjä tila ------------------------------------------------------------ */
.empty { padding: 2.5rem 1rem; }
.empty-img img { height: 6rem; opacity: .9; filter: var(--wr-logo-suodin); }
.empty-icon .ti { font-size: 2.5rem; color: var(--wr-harmaa-vaalea); }
.empty-title { font-size: 1.25rem; }
.wr-ok-tila .empty-icon .ti { color: var(--wr-vihrea); }

/* --- Esteellisyyshaku ------------------------------------------------------ */
.wr-isohaku .form-control { font-size: 1.15rem; padding-top: .8rem; padding-bottom: .8rem; }
.wr-isohaku .input-icon-addon .ti { font-size: 1.3rem; }
.wr-esteryhma .card-header { gap: .5rem; }
.wr-esteryhma.vastapuoli { border-top: 3px solid var(--wr-punainen); }
.wr-esteryhma.osapuoli { border-top: 3px solid var(--wr-harmaa); }
.wr-esteryhma.asiakas { border-top: 3px solid var(--wr-sininen); }

/* --- Ilmoitukset ja toastit ------------------------------------------------ */
.wr-toastit { z-index: 1090; }
.toast { border-color: var(--wr-raja); background: var(--wr-pinta); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.toast.wr-success { border-left: 4px solid var(--wr-vihrea); }
.toast.wr-error { border-left: 4px solid var(--wr-punainen); }
.toast.wr-warning { border-left: 4px solid var(--wr-oranssi-palkki); }
.toast.wr-info, .toast.wr-debug { border-left: 4px solid var(--wr-sininen); }
.alert { background: var(--wr-pinta); }
.alert-warning { border-left: 4px solid var(--wr-oranssi-palkki); }

/* --- Kirjautuminen --------------------------------------------------------- */
.wr-kirjautuminen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(var(--wr-sininen-rgb), .06), transparent 60%),
    var(--wr-paperi);
}
.wr-kirjautuminen .card { width: 100%; max-width: 26rem; border-top: 3px solid var(--wr-musta); }
.wr-kirjautuminen .wr-logo { width: 15rem; margin: 0 auto; }
.wr-kirjautuminen .wr-viiva { width: 3rem; height: 1px; background: var(--wr-harmaa-vaalea); margin: 1.25rem auto; }
.wr-ms-nappi .wr-ms-logo { width: 1rem; height: 1rem; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-right: .6rem; }
.wr-ms-nappi .wr-ms-logo span:nth-child(1) { background: #f25022; }
.wr-ms-nappi .wr-ms-logo span:nth-child(2) { background: #7fba00; }
.wr-ms-nappi .wr-ms-logo span:nth-child(3) { background: #00a4ef; }
.wr-ms-nappi .wr-ms-logo span:nth-child(4) { background: #ffb900; }

/* --- HTMX ------------------------------------------------------------------ */
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request.wr-himmea, .htmx-request .wr-himmea { opacity: .55; transition: opacity .15s; }

/* --- Liikkeen vähentäminen ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- Tulostus -------------------------------------------------------------- */
@media print {
  .wr-sivupalkki, .wr-ylapalkki, .wr-alapalkki, .wr-toastit, .btn, .nav-tabs, form, .wr-pikakirjaus { display: none !important; }
  .page-wrapper { margin: 0 !important; }
  body { background: #fff; padding: 0 !important; }
  .card { border: 0; box-shadow: none; }
  .tab-pane { display: block !important; opacity: 1 !important; }
}

/* Kirjeenvaihdon esikatselu: viestin alku kahdella rivillä (koko teksti title-vihjeessä) */
.wr-esikatselu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60rem; }