/* Kirjus – mobiiliensijainen käyttöliittymä. Ei ulkoisia kirjastoja. */

:root {
    --sininen: #1b2a4a;
    --sininen-kirkas: #2f4d85;
    --korostus: #e8a33d;
    --tausta: #f4f6fa;
    --kortti: #ffffff;
    --teksti: #17202e;
    --teksti-haalea: #5d6b80;
    --raja: #dde3ed;
    --vihrea: #17795e;
    --vihrea-tausta: #e3f4ee;
    --punainen: #b4352c;
    --punainen-tausta: #fceceb;
    --keltainen-tausta: #fdf3e0;
    --varjo: 0 1px 2px rgba(23, 32, 46, .06), 0 4px 16px rgba(23, 32, 46, .05);
    --pyoristys: 14px;
    --leveys: 720px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sininen: #0f1724;
        --sininen-kirkas: #5b8def;
        --tausta: #0f1724;
        --kortti: #18212f;
        --teksti: #e7ecf4;
        --teksti-haalea: #9aa8bd;
        --raja: #27324a;
        --vihrea: #4dc79f;
        --vihrea-tausta: #14342c;
        --punainen: #f08a80;
        --punainen-tausta: #3a1f1d;
        --keltainen-tausta: #3a2f1a;
        --varjo: 0 1px 2px rgba(0, 0, 0, .3);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--teksti);
    background: var(--tausta);
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--sininen-kirkas); }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

.muted { color: var(--teksti-haalea); font-weight: 400; }
.center { text-align: center; }

.skip {
    position: absolute; left: -9999px;
}
.skip:focus {
    left: 1rem; top: 1rem; z-index: 100; background: var(--kortti);
    padding: .5rem 1rem; border-radius: 8px;
}

/* --- Yläpalkki --- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--sininen);
    color: #fff;
    padding-top: env(safe-area-inset-top);
}
.topbar__inner {
    max-width: var(--leveys); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .7rem 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.brand__mark {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    background: linear-gradient(140deg, var(--korostus), #d2762c);
    position: relative;
}
.brand__mark::after {
    content: "K"; position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 18px; line-height: 1;
}
.brand__mark--lg { display: block; width: 46px; height: 46px; border-radius: 13px; margin: 0 auto .6rem; }
.brand__mark--lg::after { font-size: 27px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 1.02rem; letter-spacing: .01em; }
.brand__text small { font-size: .74rem; opacity: .75; }

.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; }
.usermenu summary::-webkit-details-marker { display: none; }
.avatar {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: rgba(255, 255, 255, .16); font-weight: 600;
}
.usermenu__panel {
    position: absolute; right: 0; top: calc(100% + .5rem); min-width: 200px;
    background: var(--kortti); color: var(--teksti); border: 1px solid var(--raja);
    border-radius: var(--pyoristys); box-shadow: var(--varjo); padding: .85rem;
}
.usermenu__name { margin: 0; font-weight: 600; }
.usermenu__role { margin: 0 0 .6rem; font-size: .85rem; color: var(--teksti-haalea); }

/* --- Rakenne --- */
.shell { max-width: var(--leveys); margin: 0 auto; display: flex; gap: 1.5rem; }
.main { flex: 1; min-width: 0; padding: 1rem 1rem 6rem; }

.sidenav { display: none; }

.page { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page h1 { flex: 1; }

.section { margin-top: 1.75rem; }
.section__title { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--teksti-haalea); }

