@media screen and (max-width: 600px) {

    body {
        font-size: 16px;
    }

    p {
        font-size: inherit;
    }

    h1 {
        font-size: 1.5em;
    }

    h1.error {
        white-space: normal;
        font-size: 2em;
    }

    label {
        font-size: 18px;
        white-space: nowrap;
    }

    input {
        font-size: 20px;
        padding: 10px 0;
    }

    textarea {
        font-size: 20px;
    }

    .select-css {
        padding: 10px 8px;
        font-size: 20px;
        background-size: 20px;
    }

    .close {
        font-size: 48px;
    }

    .topnav {
        width: auto;
    }

    .topnav a:not(:first-child), .dropdown .dropbtn {
  /*      display: none;*/
    }

    .topnav a.icon {
        float: right;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .username {
        display: none;
    }

    .avatar {
        margin-right: 50px;
    }



    th.rotate > div > span {
        padding: 0;
        font-size: 12px;
        white-space: pre-wrap;
    }

    .navbar.responsive {
        position: relative;
        background: #444444;

    }

    .navbar.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    a.icon:hover {
        border: none;
        color: whitesmoke;
    }

    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left;
        font-size: 26px;
        color: whitesmoke;
    }

    .topnav.responsive .dropdown {
        float: none;
    }

    .topnav.responsive .dropdown-content {
        position: relative;
    }

    .dropdown-content {
        margin-top: 0;
        position: relative;
        background: #888888;
    }

    .usermenuresponsive {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
    }

    .navbar.responsive {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 26px;
    }

    .menyicon {
        background: no-repeat url('/img/inverio-logo-tekst.png');
        background-size: contain;
        width: 217px;
    }

    ul.navbar {
        display: none;
    }

    div.navbuttons {
        width: 100%;
    }

    .navbuttons {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }

    .navbuttons button {
        width: 100%;
        margin: 0 0 6px;
    }

    /* Rekkefølgen i HTML-en avgjør venstre/høyre-plassering på desktop (bevisst valg fra
       tidligere UX-diskusjon - f.eks. Slett til venstre, Lagre til høyre i
       UnderskjemaFrm.php) og arves derfor direkte inn som topp/bunn i den vertikale
       mobilstabelen med mindre den overstyres her. Topp/bunn i en fullbredde-liste har ikke
       nødvendigvis samme UX-logikk som venstre/høyre i en knapperad - her flyttes derfor
       Lagre øverst og Slett nederst KUN på mobil, uten å røre HTML-kildekoden eller
       desktop-layouten (order:0 er standard for alle andre knapper, uendret). */
    .navbuttons li:has(button[data-handling='lagre']) {
        order: -1;
    }

    .navbuttons li:has(button.btnSlett) {
        order: 1;
    }

    div.table-col-25, div.table-col-40, div.table-col-50, div.table-col-60, div.table-col-75 {
        width: 100%;
        margin-top: 5px;
        text-align:left;
    }

    .responsiveOnly {
        display: block !important;
    }

    th.responsiveOnly , td.responsiveOnly  {
        display: table-cell !important;
    }

    /* !important nødvendig av samme grunn som .respHidden lenger ned - taper ellers mot den
       mer spesifikke table.respStack tbody tr.respExpanded td.kontrollskjema{display:block}
       når feltet er inni et respStack-kort som utvides. */
    .respMobileHidden {
        display: none !important;
    }

}
@media screen and (max-width: 800px) {

    .modal {
        width: 100% !important;
        left: 0 !important;
        transform: none;
    }

    .modal-content {
        width: 100% !important;
        padding: 5px;
        border-radius: 10px;
    }

    .hovedskjema {
        max-width: 98vw;
        padding: 8px;
        border-radius: 10px;
    }

    .respOverflow {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .respOverflow:hover {
        overflow: visible;
        white-space: normal;
    }

    /* !important nødvendig: uten den taper display:none her mot den mer spesifikke
       table.respStack tbody tr.respExpanded td.kontrollskjema{display:block} (0,0,3,4 vs
       0,0,1,0) - et respHidden-felt (f.eks. Egenkontroll) ble dermed likevel synlig så snart
       kortet ble utvidet, uansett skjermbredde. Spesifisitet avgjør uavhengig av
       kildekode-rekkefølge og medieforespørsel, så høyere spesifisitet alene (uten
       !important) ville ikke vært nok siden begge reglene kan være aktive samtidig
       (600-800px). Meldt av bruker 2026-08-21 (HovedskjemaFrm.php sin Egenkontroll-kolonne),
       men gjelder generelt for respHidden i alle respStack-tabeller. */
    .respHidden {
        display: none !important;
    }

    /*

        Underskjema-tabeller: hver rad blir et kort med kolonnenavn som label i stedet for
       en sammenpresset tabellrad. Aktiveres pr. tabell med klassen "respStack" -
       se TVKameraFrm.php for eksempel. Legg samme klasse til flere moduler etter hvert.

       */

    table.respStack,
    table.respStack tbody {
        display: block;
        width: 100%;
        float:left;
        clear:left;
    }

    /* Modulfilene pakker respStack-tabellen i en <div style='float:left'> uten egen
       bredde (samme mønster i alle underskjema-moduler) - en float:left-boks med
       width:auto beregner egen bredde via shrink-to-fit basert på INNHOLDETS naturlige
       størrelse, og en width:100%-child (tabellen) bidrar ikke pålitelig til den
       beregningen. Resultat: kortene ble smalere enn tilgjengelig bredde (målt 208px av
       400px tilgjengelig i modalen), meldt av bruker 2026-08-23. :has() er allerede brukt
       andre steder i denne filen (avvik-fargelagt kant) - samme nettleserstøtte
       forutsettes her. Generell fiks (ikke per modulfil) - enhver div som direkte pakker
       inn en respStack-tabell skal alltid være full bredde, per design. */
    div:has(> table.respStack) {
        width: 100%;
    }

    table.respStack thead {
        display: none;
    }

    table.respStack tbody tr {
        display: block;
        position: relative;
        /*background: #fff;*/
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px 40px 8px 10px;
        margin-bottom: 10px;
        min-height: 70px;
        cursor: pointer;
    }

    table.respStack tbody tr:has(td.kontrollskjemafeil .feil) {
        border: 4px solid var(--avvik-feil-bg);
    }

    table.respStack tbody tr:has(td.kontrollskjemafeil .info):not(:has(td.kontrollskjemafeil .feil)) {
        border: 4px solid var(--avvik-info-bg);
    }

    table.respStack tbody tr:has(td.kontrollskjemafeil .utbedret):not(:has(td.kontrollskjemafeil .feil)):not(:has(td.kontrollskjemafeil .info)) {
        border: 4px solid var(--avvik-ok-bg);
    }

    table.respStack tbody tr > td:first-child {
        display: none;
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 0;
        border: none;
    }

    table.respStack td.kontrollskjema,
    table.respStack td.kontrollskjemafeil {
        display: none;
        border: none;
        padding: 6px 2px;
    }

    table.respStack tbody tr > td.respSummary {
        display: block;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjema,
    table.respStack tbody tr.respExpanded td.kontrollskjemafeil {
        display: block;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjema:empty,
    table.respStack tbody tr.respExpanded td.kontrollskjemafeil:empty {
        display: none;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjemafeil {
        text-align: left;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjemafeil .input-container {
        display: inline-block;
        float: none;
        margin: 0;
        padding: 15px;
        vertical-align: middle;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjemafeil a {
        float: none !important;
        display: inline-block;
        vertical-align: middle;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjemafeil .checkmark {
        width: 30px;
        height: 30px;
    }

    table.respStack tbody tr.respExpanded td.kontrollskjemafeil .checkmark-ok:after,
    table.respStack tbody tr.respExpanded td.kontrollskjemafeil .checkmark-feil:after,
    table.respStack tbody tr.respExpanded td.kontrollskjemafeil .checkmark-ikkeaktuell:after {
        left: 8px;
        top: -2px;
        width: 8px;
        height: 18px;
        border-width: 0 4px 4px 0;
    }

    /* Gruppe-overskriftsrader (skiller kontrollpunkter i grupper, kun én <td colspan>,
       ikke et redigerbart kort) - nullstiller kort-stylingen fra regelen over og holdes
       utenfor kollaps/utvid-mekanismen (se også egen unntak i klikk-håndteren i
       inverio-jqeventcatcher.js). */
    table.respStack tbody tr.respStackGroupHeader {
        display: block;
        position: static;
        border: none;
        border-radius: 0;
        padding: 12px 4px 4px;
        margin-bottom: 4px;
        cursor: default;
    }

    table.respStack tbody tr.respStackGroupHeader::after {
        display: none;
    }

    table.respStack tbody tr.respStackGroupHeader > td:first-child {
        display: block;
        position: static;
    }

    /* Pil som viser at kortet kan utvides  */
    table.respStack tbody tr::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 25px;
        width: 25px;
        height: 25px;
        background-image: url('../img/down-arrow.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: transform 0.15s ease;
        pointer-events: none;
    }

    table.respStack tbody tr.respExpanded::after {
        transform: rotate(180deg);
    }

    table.respStack td.kontrollskjema::before,
    table.respStack td.kontrollskjemafeil::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.85em;
        color: #666;
        margin-bottom: 2px;
    }

    table.respStack td.kontrollskjema input,
    table.respStack td.kontrollskjema select {
        width: 100% !important;
    }

    /* Sammendragsfeltet (td.respSummary): når cellen inneholder et ekte <input>/<select>
       (f.eks. Kamera i TVKameraFrm.php - rene tekstceller som "Kontrollpunkt" i
       TekniskUnderskjemaFrm.php har ingen input og påvirkes ikke av disse to reglene),
       skjules selve feltet helt mens kortet er kollapset, i stedet for kun å stylast til å
       se tekst-aktig ut. "pointer-events: none" viste seg IKKE å være pålitelig for å hindre
       fokus/mobiltastatur ved trykk på enkelte mobilnettlesere - feltet var fortsatt reelt
       fokuserbart selv om det ikke skulle reagere på klikk. "display: none" fjerner det helt
       fra layout/hit-testing, så det kan aldri motta fokus i kollapset tilstand. Verdien vises
       i stedet via ren CSS (::after under, leser "data-value"-attributtet) - ingen ekte
       DOM-node, umulig å trykke seg inn i. Selve input-verdien/navnet er upåvirket og sendes
       fortsatt inn normalt ved lagring (kun skjult, ikke "disabled"). Klikk hvor som helst på
       kortet faller nå naturlig gjennom til raden og utvider den. Klikkhåndleren i
       inverio-jqeventcatcher.js synker "data-value" med feltets gjeldende verdi rett før
       kortet kollapses igjen, slik at man ikke ser en utdatert verdi etter en redigering. */
    table.respStack tbody tr:not(.respExpanded) > td.respSummary input,
    table.respStack tbody tr:not(.respExpanded) > td.respSummary select {
        display: none;
    }

    table.respStack tbody tr:not(.respExpanded) > td.respSummary::after {
        content: attr(data-value);
    }

    /* respStack-forsøk på HovedskjemaFrm.php sin hovedtabell (#hovedskjemaKontrollTabell).
       Skiller seg fra underskjema-tabellene på to punkter:

       1) Ingen egen slett-knapp-kolonne - kontrollpunktene er faste sjekklistepunkter styrt
          av kontrollTypeDefinisjoner.inc.php, ikke rader man sletter enkeltvis slik som i
          underskjema-tabellene (slette-funksjonen for kontrollpunkt ligger i stedet bak en
          egen "Fjern kontrollpunkt"-modus som injiserer en knapp i Kontrollpunkt-cellen via
          JS). Kontrollpunkt er dermed selve :first-child, ikke en disponibel slett-knapp -
          nullstiller "flytt til hjørne"-posisjoneringen fra generell-regelen over (som
          forutsetter en slett-knapp der). Høyere spesifisitet via tabellens id garanterer at
          dette vinner uansett kildekode-rekkefølge. display:block-delen trengs ikke eksplisitt
          her (.respSummary vinner allerede over generell-regelen på uavgjort spesifisitet pga.
          kildekode-rekkefølge - se over), kun position. */
    #hovedskjemaKontrollTabell.respStack tbody tr > td:first-child {
        position: static;
    }

    /* 2) OK/I.A./Avvik er tre separate celler (radioknapp-gruppe), ikke én kombinert celle
          fra sjekkAvvik() slik underskjema-tabellene bruker. Alle tre gjenbruker likevel
          samme .input-container/.checkmark-komponenter og får derfor kontrollskjemafeil-
          klassen for gratis gjenbruk av kollaps/utvid, avvik-fargelegging på kortet
          (:has(td.kontrollskjemafeil a.feil) osv. - treffer uansett hvilken av de tre
          cellene badgen ligger i) og forstørret berøringsflate. Ett strukturelt avvik fra
          sjekkAvvik(): tallbadgene (utbedret/info/feil-antall) er her pakket inn i en egen
          <div style='position:absolute;left:25px;...'> (beregnet for smal desktop-celle) i
          stedet for å ligge direkte i <label> slik sjekkAvvik() gjør - generell-regelen for
          badge-<a>-er (float:none) treffer uansett (descendant-selector, uavhengig av
          mellomliggende div), men selve div-en må nullstilles til normal flyt her. Ingen
          .checkmark/.input-container-avvik fra pilotene - komponentene er identiske.

          Første forsøk (position:static + inline-block) ga fortsatt overlapp: både
          .checkmark og denne div-en er posisjonert med position:absolute relativt til
          SAMME .input-container (position:relative, input.css linje 221-254) - en
          absolutt-posisjonert div havner ikke automatisk "ved siden av" et annet absolutt-
          posisjonert element bare fordi den gjøres om til inline-block, siden begge uansett
          er tatt ut av normal flyt og ligger oppå hverandre fra samme (0,0)-origo (label sin
          padding-boks). sjekkAvvik() (underskjema) unngår dette ved at badge-<a>-ene ligger
          som SØSKEN til <label> (rett i td-en, etter at </label> er lukket) - her ligger
          div-en derimot fortsatt inni <label>. Løsning: behold position:absolute (som
          allerede satt inline av PHP-en for et 20x20 desktop-checkmark), men flytt
          ankerpunktet ut forbi det forstørrede 30x30 checkmark-et (var left:25px/top:0,
          tunet for 20px - samme 5px klaring bevart: 30+5=35px). */
    table.respStack tbody tr.respExpanded td.kontrollskjemafeil .input-container > div {
        left: 35px !important;
        top: 4px !important;
    }

    /* 3) OK/I.A./Avvik som én flex-rad i stedet for tre stablede fullbredde-felt. Raden
       (<tr>) er ellers alltid display:block for et respStack-kort (generell-regelen), men
       display:flex på et flex-item (her: hver <td>) endrer ikke om ELEMENTET selv deltar i
       flex-layouten til sin forelder - kun forelderen (<tr>) sin display avgjør det. Gjør
       derfor <tr> til flex kun i utvidet tilstand, og gir alle celler flex-basis:100% som
       standard (hver forblir på egen linje, uendret fra før) - unntatt de tre
       kontrollskjemafeil-cellene, som i stedet får en delt flex-basis slik at de pakkes inn
       på samme linje og fordeles jevnt. `::after`-pilen (posisjonert absolutt) og
       :first-child (posisjonert static, se punkt 1) er upåvirket - absolutt-posisjonerte
       elementer deltar ikke i flex-layout uansett forelderens display. */
    #hovedskjemaKontrollTabell.respStack tbody tr.respExpanded {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 8px;
    }

    #hovedskjemaKontrollTabell.respStack tbody tr.respExpanded > td {
        flex: 1 1 100%;
    }

    #hovedskjemaKontrollTabell.respStack tbody tr.respExpanded > td.kontrollskjemafeil {
        flex: 1 1 0;
        min-width: 0;
        /* .input-container er display:inline-block (se regelen over) - text-align:center på
           foreldercellen er den korrekte måten å sentrere en inline-block-boks på (margin:auto
           virker kun for ekte block-bokser, ikke inline-block). */
        text-align: center;
    }

    #hovedskjemaKontrollTabell.respStack tbody tr.respExpanded > td.kontrollskjemakommentar {
        flex: 0 0 auto;
        align-self: center;
        font-size: 2.5em;
    }

    #hovedskjemaKontrollTabell.respStack tbody tr:not(.respExpanded) > td.kontrollskjemakommentar {
        display: none !important;
    }

    /* Unntak fra regelen over: har kontrollpunktet et lagret merknad (harMerknad-klassen,
       satt av PHP når $dataHovedskjemaDelTab['Merknad'] ikke er tom), vises selve
       kommentar-ikonet likevel på det KOLLAPSEDE kortet - samme ikon/gulfarge som i utvidet
       kort, gjenbrukt som en "denne har en kommentar"-indikator uten å måtte utvide kortet
       først. Et tomt (ustylet) kommentar-ikon vises fortsatt kun i utvidet kort som før.
       Absolutt-posisjonert (kortet er display:block, ikke flex, før det utvides - :first-
       child sin skjulte slett-knapp-plass i øvre høyre hjørne er ledig siden dette
       kontrollpunktet ikke har den, se punkt 1 lenger opp) i stedet for normal flyt, plassert
       til venstre for utvid/kollaps-pilen (som ligger på right:8px) slik at de ikke
       overlapper. Høyere spesifisitet enn regelen over (egen klasse i tillegg) vinner
       uavhengig av !important-rekkefølge. */
    #hovedskjemaKontrollTabell.respStack tbody tr:not(.respExpanded) > td.kontrollskjemakommentar.harMerknad {
        display: block !important;
        position: absolute;
        top: 6px;
        right: 40px;
        padding: 0;
    }

}