/*
 * Staand groot scherm (75" Newline op een vloerstandaard: bovenrand ≈ 2 m, onderrand ≈ 0,4 m).
 * Alleen html.si-scherm in staande stand op een beeldscherm: de liggende touchscreen-tv, telefoon, tablet
 * en de afdruk blijven zoals ze waren.
 *
 * Reikzone: alles wat je aantikt staat tussen ~30% en ~82% van de hoogte (≈ 1,5 m tot 0,7 m).
 * Bovenin alleen wat je leest (logo, titel, resultaat).
 * - Bedieningsbalk: Terug links, Uitloggen rechts (en per pagina Instellingen/Beheer/Metingen), op 76-81%.
 * - Foto en meetpunten (Vormpunten): knoppenkolom aan de rechterrand rond 57%, net als de Vormscan AI (scan.css).
 */
@media screen and (orientation: portrait) {

html.si-scherm {
    --zs-knop: 96px;                 /* hoogte van elke knop in de balk */
    --zs-balk: 19vh;                 /* afstand van de balk tot de onderrand */
    --zs-rand: 40px;                 /* zijmarge */
    --zs-glas: rgba(255, 255, 255, 0.12);
    --zs-glas-aan: rgba(255, 255, 255, 0.24);
    --zs-lijn: rgba(255, 255, 255, 0.14);
    --zs-boven: 24vh;                /* begin van de inhoud onder het logo */
    --zs-onder: calc(var(--zs-balk) + var(--zs-knop) + 28px); /* einde van de inhoud boven de balk */
}

/* ---------- Bedieningsbalk ---------- */
/* Terug, Uitloggen, Instellingen, Beheer en Metingen worden grote knoppen met tekst. De bestaande elementen en
   hun onclick blijven; alleen plek en vorm veranderen. Foto en meetpunten hebben een eigen kolom (onderaan). */
html.si-scherm body:not(:has(.step01, .step02)) .back,
html.si-scherm body:not(:has(.step01, .step02)) .logout,
html.si-scherm .si-inst-terug,
html.si-scherm .home ~ a[aria-label],
html.si-scherm #admin-btn,
html.si-scherm .step04 > #capture,
html.si-scherm .step04 > #capture2 {
    position: fixed !important;
    top: auto !important;
    bottom: var(--zs-balk) !important;
    z-index: 30;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto !important;
    height: var(--zs-knop) !important;
    min-width: var(--zs-knop);
    margin: 0 !important;
    padding: 0 34px 0 30px !important;
    border-radius: calc(var(--zs-knop) / 2) !important;
    background: var(--zs-glas) !important;
    color: #fff !important;
    font-size: 34px !important;
    line-height: 1 !important;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .15s ease;
}
html.si-scherm body:not(:has(.step01, .step02)) .back:active,
html.si-scherm body:not(:has(.step01, .step02)) .logout:active,
html.si-scherm .si-inst-terug:active,
html.si-scherm .home ~ a[aria-label]:active,
html.si-scherm #admin-btn:active,
html.si-scherm .step04 > #capture:active,
html.si-scherm .step04 > #capture2:active {
    background: var(--zs-glas-aan) !important;
    transform: scale(.97);
}
/* Tekst naast het icoon (in de letter van de site, niet in die van de iconen). */
html.si-scherm body:not(:has(.step01, .step02)) .back::after,
html.si-scherm body:not(:has(.step01, .step02)) .logout::after,
html.si-scherm .si-inst-terug::after,
html.si-scherm .home ~ a[aria-label]::after,
html.si-scherm #admin-btn::after,
html.si-scherm .step04 > #capture::after,
html.si-scherm .step04 > #capture2::after {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: .01em;
}
html.si-scherm body:not(:has(.step01, .step02)) .back::after,
html.si-scherm .si-inst-terug::after { content: "Terug"; }
html.si-scherm body:not(:has(.step01, .step02)) .logout::after { content: "Uitloggen"; }
html.si-scherm .home ~ a[aria-label]::after,
html.si-scherm #admin-btn::after,
html.si-scherm .step04 > #capture::after,
html.si-scherm .step04 > #capture2::after { content: attr(aria-label); }

