/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-bk711904un] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ----- Yläpalkki ----- */
.tc-topbar[b-bk711904un] {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.5rem;
    padding: 0 1rem;
    background-color: rgb(5, 39, 103);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.tc-brand[b-bk711904un] {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

    .tc-brand .tc-logo-icon[b-bk711904un] {
        height: 2.1rem;
        width: auto;
        display: block;
    }

.tc-wordmark[b-bk711904un] {
    font-family: 'Segoe UI', Montserrat, Arial, sans-serif;
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

    .tc-wordmark .tc-w-taika[b-bk711904un] {
        position: relative;
        color: #e7ebef;
    }

    .tc-wordmark .tc-w-tilaus[b-bk711904un] {
        color: #7ac143;
    }

    .tc-wordmark .tc-w-app[b-bk711904un] {
        position: absolute;
        top: -0.58em;
        left: 50%;
        transform: translateX(-50%) rotate(-9deg);
        color: #e8352a;
        font-size: 0.6em;
        font-weight: 800;
        font-style: italic;
        letter-spacing: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
        pointer-events: none;
    }

/* ----- Vaakavalikko ----- */
.tc-nav[b-bk711904un] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tc-nav[b-bk711904un]  .tc-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
}

    .tc-nav[b-bk711904un]  .tc-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .tc-nav[b-bk711904un]  .tc-nav-link.active {
        background-color: rgba(255, 255, 255, 0.22);
        color: #fff;
    }

    .tc-nav[b-bk711904un]  .tc-nav-link .bi {
        font-size: 1rem;
    }

/* ----- Vaakavalikon pudotusvalikko (Postitus) ----- */
.tc-navdrop[b-bk711904un] {
    position: relative;
    display: flex;
    align-items: center;
}

    .tc-navdrop > summary[b-bk711904un] {
        list-style: none;
        cursor: pointer;
    }

        .tc-navdrop > summary[b-bk711904un]::-webkit-details-marker {
            display: none;
        }

    .tc-navdrop .tc-caret[b-bk711904un] {
        font-size: 0.7rem;
        margin-left: 0.15rem;
        opacity: 0.75;
        transition: transform 0.15s;
    }

    .tc-navdrop[open] .tc-caret[b-bk711904un] {
        transform: rotate(180deg);
    }

.tc-submenu[b-bk711904un] {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.35rem;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 0.25rem;
    z-index: 1050;
}

    /* Läpinäkyvä "silta" peittää summaryn ja alivalikon välisen raon,
       jotta hiiri ei poistu details-alueelta valikkoa kohti siirryttäessä. */
    .tc-submenu[b-bk711904un]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.5rem;
        height: 0.5rem;
    }

.tc-submenu[b-bk711904un]  .tc-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 0;
    background: transparent;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

    .tc-submenu[b-bk711904un]  .tc-menu-item:hover {
        background-color: #f0f0f5;
    }

    .tc-submenu[b-bk711904un]  .tc-menu-item.active {
        background-color: #e7e9f5;
        color: rgb(5, 39, 103);
    }

    /* Toiminto ei ole vielä käytössä: harmaana, ei osoitinta eikä hover-korostusta. */
    .tc-submenu[b-bk711904un]  .tc-menu-item:disabled {
        color: #9a9a9a;
        cursor: default;
    }

        .tc-submenu[b-bk711904un]  .tc-menu-item:disabled:hover {
            background-color: transparent;
        }

/* ----- Alivalikko pudotusvalikon sisällä (TaikaTilaus → Demoympäristö) -----
   Avautuu paikallaan harmonikkana, ei erillisenä leijuvana paneelina: valikko
   on jo valmiiksi pudotusvalikon sisällä. */
.tc-submenu[b-bk711904un]  .tc-alavalikko > summary {
    list-style: none;
    cursor: pointer;
}

    .tc-submenu[b-bk711904un]  .tc-alavalikko > summary::-webkit-details-marker {
        display: none;
    }

/* Oma luokka karetille: .tc-navdrop[open] .tc-caret kääntäisi tämänkin heti
   kun ylävalikko avataan. */
.tc-submenu[b-bk711904un]  .tc-alacaret {
    font-size: 0.7rem;
    opacity: 0.75;
    transition: transform 0.15s;
}

.tc-submenu[b-bk711904un]  .tc-alavalikko[open] .tc-alacaret {
    transform: rotate(180deg);
}

/* Sisennys erottaa alikohdat emokohdasta; ohut viiva sitoo ne yhteen. */
.tc-submenu[b-bk711904un]  .tc-alavalikko-sisalto {
    margin-left: 1.1rem;
    padding-left: 0.4rem;
    border-left: 1px solid #e0e0e0;
}

/* ----- Oikean reunan työkalut ----- */
.tc-tools[b-bk711904un] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tc-search[b-bk711904un] {
    width: 200px;
}

    .tc-search .form-control:focus[b-bk711904un],
    .tc-search .input-group-text[b-bk711904un] {
        box-shadow: none;
    }

.tc-icon[b-bk711904un] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    background: none;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .tc-icon:hover[b-bk711904un] {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
    }


/* Ilmoitusten lukumäärämerkki ikonin oikeassa yläkulmassa */
.tc-badge[b-bk711904un] {
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    padding: 0.2em 0.4em;
    line-height: 1;
}

/* ----- Hammasratasvalikko (details/summary, ei JS:ää) ----- */
.tc-dropdown[b-bk711904un] {
    position: relative;
}

    .tc-dropdown > summary[b-bk711904un] {
        list-style: none;
    }

        .tc-dropdown > summary[b-bk711904un]::-webkit-details-marker {
            display: none;
        }

.tc-menu[b-bk711904un] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 0.25rem;
    z-index: 1050;
}