/* --- Kortit ja listat --- */
.card {
    background: var(--kortti); border: 1px solid var(--raja);
    border-radius: var(--pyoristys); box-shadow: var(--varjo);
    padding: 1.15rem; margin-bottom: 1rem;
}
.card--compact { padding: .9rem 1rem; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.list__item a {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: var(--kortti); border: 1px solid var(--raja); border-radius: var(--pyoristys);
    padding: .85rem 1rem; text-decoration: none; color: inherit; box-shadow: var(--varjo);
}
.list__item a:active { transform: scale(.995); }
.list__main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.list__main span { font-size: .87rem; }

.empty {
    background: var(--kortti); border: 1px dashed var(--raja); border-radius: var(--pyoristys);
    padding: 1.5rem 1rem; text-align: center; color: var(--teksti-haalea);
}

.summary { margin: .25rem 0 1rem; }

.note { font-size: .82rem; }
.note--error { color: var(--punainen); }

/* --- Tunnusluvut --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.stat {
    background: var(--kortti); border: 1px solid var(--raja); border-radius: var(--pyoristys);
    padding: .9rem 1rem; text-decoration: none; color: inherit; box-shadow: var(--varjo);
    display: flex; flex-direction: column; gap: .15rem;
}
.stat__label { font-size: .78rem; color: var(--teksti-haalea); text-transform: uppercase; letter-spacing: .05em; }
.stat__value { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.stat__hint { font-size: .78rem; color: var(--teksti-haalea); }
.stat--alert { border-color: var(--korostus); background: var(--keltainen-tausta); }

/* --- Lomakkeet --- */
.form { display: flex; flex-direction: column; gap: .9rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field__label { font-size: .85rem; font-weight: 600; color: var(--teksti-haalea); }
.field__error { font-size: .82rem; color: var(--punainen); font-style: normal; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field--inline { flex: 1; }

input, select, textarea {
    font: inherit; color: inherit; width: 100%;
    background: var(--kortti); border: 1px solid var(--raja);
    border-radius: 11px; padding: .72rem .8rem; min-height: 46px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--sininen-kirkas); outline-offset: 1px; border-color: transparent;
}

.filters { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .5rem; }

.calc {
    margin: 0; padding: .7rem .9rem; border-radius: 11px;
    background: var(--vihrea-tausta); color: var(--vihrea); font-weight: 600;
}
.calc:empty { display: none; }

/* --- Painikkeet --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    border-radius: 11px; padding: .72rem 1.1rem; min-height: 46px;
    border: 1px solid transparent; background: var(--kortti); color: var(--teksti);
}
.btn--primary { background: var(--sininen); color: #fff; }
.btn--primary:active { background: var(--sininen-kirkas); }
.btn--ghost { background: transparent; border-color: var(--raja); }
.btn--danger { background: transparent; color: var(--punainen); border-color: var(--punainen); }
.btn--block { width: 100%; }
.btn--lg { min-height: 54px; font-size: 1.05rem; }

/* --- Merkinnät --- */
.tag {
    flex: none; font-size: .72rem; font-weight: 600; padding: .25rem .55rem;
    border-radius: 999px; background: var(--raja); color: var(--teksti-haalea); white-space: nowrap;
}
.tag--hyvaksytty { background: var(--vihrea-tausta); color: var(--vihrea); }
.tag--lahetetty { background: var(--keltainen-tausta); color: #8a5a12; }
.tag--hylatty { background: var(--punainen-tausta); color: var(--punainen); }

.flash { padding: .8rem 1rem; border-radius: 11px; margin: 0 0 1rem; font-size: .92rem; }
.flash--success { background: var(--vihrea-tausta); color: var(--vihrea); }
.flash--error { background: var(--punainen-tausta); color: var(--punainen); }

/* --- Hyväksynnät --- */
.approval__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.approval__hours { font-size: 1.2rem; font-weight: 600; margin: .35rem 0 .1rem; }
.approval__hours .muted { font-size: .85rem; font-weight: 400; }
.approval__desc { margin: .5rem 0 0; font-size: .92rem; }
.approval__actions { margin-top: .85rem; display: flex; flex-direction: column; gap: .5rem; }
.approval__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* --- Alanavigaatio (mobiili) --- */
.tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    display: flex; background: var(--kortti); border-top: 1px solid var(--raja);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__link {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .55rem .25rem .5rem; text-decoration: none; color: var(--teksti-haalea); font-size: .7rem;
}
.tabbar__link svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabbar__link.is-active { color: var(--sininen-kirkas); font-weight: 600; }

/* --- Kirjautumissivut --- */
.body--auth { display: grid; place-items: center; min-height: 100dvh; padding: 1.25rem; }
.authbox { width: 100%; max-width: 420px; }
.authbox__brand { text-align: center; margin-bottom: 1.25rem; }
.authbox__brand h1 { font-size: 1.7rem; margin: 0; }
.authbox__brand p { margin: .15rem 0 0; color: var(--teksti-haalea); font-size: .92rem; }

/* --- Työpöytäleveys --- */
@media (min-width: 860px) {
    .tabbar { display: none; }
    .shell { padding: 1.5rem 1rem; gap: 2rem; }
    .main { padding: 0 0 2rem; }
    .sidenav { display: flex; flex-direction: column; gap: .2rem; width: 190px; flex: none; position: sticky; top: 5rem; align-self: flex-start; }
    .sidenav__link {
        display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem;
        border-radius: 10px; text-decoration: none; color: var(--teksti-haalea); font-weight: 500;
    }
    .sidenav__link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .sidenav__link.is-active { background: var(--kortti); color: var(--sininen-kirkas); box-shadow: var(--varjo); }
}

/* --- Lisäykset: moduulit, taulukot, lomakeosat --- */

.page__toiminnot { display: flex; gap: .5rem; flex-wrap: wrap; }
.small { font-size: .84rem; }

.huomiot { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.huomio {
    display: block; padding: .6rem .85rem; border-radius: 11px;
    background: var(--keltainen-tausta); color: #8a5a12; text-decoration: none; font-size: .9rem;
    border: 1px solid rgba(232, 163, 61, .35);
}

.pikatoiminnot { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-bottom: .5rem; }
@media (min-width: 560px) {
    .pikatoiminnot { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.check { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--sininen-kirkas); }

.lomake__otsikko {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--teksti-haalea); margin: .75rem 0 0;
}

.liitteet { display: flex; flex-wrap: wrap; gap: .4rem; }
.liite {
    font-size: .85rem; background: var(--tausta); border: 1px solid var(--raja);
    border-radius: 999px; padding: .25rem .7rem;
}

.tiedot { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 .5rem; }
.tiedot dt { color: var(--teksti-haalea); font-size: .85rem; }
.tiedot dd { margin: 0; }

.taulukko { overflow-x: auto; border: 1px solid var(--raja); border-radius: var(--pyoristys); background: var(--kortti); }
.taulukko table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.taulukko th, .taulukko td { padding: .6rem .8rem; text-align: left; white-space: nowrap; }
.taulukko th {
    background: var(--tausta); font-size: .78rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--teksti-haalea); border-bottom: 1px solid var(--raja);
}
.taulukko tbody tr + tr td { border-top: 1px solid var(--raja); }
.taulukko td.numero { text-align: right; font-variant-numeric: tabular-nums; }

.list__item--staattinen > div,
.list__item--staattinen > a {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: var(--kortti); border: 1px solid var(--raja); border-radius: var(--pyoristys);
    padding: .85rem 1rem; box-shadow: var(--varjo);
}
.list__oikea { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex: none; }
.linkkinappi {
    background: none; border: 0; padding: 0; font: inherit; font-size: .82rem;
    color: var(--punainen); cursor: pointer; text-decoration: underline;
}

.approval__valinta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; margin-bottom: .4rem; }
.approval__valinta input { width: 20px; height: 20px; min-height: 0; accent-color: var(--sininen-kirkas); }
.approval__rivi { margin: .2rem 0; }
.joukkolomake { margin-bottom: .6rem; }

.kayttajarivi { border-top: 1px solid var(--raja); padding-top: .9rem; margin-top: .9rem; }
.kayttajarivi:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.usermenu__link {
    display: block; padding: .45rem 0; color: var(--teksti); text-decoration: none;
    font-size: .92rem; border-top: 1px solid var(--raja);
}

.sidenav__ero { border: 0; border-top: 1px solid var(--raja); margin: .6rem .8rem; }
.sidenav__link--pieni { font-size: .88rem; padding-left: 2.35rem; }

.tag--kaytossa { background: var(--vihrea-tausta); color: var(--vihrea); }
.tag--huollossa { background: var(--keltainen-tausta); color: #8a5a12; }
.tag--rikki { background: var(--punainen-tausta); color: var(--punainen); }
.tag--poistettu { background: var(--raja); color: var(--teksti-haalea); }

input[type="file"] { padding: .55rem; background: var(--tausta); }

/* --- Työmaaraportit: kuvat --- */
.kuvaristikko {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin: .75rem 0 1.25rem;
}
.kuva { margin: 0; background: var(--kortti); border-radius: var(--pyoristys); overflow: hidden; }
.kuva img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #e9edf4;
}
.kuva figcaption { padding: .5rem .6rem; font-size: .85rem; line-height: 1.3; }
.kuva figcaption .muted { display: block; font-size: .78rem; }
.kuva__form { display: grid; gap: .35rem; padding: .5rem; }
.kuva__form input, .kuva__form select { width: 100%; font-size: .85rem; padding: .35rem .5rem; }
.kuva__poista { padding: 0 .5rem .5rem; }
.btn--pieni { padding: .35rem .6rem; font-size: .82rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.toolbar form { margin: 0; }
.vaarallinen { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--raja); }

.tiedot { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.tiedot dt { font-size: .82rem; color: var(--teksti-haalea); }
.tiedot dd { margin: 0; font-weight: 600; }
.osio { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin: 1.25rem 0 .35rem; color: var(--teksti-haalea); }
.teksti { margin: 0 0 .75rem; line-height: 1.55; white-space: normal; }
.form__osio { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin: 1.5rem 0 .25rem; color: var(--teksti-haalea); }
.hint { font-size: .85rem; color: var(--teksti-haalea); margin: .25rem 0 .75rem; }
.list__lisa {
    display: flex; gap: 1.25rem; margin: -.35rem 0 0; padding: .55rem 1rem .6rem;
    font-size: .85rem; background: var(--kortti);
    border: 1px solid var(--raja); border-top: 0;
    border-radius: 0 0 var(--pyoristys) var(--pyoristys);
}
.list__item:has(.list__lisa) > a { border-radius: var(--pyoristys) var(--pyoristys) 0 0; }
.linkkikentta {
    width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .8rem; padding: .35rem .5rem; margin: .35rem 0;
}
.olosuhteet { font-size: .85rem; }

/* --- Asiakkaan katselunäkymä --- */
.portaali { background: var(--tausta); }
.portaali__ylapalkki { background: #1b2a4a; color: #fff; padding: .9rem 1rem; }
.portaali__sisus { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; }
.portaali__sisus span { font-size: .85rem; opacity: .8; }
.portaali__main { max-width: 780px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.portaali__alapalkki {
    max-width: 780px; margin: 0 auto; padding: 0 1rem 2.5rem;
    font-size: .82rem; color: var(--teksti-haalea);
}
.page--portaali { display: block; margin-bottom: 1rem; }
.raportti { margin-bottom: 1.25rem; }
.raportti__ylä h2 { margin: 0 0 .15rem; font-size: 1.15rem; }
.tag--luonnos { background: var(--raja); color: var(--teksti-haalea); }

/* --- Ohjeet --- */
.page--ohje { display: block; margin-bottom: 1.25rem; }
.page--ohje p { margin: .25rem 0 0; max-width: 60ch; }

.murupolku { font-size: .85rem; color: var(--teksti-haalea); margin-bottom: .5rem; }
.murupolku a { text-decoration: none; }

.ohjeruudukko { display: grid; gap: .6rem; grid-template-columns: 1fr; margin-bottom: 1.25rem; }
@media (min-width: 620px) { .ohjeruudukko { grid-template-columns: 1fr 1fr; } }

.ohjekortti {
    background: var(--kortti); border: 1px solid var(--raja);
    border-radius: var(--pyoristys); box-shadow: var(--varjo);
    padding: 1.05rem 1.15rem;
}
.ohjekortti--linkki {
    display: flex; gap: .85rem; align-items: flex-start;
    color: inherit; text-decoration: none;
}
.ohjekortti--linkki:active { transform: scale(.995); }
.ohjekortti__ikoni {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--vihrea-tausta); color: var(--vihrea);
}
.ohjekortti__ikoni svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ohjekortti__teksti { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ohjekortti__teksti .muted { font-size: .87rem; line-height: 1.4; }
.ohjekortti__meta { font-size: .78rem; color: var(--teksti-haalea); margin-top: .2rem; }
.ohjekortti--pika { margin-bottom: 1rem; }
.ohjekortti--pika .section__title { margin: 0 0 .5rem; }

.pikapolut { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pikapolut a { display: block; padding: .4rem 0; text-decoration: none; font-size: .95rem; }
.pikapolut li + li { border-top: 1px solid var(--raja); }

.ohjesivu { display: block; }
.sisallys {
    background: var(--kortti); border: 1px solid var(--raja);
    border-radius: var(--pyoristys); padding: .8rem 1rem; margin-bottom: 1rem;
}
.sisallys summary {
    cursor: pointer; font-weight: 600; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .06em; color: var(--teksti-haalea);
}
.sisallys ol { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.sisallys a { text-decoration: none; font-size: .93rem; }

.ohje {
    background: var(--kortti); border: 1px solid var(--raja);
    border-radius: var(--pyoristys); box-shadow: var(--varjo);
    padding: 1.35rem 1.25rem 1.6rem;
}
.ohje p { margin: 0 0 .9rem; line-height: 1.62; max-width: 66ch; }
.ohje__otsikko { scroll-margin-top: 4.5rem; }
.ohje__otsikko--2 {
    font-size: 1.12rem; margin: 1.9rem 0 .6rem; padding-top: .9rem;
    border-top: 1px solid var(--raja); letter-spacing: -.01em;
}
.ohje > .ohje__otsikko--2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ohje__otsikko--3 { font-size: .97rem; margin: 1.35rem 0 .4rem; color: var(--teksti-haalea);
    text-transform: uppercase; letter-spacing: .05em; }
.ohje__lista { margin: 0 0 1rem; padding-left: 1.35rem; display: grid; gap: .4rem; max-width: 66ch; }
.ohje__lista li { line-height: 1.55; }
.ohje__koodi {
    background: var(--tausta); border: 1px solid var(--raja); border-radius: 10px;
    padding: .8rem .9rem; overflow-x: auto; font-size: .82rem; line-height: 1.5;
    margin: 0 0 1rem;
}
.ohje code {
    background: var(--tausta); border: 1px solid var(--raja); border-radius: 5px;
    padding: .05rem .3rem; font-size: .88em;
}
.ohje__koodi code { background: none; border: 0; padding: 0; }
.ohje__ero { border: 0; border-top: 1px solid var(--raja); margin: 1.5rem 0; }
.ohje__paluu { margin-top: 1.25rem; }
.ohje__paluu a { text-decoration: none; }

@media (min-width: 900px) {
    .ohjesivu { display: grid; grid-template-columns: 1fr 215px; gap: 1.5rem; align-items: start; }
    .ohjesivu .ohje { grid-column: 1; grid-row: 1; }
    .sisallys { grid-column: 2; grid-row: 1; position: sticky; top: 4.5rem; margin: 0; }
}

/* --- Laskutus --- */
.taulukko-kaari { overflow-x: auto; margin-bottom: 1.25rem; -webkit-overflow-scrolling: touch; }
.taulukko {
    width: 100%; border-collapse: collapse; font-size: .9rem;
    background: var(--kortti); border: 1px solid var(--raja);
    border-radius: var(--pyoristys); overflow: hidden; box-shadow: var(--varjo);
}
.taulukko th, .taulukko td { padding: .55rem .7rem; text-align: left; vertical-align: top; }
.taulukko thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--teksti-haalea); border-bottom: 1px solid var(--raja); white-space: nowrap;
}
.taulukko tbody tr + tr td { border-top: 1px solid var(--raja); }
.taulukko tfoot th, .taulukko tfoot td {
    font-size: .85rem; padding-top: .4rem; padding-bottom: .4rem;
    color: var(--teksti-haalea); font-weight: 500;
}
.taulukko tfoot tr:first-child th, .taulukko tfoot tr:first-child td { border-top: 1px solid var(--raja); padding-top: .6rem; }
.taulukko tfoot .summarivi th, .taulukko tfoot .summarivi td {
    color: var(--teksti); font-size: 1rem; font-weight: 700; padding-bottom: .7rem;
}
.taulukko .oikea { text-align: right; white-space: nowrap; }
.rivilaji { display: block; font-size: .76rem; }

.valinnat { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
.valinnat legend { padding: 0; margin-bottom: .2rem; }

.myohassa { color: var(--punainen); }
.tag--luonnos, .tag--mitatoity { background: var(--raja); color: var(--teksti-haalea); }
.tag--lahetetty { background: var(--keltainen-tausta); color: #8a5a12; }
.tag--maksettu { background: var(--vihrea-tausta); color: var(--vihrea); }

/* --- Ohjesivun leveys isolla naytolla --- */
@media (min-width: 1000px) {
  body:has(.ohjesivu) .shell { max-width: 1140px; }
}
@media (max-width: 860px) {
  .ohjesivu { display: block; }
  .ohjesivu .sisallys { margin-bottom: 1.25rem; position: static; }
}

/* --- YTJ-haku asiakaslomakkeella --- */
.ytj {
  padding: 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid var(--raja);
  border-radius: var(--pyoristys);
  background: rgba(0, 0, 0, 0.02);
}
.ytj .field { margin-bottom: 0.6rem; }
.ytj__tila {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 1.2em;
}
.ytj__tila--virhe { color: var(--punainen); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ytj { background: rgba(255, 255, 255, 0.03); }
}

/* Osapuolet, vuorot ja viestit (v0.13) */
.vuoro { border: 1px solid var(--raja, #dde3ee); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.vuoro__otsikko { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.vuoro__tila { margin-left: auto; font-size: .85rem; padding: 2px 8px; border-radius: 999px; background: #eef2f9; }
.vuoro__tila--vajaa { background: #fdecec; color: #8c2020; }
.vuoro__tila--ok { background: #e8f5ec; color: #1d6b38; }
.vuoro__lista { margin: 8px 0; padding-left: 18px; }
.vuoro__tarjoa { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 10px 0; }
.vuoro__vastaus { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.check--pieni { font-size: .9rem; }
.btn--pieni { padding: 4px 10px; font-size: .85rem; }
.viestit { list-style: none; margin: 14px 0 0; padding: 0; }
.viesti { border-top: 1px solid var(--raja, #dde3ee); padding: 12px 0; }
.viesti__teksti { margin: 0 0 4px; }
.portaali__kortti { background: #fff; border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(20,30,60,.08); }

/* Varauskalenteri (v0.14) */
.kalenteri__ohjaus { display: flex; gap: 8px; flex-wrap: wrap; }
.kalenteri { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kalenteri__otsikko { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7590; padding: 2px 4px; }
.kalenteri__paiva { min-height: 78px; min-width: 0; overflow: hidden; border: 1px solid var(--raja, #dde3ee); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.kalenteri__paiva--tyhja { border: none; }
.kalenteri__paiva--tanaan { border-color: #1b2a4a; box-shadow: inset 0 0 0 1px #1b2a4a; }
.kalenteri__numero { font-size: .8rem; color: #6b7590; }
.varauslatka { display: block; max-width: 100%; font-size: .74rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; background: #eef2f9; color: #1b2a4a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.varauslatka--optio { background: #fff4e0; color: #7a4b00; }
.varauslatka--vahvistettu { background: #e8f5ec; color: #1d6b38; }
.varauslatka--pidetty { background: #e9edf6; color: #3a4a6b; }
.varauslatka--peruttu { background: #f3f4f6; color: #8a8f98; text-decoration: line-through; }
.list__toiminnot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .kalenteri { grid-template-columns: 1fr; }
  .kalenteri__otsikko { display: none; }
  .kalenteri__paiva--tyhja { display: none; }
  .kalenteri__paiva { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kalenteri__numero { min-width: 2.2em; font-weight: 600; }
  .varauslatka { white-space: normal; }
}

/* Tarjoukset (v0.15) */
.taulu { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .92rem; }
.taulu th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7590; padding: 6px 8px; border-bottom: 1px solid var(--raja, #dde3ee); }
.taulu td { padding: 7px 8px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.taulu tr:last-child td { border-bottom: none; }
.summa { margin: 10px 0 0; font-size: .95rem; }
@media (max-width: 640px) {
  .taulu, .taulu tbody, .taulu tr, .taulu td { display: block; width: 100%; }
  .taulu thead { display: none; }
  .taulu tr { border-bottom: 1px solid var(--raja, #dde3ee); padding: 6px 0; }
  .taulu td { border: none; padding: 2px 0; }
}

/* --- Leveämpi työpöytänäkymä isolla naytolla (v0.16) --- */
@media (min-width: 1100px) {
    .shell { max-width: 1180px; }
}
@media (min-width: 640px) {
    .kalenteri__paiva { min-height: 96px; }
    .varauslatka { font-size: .78rem; }
}

/* --- Leveampi tyopoytanakyma isolla naytolla (v0.16) --- */
@media (min-width: 1100px) {
    .shell { max-width: 1180px; }
}
@media (min-width: 640px) {
    .kalenteri__paiva { min-height: 96px; }
    .varauslatka { font-size: .78rem; }
}

/* leveampi tyopoyta v0.16 */
@media (min-width: 1100px) { .shell { max-width: 1180px; } }
@media (min-width: 640px) { .kalenteri__paiva { min-height: 96px; } .varauslatka { font-size: .78rem; } }

/* Testiympariston tunnistepalkki */
.testipalkki { background: #f28c28; color: #24170a; text-align: center; padding: 6px 12px; font-size: .84rem; font-weight: 600; }