html.si-scherm body:not(:has(.step01, .step02)) .back,
html.si-scherm .si-inst-terug { left: var(--zs-rand) !important; right: auto !important; }
html.si-scherm body:not(:has(.step01, .step02)) .logout { right: var(--zs-rand) !important; left: auto !important; }
/* Home: Instellingen en Beheer links, Uitloggen rechts. */
html.si-scherm .home ~ a[aria-label="Instellingen"] { left: var(--zs-rand) !important; right: auto !important; }
html.si-scherm .home ~ a[aria-label="Beheer"] { left: calc(var(--zs-rand) + 360px) !important; right: auto !important; }
/* Formulier: "Metingen" in het midden. */
html.si-scherm #admin-btn { left: 50% !important; transform: translateX(-50%); }
html.si-scherm #admin-btn:active { transform: translateX(-50%) scale(.97); }
/* Home heeft een eigen uitlogicoon op dezelfde plek: dat van de layout weg (anders twee knoppen over elkaar). */
html.si-scherm body:has(.home) a.dropdown-item > .logout { display: none !important; }
/* De lege link rond het uitlogicoon van de layout neemt geen ruimte. */
html.si-scherm a.dropdown-item:has(> .logout) { position: static; padding: 0; width: 0; height: 0; }

/* ---------- Logo bovenin op pagina's met bediening ---------- */
/* Lijst, formulier, instellingen en inloggen: het logo bovenin (te hoog om aan te tikken, wel goed te lezen),
   zodat de reikzone vrij is voor de bediening. */
html.si-scherm body:has(.si-lijst, .step03, .si-inst, .login) .footer {
    top: 4vh;
    bottom: auto;
    font-size: 1em;
}
html.si-scherm body:has(.si-lijst, .step03, .si-inst, .login) .footer .text {
    font-size: 28px;
    margin-top: 12px;
}

/* ---------- Home ---------- */
html.si-scherm .home .header-text {
    top: 13vh;
    margin-top: 0 !important;
    font-size: 64px;
}
html.si-scherm .home [ckass="container"] {
    max-width: 96% !important;
    margin-top: 28vh !important;
}
html.si-scherm .home .container {
    height: auto !important;
    margin-top: 7vh !important;
}
/* Start: groot, in het groen van het logo (zoals "Start de meting"), donkere tekst. */
html.si-scherm #gegevens-aanmaken-btn {
    background-color: #b7c335 !important;
    color: #14161e !important;
    min-width: 520px;
    min-height: 128px;
    padding: 0 96px !important;
    border-radius: 64px !important;
    font-size: 48px;
    letter-spacing: .02em;
}