.tc-menu[b-bk711904un]  .tc-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

    .tc-menu[b-bk711904un]  .tc-menu-item:hover {
        background-color: #f0f0f5;
    }

    .tc-menu[b-bk711904un]  .tc-menu-item.active {
        background-color: #e7e9f5;
        color: rgb(5, 39, 103);
    }

/* ----- Sisältö ----- */
.tc-tools[b-bk711904un]  .tc-user-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.96);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* Kehitysympäristön tenant-tunnus käyttäjätunnuksen perässä (ei tuotannossa). */
.tc-tools .tc-dev-tenant[b-bk711904un] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    background-color: rgba(255, 193, 7, 0.9);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tc-tools[b-bk711904un]  .tc-user-link:hover,
.tc-tools[b-bk711904un]  .tc-user-link.active {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    text-decoration: none;
}

main[b-bk711904un] {
    flex: 1;
}

.content[b-bk711904un] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* ----- Kapeat näytöt ----- */
@media (max-width: 991.98px) {
    .tc-nav[b-bk711904un]  .tc-nav-link span {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .tc-search[b-bk711904un] {
        display: none;
    }
}

#blazor-error-ui[b-bk711904un] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-bk711904un] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* "Hetkellinen yhteyskatko" -tyylinen reconnect-modal (sama ilme kuin
   Saittipaivittaja:n app_offline.htm:ssa). Oranssi WiFi-ikonianimaatio ja
   pehmea korttimainen pohja. */

/* --- Blazor-tilojen pohjaa: piilota kaikki tila-elementit oletuksena --- */
.components-reconnect-first-attempt-visible[b-gcw1kdnpul],
.components-reconnect-repeated-attempt-visible[b-gcw1kdnpul],
.components-reconnect-failed-visible[b-gcw1kdnpul],
.components-pause-visible[b-gcw1kdnpul],
.components-resume-failed-visible[b-gcw1kdnpul] {
    display: none;
}

/* "Yhdistetään uudelleen..." whenever the dialog is open and not waiting, failed or paused. Blazor keeps the
   show class during the countdown (both lines would show) and has neither show nor retrying while a later attempt
   runs (no text at all), so the first line is chosen by what the dialog is not (MR 6.10.2026). */