/* ---------- Metingen (lijst) ---------- */
html.si-scherm .si-lijst {
    margin: 0;
}
html.si-scherm .si-lijst > .col-12 {
    position: fixed;
    top: var(--zs-boven);
    bottom: var(--zs-onder);
    left: var(--zs-rand);
    right: var(--zs-rand);
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
html.si-scherm .si-lijst-titel {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
}
html.si-scherm .si-lijst-titel span {
    font-size: 26px;
    font-weight: 500;
    opacity: .65;
}
/* Zoeken en Nieuw op één rij. */
html.si-scherm .si-lijst form {
    display: flex;
    gap: 16px;
    margin: 0;
}
html.si-scherm .si-lijst form .input-group {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
    height: 88px;
    flex-wrap: nowrap;
}
html.si-scherm .si-lijst form .input-group > * {
    height: 88px;
}
html.si-scherm .si-lijst form .input-group-text {
    padding: 0 28px;
    font-size: 30px;
}
html.si-scherm .si-lijst form .input-group-text:first-child { border-radius: 44px 0 0 44px !important; }
html.si-scherm .si-lijst form .input-group-text:last-child { border-radius: 0 44px 44px 0 !important; min-width: 96px; justify-content: center; cursor: pointer; }
html.si-scherm .si-lijst form input {
    font-size: 30px;
    padding: 0 12px;
}
html.si-scherm .si-lijst-nieuw {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 88px;
    padding: 0 40px;
    border-radius: 44px;
    background: var(--si-accent, #19a79f);
    color: #00211f;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
html.si-scherm .si-lijst-nieuw:active { filter: brightness(1.1); }
/* Oude paginering (rij met cijfers) weg; de grote paginering staat onder de lijst. */
html.si-scherm .si-pagina-oud { display: none; }

html.si-scherm .si-lijst .lists {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
html.si-scherm .si-lijst .listitem {
    position: relative;
    width: auto;
    margin: 0;
    float: none;
    border: 1px solid var(--zs-lijn);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06) !important;
    transition: background-color .15s ease;
}
html.si-scherm .si-lijst .listitem:has(.si-kaart-link:active) {
    background: rgba(255, 255, 255, 0.13) !important;
}
html.si-scherm .si-lijst .listitem .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 22px;
    text-align: left !important;
}
/* Hele kaart klikbaar (bekijken); de actieknoppen liggen erboven. */
html.si-scherm .si-kaart-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
html.si-scherm .si-kaart-naam {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 30px;
}
html.si-scherm .si-kaart-naam .card-title {
    font-size: 30px;
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
html.si-scherm .si-kaart-pijl {
    display: inline-block;
    font-size: 24px;
    opacity: .55;
    color: #fff;
}
html.si-scherm .si-kaart-meta {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
}
html.si-scherm .si-lijst .si-acties {
    position: relative;
    z-index: 2;
    margin: 0;
    gap: 12px;
}
html.si-scherm .si-lijst .si-acties .btn {
    flex: 1 1 0;
    max-width: none;
    aspect-ratio: auto;
    height: 76px;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
    border: 0 !important;
    border-radius: 16px;
    background: var(--zs-glas) !important;
    color: #fff !important;
    font-size: 26px;
}
html.si-scherm .si-lijst .si-acties .btn:active { background: var(--zs-glas-aan) !important; }
html.si-scherm .si-lijst .si-acties .si-label {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
}
/* Bekijken = de kaart zelf. */
html.si-scherm .si-lijst .si-acties .si-actie-bekijken { display: none; }
html.si-scherm .si-lijst .si-acties .si-actie-advies i { color: var(--si-accent, #19a79f); }
html.si-scherm .si-lijst .si-acties .btn-danger i { color: #ff8f86; }
html.si-scherm .si-lijst-leeg {
    display: block;
    margin: 40px 0 0;
    text-align: center;
    font-size: 30px;
    opacity: .75;
}

/* Paginering: Vorige | Pagina 3 van 15 | Volgende */
html.si-scherm .si-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px;
    border-radius: 52px;
    background: rgba(255, 255, 255, 0.05);
}
html.si-scherm .si-pagina-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 260px;
    height: 88px;
    padding: 0 32px;
    border-radius: 44px;
    background: #fff;
    color: #000e2a;
    font-size: 28px;
    font-weight: 600;
    text-decoration: none;
}
html.si-scherm a.si-pagina-knop:active { background: rgba(255, 255, 255, 0.85); }
html.si-scherm .si-pagina-knop.is-uit { background: transparent; color: #fff; opacity: .3; }
html.si-scherm .si-pagina-stand {
    color: #fff;
    font-size: 28px;
    white-space: nowrap;
}

/* ---------- Gegevens (formulier) ---------- */
html.si-scherm .step03 .container {
    height: auto !important;
    padding-top: var(--zs-boven);
}
html.si-scherm .step03 .card-title {
    margin-top: 0 !important;
    margin-bottom: 24px;
    font-size: 40px;
    font-weight: 700;
}
html.si-scherm .step03 .card-text { display: none; } /* geen introtekst */
html.si-scherm .step03 form { margin-top: 0; }
html.si-scherm .step03 .input-group { margin-bottom: 18px !important; }
html.si-scherm .step03 .input-group > * {
    height: 92px;
    font-size: 32px;
}
html.si-scherm .step03 .input-group-text {
    min-width: 92px;
    justify-content: center;
    font-size: 30px;
}
html.si-scherm .step03 #confirmPictureButton {
    min-height: 112px;
    margin-top: 32px;
    border-radius: 56px !important;
    font-size: 36px;
    font-weight: 700;
}

/* ---------- Resultaat en advies ---------- */
html.si-scherm .step04 .info h1 {
    margin-top: 40px;
    font-size: 64px;
}
html.si-scherm .step04 .info h1 .card-title { font-size: 64px; }
html.si-scherm .step04 .info > div:not(.resultsfade) > table {
    width: min(820px, 80%) !important;
    font-size: 36px;
}
html.si-scherm .step04 .info table td { padding: 4px 0; }
html.si-scherm .step04 .pie { margin-top: 64px; }
/* Advies (graph en scherm-resultaat) */
html.si-scherm .step04 .resultsfade > p { font-size: 30px; margin-top: 24px; }
html.si-scherm .step04 .resultsfade img[src*="slaapvormfoto"] { height: 380px !important; }
html.si-scherm .step04 .resultsfade table { font-size: 34px; }
html.si-scherm .step04 .resultsfade .c-progress-bar {
    width: 100%;
    height: 26px;
    margin-bottom: 18px !important;
}
html.si-scherm .step04 .contentheader .header-text { font-size: 56px; }
/* Opslaan en Afdrukken (scherm-resultaat): een rij boven de balk, in het midden. */
html.si-scherm .step04 > #capture,
html.si-scherm .step04 > #capture2 {
    bottom: calc(var(--zs-balk) + var(--zs-knop) + 24px) !important;
}
html.si-scherm .step04 > #capture { left: auto !important; right: calc(50% + 12px) !important; background: var(--si-accent, #19a79f) !important; color: #00211f !important; }
html.si-scherm .step04 > #capture2 { left: calc(50% + 12px) !important; }

/* ---------- Inloggen ---------- */
html.si-scherm body:has(.login) .header-text {
    top: 23vh;
    font-size: 52px;
}
html.si-scherm .login .card {
    top: 54%;
    width: min(760px, 86vw) !important;
    border-radius: 28px;
}
html.si-scherm .login .card-body { padding: 36px; }
html.si-scherm .login .input-group { margin-bottom: 20px !important; }
html.si-scherm .login .input-group > * {
    height: 92px;
    font-size: 32px;
}
html.si-scherm .login .input-group-text {
    min-width: 92px;
    justify-content: center;
}
html.si-scherm .login .btn {
    min-height: 100px;
    border-radius: 50px !important;
    font-size: 36px;
    font-weight: 700;
}
html.si-scherm .login .card p.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px !important;
    font-size: 26px !important;
}
html.si-scherm .login .card p a.forgot-password {
    color: rgba(255, 255, 255, 0.8) !important;
}
html.si-scherm .login .forgot-password {
    display: inline-flex;
    align-items: center;
    min-height: 72px;
    padding: 0 20px;
}

/* ---------- Instellingen ---------- */
html.si-scherm .si-inst {
    top: var(--zs-boven);
    bottom: var(--zs-onder);
    max-width: 960px;
    padding: 0 0 40px !important;
}
html.si-scherm .si-inst h1 { font-size: 44px; margin-bottom: 24px; }
html.si-scherm .si-inst .si-uitleg { display: none; } /* geen introtekst */
html.si-scherm .si-inst h2 { font-size: 32px; margin-bottom: 18px; }
html.si-scherm .si-inst .si-keuzes { gap: 16px; }
html.si-scherm .si-inst .si-keuze {
    min-height: 112px;
    padding: 26px 30px;
    align-items: center;
}
html.si-scherm .si-inst .si-keuze .si-rondje { flex-basis: 34px; height: 34px; margin-top: 0; }
html.si-scherm .si-inst .si-keuze strong { font-size: 32px; }
html.si-scherm .si-inst .si-keuze span.si-tekst { font-size: 24px; }
html.si-scherm .si-inst .si-melding { font-size: 26px; }
html.si-scherm .si-inst .si-weergave { margin: 0 0 28px; font-size: 26px; }
html.si-scherm .si-inst .si-weergave button { min-height: 72px; padding: 0 28px; }
/* Terug staat in de balk (si-inst-terug uit toetsenbord.js); de knop onderaan het scrollvlak is dubbel. */
html.si-scherm .si-inst .si-terug { display: none; }

/* ---------- Foto en meetpunten (Vormpunten) ---------- */
/* Knoppenkolom aan de rechterrand, midden rond 57% (zoals .si-kolom van de Vormscan AI). photo.js en points.js
   tonen en verbergen de knoppen met style.display; hier alleen plek, maat en tekst. In de Vormscan AI (si-nieuw,
   si-controle) blijft alles van scan.css. */
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2, #removePicture, #switchCamera, #aspectRatioBtn),
html.si-scherm body:not(.si-controle) .step02 #capture,
html.si-scherm body:not(.si-nieuw) .step01 ~ .back,
html.si-scherm body:not(.si-controle) .step02 ~ .back {
    position: fixed !important;
    left: auto !important;
    right: 2.2vh !important;
    width: max(280px, 14.6vh) !important;
    height: max(96px, 5vh) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    z-index: 30;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 48px !important;
    font-size: 32px !important;
    line-height: max(96px, 5vh);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2, #removePicture, #switchCamera, #aspectRatioBtn) i,
html.si-scherm body:not(.si-controle) .step02 #capture i {
    margin-right: 10px;
}
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2, #removePicture, #switchCamera, #aspectRatioBtn)::after,
html.si-scherm body:not(.si-controle) .step02 #capture::after,
html.si-scherm body:not(.si-nieuw) .step01 ~ .back::after,
html.si-scherm body:not(.si-controle) .step02 ~ .back::after {
    content: attr(aria-label);
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 24px;
    vertical-align: middle;
}
html.si-scherm body:not(.si-nieuw) .step01 ~ .back::after,
html.si-scherm body:not(.si-controle) .step02 ~ .back::after {
    content: "Terug";
    margin-left: 12px;
}
html.si-scherm body:not(.si-nieuw) .step01 ~ .back,
html.si-scherm body:not(.si-controle) .step02 ~ .back {
    top: auto !important;
    background: rgba(0, 14, 42, 0.78);
    color: #fff;
}
/* Volgorde in de kolom (boven naar onder): Gebruik foto, Foto maken/Opnieuw, Andere camera, Verhouding, Terug. */
html.si-scherm body:not(.si-nieuw) .step01 #capture2 { top: calc(57% - 216px) !important; }
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #removePicture) { top: calc(57% - 104px) !important; }
html.si-scherm body:not(.si-nieuw) .step01 #switchCamera { top: calc(57% + 8px) !important; }
html.si-scherm body:not(.si-nieuw) .step01 #aspectRatioBtn { top: calc(57% + 120px) !important; }
html.si-scherm body:not(.si-nieuw) .step01 ~ .back { bottom: calc(43% - 328px) !important; }
html.si-scherm body:not(.si-nieuw) .step01 #aspectPanel {
    position: fixed;
    left: auto;
    right: calc(2.2vh + max(280px, 14.6vh) + 20px);
    top: calc(57% + 40px);
    width: 360px;
    font-size: 24px;
    z-index: 30;
}
/* Meetpunten: Bevestigen in het midden van de kolom, Terug eronder. */
html.si-scherm body:not(.si-controle) .step02 #capture { top: calc(57% - 104px) !important; }
html.si-scherm body:not(.si-controle) .step02 ~ .back { bottom: calc(43% - 104px) !important; }
/* Hoofdactie (Foto maken, Gebruik foto, Bevestigen) in de winkelkleur. */
html.si-scherm body:not(.si-nieuw) .step01 :is(#capture, #capture2),
html.si-scherm body:not(.si-controle) .step02 #capture {
    background: var(--si-accent, #19a79f) !important;
    color: #00211f !important;
}
html.si-scherm body:not(.si-nieuw) .step01 #capture2.disabled { opacity: .4; }
/* Overige knoppen wit met donkere tekst. */
html.si-scherm body:not(.si-nieuw) .step01 :is(#removePicture, #switchCamera, #aspectRatioBtn) {
    background: #fff !important;
    color: #000e2a !important;
}

}

/* Verborgen zoekknop neemt geen plek in de zoekrij. */
html.si-scherm .si-lijst #submitBtn { position: absolute; width: 0; padding: 0; border: 0; }