#components-reconnect-modal[open]:not(.components-reconnect-retrying):not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-first-attempt-visible[b-gcw1kdnpul] {
    display: block;
}

/* Blazor lisaa yhden naista luokista <dialog>:iin: nayta vastaava teksti/painike */
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-gcw1kdnpul],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-gcw1kdnpul],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-gcw1kdnpul],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-gcw1kdnpul] {
    display: block;
}

/* --- Dialogin ulkoasu: pehmea kortti, keskitetty --- */
#components-reconnect-modal[b-gcw1kdnpul] {
    background-color: #ffffff;
    color: #2b2b2b;
    width: min(460px, calc(100vw - 32px));
    margin: 20vh auto;
    padding: 48px 40px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-gcw1kdnpul 0.5s both;
}

#components-reconnect-modal[open][b-gcw1kdnpul] {
    animation:
        components-reconnect-modal-slideUp-b-gcw1kdnpul 1.2s cubic-bezier(.05, .89, .25, 1.02) 0.2s,
        components-reconnect-modal-fadeInOpacity-b-gcw1kdnpul 0.4s ease-in-out 0.2s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-gcw1kdnpul]::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
    animation: components-reconnect-modal-fadeInOpacity-b-gcw1kdnpul 0.4s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-gcw1kdnpul {
    0% { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes components-reconnect-modal-fadeInOpacity-b-gcw1kdnpul {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-gcw1kdnpul {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Sisalto --- */
.components-reconnect-container[b-gcw1kdnpul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.reconnect-title[b-gcw1kdnpul] {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 8px 0 0;
    color: #2b2b2b;
}

#components-reconnect-modal p[b-gcw1kdnpul] {
    margin: 0;
    text-align: center;
    color: #6b7280;
    font-size: 1.02rem;
    line-height: 1.5;
}

/* --- Painikkeet: brandin oranssi --- */
#components-reconnect-modal button[b-gcw1kdnpul] {
    border: 0;
    background-color: #E8630A;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
}
#components-reconnect-modal button:hover[b-gcw1kdnpul] { background-color: #d05707; }
#components-reconnect-modal button:active[b-gcw1kdnpul] { background-color: #b84e05; }

/* --- WiFi-ikoni (sama kuin app_offline.htm:ssa) --- */
.wifi[b-gcw1kdnpul] {
    width: 92px;
    height: 74px;
    margin: 0 auto 4px;
    display: block;
}
.wifi .arc[b-gcw1kdnpul],
.wifi .dot[b-gcw1kdnpul] {
    stroke: #E8630A;
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    opacity: .15;
}
.wifi .dot[b-gcw1kdnpul] {
    fill: #E8630A;
    stroke: none;
}
.wifi .a1[b-gcw1kdnpul] { animation: wifi-sig-b-gcw1kdnpul 2.4s ease-in-out infinite; animation-delay: .15s; }
.wifi .a2[b-gcw1kdnpul] { animation: wifi-sig-b-gcw1kdnpul 2.4s ease-in-out infinite; animation-delay: .35s; }
.wifi .a3[b-gcw1kdnpul] { animation: wifi-sig-b-gcw1kdnpul 2.4s ease-in-out infinite; animation-delay: .55s; }
.wifi .dot[b-gcw1kdnpul] { animation: wifi-sig-b-gcw1kdnpul 2.4s ease-in-out infinite; animation-delay: 0s; }

@keyframes wifi-sig-b-gcw1kdnpul {
    0%   { opacity: .15; }
    25%  { opacity: 1; }
    55%  { opacity: 1; }
    62%  { opacity: .08; }
    100% { opacity: .15; }
}
/* /Components/Pages/EiPaasya.razor.rz.scp.css */
/* Kirjautumissivun tausta: AppTaikaTilaus-logo haaleana kuviona koko taustalla.
   Pseudoelementti fixed-sijoituksella, jotta kuvio pysyy paikallaan eikä vaikuta
   sisällön asetteluun. opacity vain taustalla – kortin teksti pysyy tarkkana. */
.ei-paasya[b-5ddvbol8bp] {
    position: relative;
    min-height: 100vh;
    padding: 1rem;
}

.ei-paasya[b-5ddvbol8bp]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('/apptaikatilaus-icon.png');
    /* Toistuva kuvio koko taustalle. */
    background-repeat: repeat;
    background-position: center center;
    /* Puolet aiemmasta koosta; skaalautuu edelleen näytön mukaan. */
    background-size: min(37.5vmin, 310px);
    opacity: 0.12;
    pointer-events: none;
}

/* Kortti taustakuvan päälle (::before on sijoiteltu, joten kortti tarvitsee
   oman sijoittelun pysyäkseen ylimpänä). Kevyt läpikuultavuus, jotta logo
   näkyy himmeästi myös kortin läpi. */
.ei-paasya-kortti[b-5ddvbol8bp] {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ----- Päivän kuva ----- */
.tc-paivankuva[b-t0r4xy671t] {
    max-width: 100%;
    width: 100%;
    max-height: 180px;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* ----- Sää ----- */
.tc-saa-ikoni[b-t0r4xy671t] {
    font-size: 3rem;
    line-height: 1;
    color: rgb(5, 39, 103);
}

.tc-saa-lampo[b-t0r4xy671t] {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1;
}

/* ----- Analoginen viisarikello (pelkkä CSS, ei JS:ää) ----- */
.tc-clock[b-t0r4xy671t] {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid rgb(5, 39, 103);
    background: #fff;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08);
}

.tc-tick[b-t0r4xy671t] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 6px;
    background: #c2c2c2;
    border-radius: 1px;
}

.tc-hand[b-t0r4xy671t] {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    border-radius: 3px;
}

.tc-hour[b-t0r4xy671t] {
    width: 3px;
    height: 28px;
    margin-left: -1.5px;
    background: #222;
    animation: tc-spin-b-t0r4xy671t 43200s linear infinite;
}

.tc-minute[b-t0r4xy671t] {
    width: 2px;
    height: 40px;
    margin-left: -1px;
    background: #333;
    animation: tc-spin-b-t0r4xy671t 3600s linear infinite;
}

.tc-second[b-t0r4xy671t] {
    width: 1px;
    height: 46px;
    margin-left: -0.5px;
    background: #e74c3c;
    animation: tc-spin-b-t0r4xy671t 60s linear infinite;
}

.tc-center[b-t0r4xy671t] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: rgb(5, 39, 103);
    border-radius: 50%;
}

@keyframes tc-spin-b-t0r4xy671t {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ----- Digitaalinen kello ----- */
.tc-digi[b-t0r4xy671t] {
    font-size: 2.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    color: rgb(5, 39, 103);
    line-height: 1.1;
}

/* ----- Kalenteri ----- */
.tc-cal th[b-t0r4xy671t] {
    color: #8a8a8a;
    font-weight: 600;
    font-size: 0.65rem;
    padding: 0.15rem;
}

.tc-cal td[b-t0r4xy671t] {
    width: 14.28%;
    font-size: 0.72rem;
    padding: 0.15rem;
}

    .tc-cal td.tc-today[b-t0r4xy671t] {
        background: rgb(5, 39, 103);
        color: #fff;
        font-weight: 700;
        border-radius: 6px;
    }
/* /Components/Pages/Ilmoitusmyyntiyhteenveto.razor.rz.scp.css */
/* Ilmoitusmyyntiyhteenveto: KPI tiles and CSS-only horizontal bar charts. */
.tc-imy-kpi[b-q31mnu9jcg] {
    border: 0;
    border-left: 4px solid var(--kpi, #3a6fd8);
}

.tc-imy-kpi-primary[b-q31mnu9jcg] { --kpi: #3a6fd8; }
.tc-imy-kpi-success[b-q31mnu9jcg] { --kpi: #2e9e6b; }
.tc-imy-kpi-warning[b-q31mnu9jcg] { --kpi: #e0a21b; }
.tc-imy-kpi-info[b-q31mnu9jcg] { --kpi: #7a5cd6; }

.tc-imy-kpi-kuvake[b-q31mnu9jcg] {
    font-size: 1.8rem;
    color: var(--kpi);
}

.tc-imy-kpi-arvo[b-q31mnu9jcg] {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    color: rgb(5, 39, 103);
}

.tc-imy-otsikko[b-q31mnu9jcg] {
    color: rgb(5, 39, 103);
}

.tc-imy-vieritys[b-q31mnu9jcg] {
    max-height: 26rem;
    overflow-y: auto;
}

.tc-imy-rivi[b-q31mnu9jcg] {
    display: grid;
    grid-template-columns: minmax(6rem, 40%) minmax(0, 1fr) 3rem;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tc-imy-nimi[b-q31mnu9jcg] {
    min-width: 0;
    font-size: 0.8rem;
    color: #444;
    overflow-wrap: anywhere;
}

.tc-imy-raide[b-q31mnu9jcg] {
    height: 16px;
    background: #f0f0f5;
    border-radius: 4px;
    overflow: hidden;
}

.tc-imy-taytto[b-q31mnu9jcg] {
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
    transition: width 0.3s ease;
}

.tc-imy-sininen[b-q31mnu9jcg] { background: linear-gradient(90deg, #3a6fd8 0%, rgb(5, 39, 103) 100%); }
.tc-imy-vihrea[b-q31mnu9jcg] { background: linear-gradient(90deg, #4cc38a 0%, #1f7a52 100%); }

.tc-imy-arvo[b-q31mnu9jcg] {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.tc-imy-monivalinta[b-q31mnu9jcg] {
    position: relative;
}

.tc-imy-monivalinta-nappi[b-q31mnu9jcg] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 14rem;
    text-align: left;
}

.tc-imy-monivalinta-tausta[b-q31mnu9jcg] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.tc-imy-monivalinta-paneeli[b-q31mnu9jcg] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    margin-top: 2px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* /Components/Pages/Tilausyhteenveto.razor.rz.scp.css */
/* Voimassa olevat tilaukset -vaakapylväskaavio (pelkkä CSS). */
.tc-tilausgraafi-kortti[b-phi5cur602] {
    width: fit-content;
    max-width: 100%;
}

.tc-hbar-ryhma[b-phi5cur602] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    color: rgb(5, 39, 103);
    margin: 14px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #e3e3e3;
}

    .tc-hbar-ryhma:first-child[b-phi5cur602] {
        margin-top: 0;
    }

.tc-hbar-row[b-phi5cur602] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) 4rem;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.tc-hbar-nimi[b-phi5cur602] {
    min-width: 0;
    font-size: 0.8rem;
    color: #444;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tc-hbar-track[b-phi5cur602] {
    flex: 1;
    height: 18px;
    background: #f0f0f5;
    border-radius: 4px;
    overflow: hidden;
}

.tc-hbar-fill[b-phi5cur602] {
    height: 100%;
    background: linear-gradient(90deg, #3a6fd8 0%, rgb(5, 39, 103) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}

.tc-hbar-arvo[b-phi5cur602] {
    flex: 0 0 48px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

/* Leveällä näytöllä yhteinen nimisarake mitoitetaan pisimmän nimen mukaan.
   Poikkeuksellisen pitkä nimi rivittyy, jotta myös palkille jää tilaa. */
@media (min-width: 1200px) {
    .tc-hbars[b-phi5cur602] {
        display: grid;
        grid-template-columns: fit-content(65%) minmax(0, 20rem) 4rem;
        column-gap: 10px;
    }

    .tc-hbars > h2[b-phi5cur602],
    .tc-hbars > h3[b-phi5cur602],
    .tc-hbars > h4[b-phi5cur602] {
        grid-column: 1 / -1;
    }

    .tc-hbar-row[b-phi5cur602] {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }
}

@media (max-width: 575.98px) {
    .tc-hbar-row[b-phi5cur602] {
        grid-template-columns: minmax(0, 1fr) 4rem;
        margin-bottom: 12px;
    }

    .tc-hbar-nimi[b-phi5cur602] {
        grid-column: 1 / -1;
    }
}
/* /Components/Shared/HistoriaBadge.razor.rz.scp.css */
/* Sama perustyyli kuin MainLayoutin .tc-icon — määritelty tässä, koska
   MainLayoutin scoped CSS ei ulotu komponenttiin. */
.hist-ikoni[b-lie7kqded8] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    border: none;
    background: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .hist-ikoni:hover[b-lie7kqded8] {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
    }
/* /Components/Shared/KerailylistaBadge.razor.rz.scp.css */
/* Sama perustyyli kuin MainLayoutin .tc-icon, mutta isompana —
   määritelty tässä, koska MainLayoutin scoped CSS ei ulotu komponenttiin. */
.kerailylista-ikoni[b-3ev5t9nr6l] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .kerailylista-ikoni:hover[b-3ev5t9nr6l] {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.12);
    }

/* Lukumäärämerkki kuvakkeen oikeassa yläkulmassa. */
.kerailylista-merkki[b-3ev5t9nr6l] {
    top: 0;
    right: 0;
    font-size: 0.65rem;
    padding: 0.25em 0.45em;
    line-height: 1;
}
/* /Components/Shared/Ristinolla.razor.rz.scp.css */
/* Ristinollan ulkoasu noudattaa alkuperäisen WinForms-ikkunan värejä. */
.rn-peli[b-it9ymvn7zz] {
    max-width: 26rem;
}

.rn-tila[b-it9ymvn7zz] {
    background: #244a77;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 0.6rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.rn-ohje[b-it9ymvn7zz] {
    background: #fff8db;
    color: #5c4600;
    text-align: center;
    font-size: 0.875rem;
    padding: 0.4rem;
}

.rn-voitot[b-it9ymvn7zz] {
    background: #dcedff;
    color: #19375a;
    text-align: center;
    font-size: 0.875rem;
    padding: 0.4rem;
}

.rn-viesti[b-it9ymvn7zz] {
    text-align: center;
    font-size: 0.875rem;
    color: #495057;
    padding: 0.4rem 0;
}

.rn-ruudukko[b-it9ymvn7zz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: #b0c7e6;
    padding: 6px;
    border-radius: 0 0 0.5rem 0.5rem;
}

.rn-ruutu[b-it9ymvn7zz] {
    aspect-ratio: 1;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    background: #fafcff;
    color: #202e46;
    border: 1px solid #7e9bc3;
    border-radius: 0.25rem;
}

    /* Vapaa ruutu korostuu hiiren alla; varattu ja päättynyt peli ei. */
    .rn-ruutu:not(:disabled):hover[b-it9ymvn7zz] {
        background: #ebf4ff;
    }

    .rn-ruutu:disabled[b-it9ymvn7zz] {
        opacity: 1;
    }

.rn-x[b-it9ymvn7zz] {
    background: #ffdda0;
    color: #874d00;
}

.rn-o[b-it9ymvn7zz] {
    background: #b5e5d6;
    color: #005c59;
}

/* Voittorivi vilkkuu punaisena, kuten alkuperäisessä pelissä. */
.rn-voitto[b-it9ymvn7zz] {
    color: #fff;
    animation: rn-vilkku-b-it9ymvn7zz 0.5s steps(1) 6;
    background: #ff5555;
}

@keyframes rn-vilkku-b-it9ymvn7zz {
    0%, 49% { background: #ff5555; color: #fff; }
    50%, 100% { background: #fafcff; color: #202e46; }
}

@media (prefers-reduced-motion: reduce) {
    .rn-voitto[b-it9ymvn7zz] {
        animation: none;
    }
}