/*
 * MOBIELE WEERGAVE (zie docs/mobile-friendly.md)
 *
 * _Layout voegt de viewport meta tag en de class "mobile-ready" op <body> toe aan alle pagina's
 * (opt-out per view met ViewBag.MobileReady = false). Alle telefoonregels zitten onder
 * body.mobile-ready zodat ze gescoped blijven. Breakpoints: menu-drawer < 900px, rest < 768px.
 *
 * Globaal (geldt automatisch voor elke pagina):
 *   menu als drawer, modals als bottom sheet, 16px invoervelden, scrollbare tabs,
 *   horizontaal scrollende tabellen als vangnet.
 *
 * Herbruikbare bouwstenen:
 *   .detail-toolbar   actieknoppen in de header van een detailscherm
 *   .table-stack      bewerkbare tabel die op telefoon als kaarten wordt getoond
 *                     (td's krijgen data-label, helpers: stack-full, stack-action, stack-hide)
 *   .mobile-fab       zwevende bewaarknop (enkel zichtbaar op telefoon)
 *   .list-cards       tikbare kaartlijst als vervanging van een overzichtstabel
 *                     (list-card > list-card-link + optioneel list-card-menu rechtsboven;
 *                     list-card-meta, list-card-chips, list-card-foot met status + bedrag)
 *   .list-head        kop van een overzicht: zoeken, Filters + Nieuw, filters in een inklapbaar vak
 *                     (list-head-title/-search/-actions/-flat/-filter, list-summary)
 */

/* Modals met een vaste desktopbreedte: enkel vanaf tablet (geldt op alle pagina's) */
@media (min-width: 768px) {
    .modal-dialog.modal-min-800 {
        min-width: 800px;
    }
}

/* Secundaire info die enkel op telefoon ingeklapt is: <a data-toggle="collapse" href="#x" class="visible-xs-block"> + <div id="x" class="collapse collapse-sm-up"> */
@media (min-width: 768px) {
    .collapse.collapse-sm-up {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

.mobile-fab {
    display: none;
}

.nav-backdrop {
    display: none;
}

.nav-company {
    display: none;
}

/* Titel, icoon en vinkje van een "sheet"-menu of sheet-titel: enkel zichtbaar wanneer als bottom sheet getoond (telefoon) */
.sheet-title,
.sheet-icon,
.sheet-check {
    display: none;
}

/* ---------- Kolommen die niet floaten mogen de velden naast/boven hen niet afdekken ----------
   Bootstrap geeft elke kolom position:relative. Een kolom zonder float (bv. alleen col-lg-12 onder 1200px) wordt
   daardoor, als de lege box van een latere kolom, BOVEN de gefloatete kolommen ervoor getekend: een dropdown of knop
   erachter lijkt dan "dood" (de klik komt op de lege kolom terecht). Op breedtes waar een kolom niet floatet maken we
   hem static, zodat floats erboven blijven. */
@media (max-width: 1199px) {
    body.mobile-ready .row > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="-push-"]):not([class*="-pull-"]) {
        position: static;
    }
}

@media (max-width: 991px) {
    body.mobile-ready .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="-push-"]):not([class*="-pull-"]) {
        position: static;
    }
}

@media (max-width: 767px) {
    body.mobile-ready .row > [class*="col-sm-"]:not([class*="col-xs-"]):not([class*="-push-"]):not([class*="-pull-"]) {
        position: static;
    }
}

/* ---------- Menu als drawer (< 900px, zie Scripts/app/mobile.js) ---------- */

@media (max-width: 899px) {

    body.mobile-ready.nav-open {
        overflow: hidden;
    }

    body.mobile-ready .navbar-static-side {
        display: block !important;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 280px !important;
        max-width: 86vw;
        z-index: 2001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #fff;
        transform: translateX(-105%);
        transition: transform .25s ease-out;
    }

    body.mobile-ready.nav-open .navbar-static-side {
        transform: none;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    body.mobile-ready .nav-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2000;
        background: rgba(17, 24, 39, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }

    body.mobile-ready.nav-open .nav-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Geen "pagina opzij duwen": de drawer ligt over de pagina */
    body.mobile-ready #page-wrapper {
        margin: 0 !important;
    }

    body.mobile-ready .navbar-static-side .nav-header {
        display: block !important;
        padding: 18px 20px 8px 20px;
    }

    body.mobile-ready .navbar-static-side .nav-label {
        display: inline !important;
    }

    /* Bedrijfsnaam onder het logo in de drawer (in de topbalk is er op telefoon geen plaats voor) */
    body.mobile-ready .navbar-static-side .nav-company {
        display: block;
        margin-top: -6px;
        padding-left: 2px;
        font-size: 13px;
        font-weight: 600;
        color: #676a6c;
    }

    body.mobile-ready .navbar-default .nav > li > a {
        padding: 14px 20px;
        font-size: 15px;
    }

    body.mobile-ready .navbar-default .nav-second-level li a {
        padding: 12px 20px 12px 52px;
    }
}

@media (max-width: 767px) {

    /* ---------- Globaal vangnet ---------- */

    /* Geen horizontaal pannen van de hele pagina als er toch iets te breed is */
    body.mobile-ready {
        overflow-x: hidden;
    }

    /* Tabellen zonder eigen wrapper scrollen horizontaal i.p.v. de pagina te verbreden.
       Overzichten (footable) en kaarttabellen (table-stack) hebben een eigen aanpak. */
    body.mobile-ready :not(.table-responsive) > table.table:not(.table-stack):not(.footable) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabs: een horizontaal scrollbare balk i.p.v. over meerdere lijnen te wrappen */
    body.mobile-ready .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

        body.mobile-ready .nav-tabs::before,
        body.mobile-ready .nav-tabs::after {
            display: none;
        }

        body.mobile-ready .nav-tabs > li {
            float: none;
            flex: 0 0 auto;
            white-space: nowrap;
        }

    /* Verticale tabs (tabs-left/right) worden gewone horizontale tabs boven de inhoud */
    body.mobile-ready .tabs-container .tabs-left > .nav-tabs,
    body.mobile-ready .tabs-container .tabs-right > .nav-tabs {
        float: none;
        width: 100%;
        margin: 0;
    }

    body.mobile-ready .tabs-container .tabs-left .panel-body,
    body.mobile-ready .tabs-container .tabs-right .panel-body {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Tikvriendelijke knoppen en menu's */
    body.mobile-ready .btn {
        min-height: 38px;
    }

    body.mobile-ready .btn-sm {
        min-height: 34px;
    }

    body.mobile-ready .btn-xs {
        min-height: 30px;
        padding-left: 8px;
        padding-right: 8px;
    }

    body.mobile-ready .dropdown-menu > li > a {
        padding: 10px 16px;
    }

    body.mobile-ready .pagination {
        display: flex;
        flex-wrap: wrap;
    }

    /* ---------- Shell ---------- */

    /* padding-bottom: ruimte zodat de zwevende bewaarknop geen invoer bedekt */
    body.mobile-ready .wrapper-spacer {
        padding: 0 4px 70px 4px;
    }

        /* anders plakt de eerste kaart tegen de topbalk */
        body.mobile-ready #wf-view > .wrapper-spacer {
            padding-top: 12px;
        }

    body.mobile-ready .ibox-content {
        padding: 10px 12px;
    }

    /* ---------- Modals als bottom sheet ---------- */

    body.mobile-ready .modal .modal-dialog,
    body.mobile-ready .modal.fade .modal-dialog {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-top: 0 !important;
        transform: translateY(100%);
        transition: transform .28s ease-out;
    }

    body.mobile-ready .modal.in .modal-dialog {
        transform: translateY(0);
    }

    /* aanmeldmodal (sessie verlopen): hield ook op telefoon zijn 150px bovenaan (stond inline met !important) */
    body.mobile-ready .modal .modal-dialog.login-modal-dialog {
        padding-top: 150px !important;
    }

    body.mobile-ready .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    }

    /* Grote modals (bv. zoeken, mailen) bijna schermvullend */
    body.mobile-ready .modal-lg .modal-content {
        height: 94vh;
        height: 94dvh;
    }

    body.mobile-ready .modal-header {
        position: relative;
        flex: 0 0 auto;
        padding-top: 22px;
    }

        /* Handvat bovenaan het sheet */
        body.mobile-ready .modal-header::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 50%;
            width: 40px;
            height: 4px;
            margin-left: -20px;
            border-radius: 2px;
            background: #d9dde1;
        }

        /* Titel in gewone schrijfwijze (h3 is in het thema uppercase); optioneel een icoontegel ervoor:
           <span class="wf-icon-tile sheet-icon"><i class="fa ..."></i></span> (enkel zichtbaar op telefoon) */
        body.mobile-ready .modal-header .modal-title {
            font-size: 17px;
            font-weight: 600;
            line-height: 1.35;
            text-transform: none;
        }

        body.mobile-ready .modal-header .modal-title:has(> .sheet-icon) {
            display: flex;
            align-items: center;
            gap: 10px;
        }

            body.mobile-ready .modal-header .modal-title > .sheet-icon {
                display: inline-flex;
            }

        /* Sluitknop: rond grijs knopje i.p.v. een los kruisje */
        body.mobile-ready .modal-header .close {
            width: 36px;
            height: 36px;
            margin: -4px -4px 0 12px;
            border-radius: 50%;
            background: #f1f3f5;
            color: #5f6b7a;
            opacity: 1;
            font-size: 24px;
            font-weight: 400;
            line-height: 34px;
            text-align: center;
            text-shadow: none;
        }

    body.mobile-ready .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Knoppen onderaan onder elkaar op volle breedte, hoofdactie bovenaan (= laatste in de DOM) */
    body.mobile-ready .modal-footer {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    }

        body.mobile-ready .modal-footer::before,
        body.mobile-ready .modal-footer::after {
            display: none;
        }

        body.mobile-ready .modal-footer .btn {
            float: none !important;
            width: 100%;
            min-height: 44px;
            margin: 0 !important;
        }

    /* ---------- Topbalk: een lijn [menu][logo] ........ [taken][bedrijf][profiel][afmelden] ---------- */

    /* Blijft bovenaan staan bij scrollen (menu, taken, bedrijf altijd bereikbaar).
       #wrapper heeft overflow-x: hidden (style.css), wat hem een eigen scrollcontainer maakt en sticky breekt:
       clip knipt hetzelfde af zonder scrollcontainer te zijn (browsers zonder clip houden visible; body knipt al). */
    body.mobile-ready #wrapper {
        overflow: visible;
        overflow-x: clip;
    }

    body.mobile-ready .topnav-row {
        position: sticky;
        top: 0;
        z-index: 1030; /* boven de pagina, onder drawer (2000) en modals */
        background: #fff;
        box-shadow: 0 1px 0 var(--wf-border);
    }

        /* Sticky + z-index maakt een eigen stacking context: de sheets in de balk (taken, bedrijf, profiel; 2100)
           zitten daarin gevangen en kwamen onder de zwevende bewaarknop (.mobile-fab, 1040). Zolang er een open is,
           gaat de hele balk mee omhoog. */
        body.mobile-ready .topnav-row:has(.open) {
            z-index: 2100;
        }

    /* Bovenaan enkel een haarlijn; zodra de pagina eronder schuift komt er geleidelijk een zachte schaduw bij
       (de eerste 32px scrollen). Puur CSS via een scroll-timeline; browsers zonder ondersteuning (Firefox) en pagina's
       die niet scrollen houden enkel de haarlijn hierboven: een vaste schaduw las bovenaan als een grijze streep.
       Geen backdrop-filter: dat maakt de balk een containing block voor de fixed sheets erin. */
    @supports (animation-timeline: scroll()) {
        body.mobile-ready .topnav-row {
            animation: wf-topbar-lift linear both;
            animation-timeline: scroll();
            animation-range: 0 32px;
        }
    }

    @keyframes wf-topbar-lift {
        from {
            box-shadow: 0 1px 0 var(--wf-border), 0 10px 24px -14px rgba(17, 24, 39, 0);
        }

        to {
            box-shadow: 0 1px 0 var(--wf-border-strong), 0 10px 24px -14px rgba(17, 24, 39, 0.32);
        }
    }

    /* Ankers en scrollIntoView niet onder de vaste topbalk laten verdwijnen */
    html:has(body.mobile-ready) {
        scroll-padding-top: 64px;
    }

    /* Eén rij: links de app-tegel met het bedrijf als titel (de bedrijfskeuze, één knop), rechts de knoppen. Het logo
       zit in die tegel; de .navbar-header (logo, hamburger) valt weg. De <ul> doet niet mee (display: contents), zodat
       het bedrijfs-<li> de eerste kolom kan nemen. */
    body.mobile-ready .navbar-static-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-columns: auto;
        grid-auto-flow: column;
        align-content: center;
        align-items: center;
        min-height: 56px;
        margin-bottom: 0;
        padding: 4px 4px 4px 8px;
    }

        body.mobile-ready .navbar-static-top::before,
        body.mobile-ready .navbar-static-top::after {
            display: none;
        }

        body.mobile-ready .navbar-static-top > .navbar-header {
            display: none;
        }

        body.mobile-ready .navbar-static-top > .navbar-top-links {
            display: contents;
        }

    body.mobile-ready .navbar-top-links > li {
        display: block;
        grid-row: 1;
        float: none;
        margin: 0;
    }

    /* Profiel en afmelden staan op telefoon onderaan de menu-sheet (navigation.css) */
    body.mobile-ready .navbar-top-links > li.wf-topnav-in-menu {
        display: none;
    }

        body.mobile-ready .navbar-top-links > li:last-child {
            margin-right: 0;
        }

        body.mobile-ready .navbar-top-links > li > a {
            min-height: 0;
            padding: 8px 9px !important;
            margin: 0 !important;
        }

    /* Bedrijf: app-tegel + bedrijfsnaam als titel + "webfacturatie" eronder, samen één knop die de bedrijfskeuze (sheet)
       opent, zoals een werkruimtekiezer. Het pijltje staat er enkel bij meerdere bedrijven (ng-if). */
    body.mobile-ready .navbar-top-links > li.topnav-company {
        grid-area: 1 / 1;
        min-width: 0;
        text-align: left; /* de <ul> is text-right */
    }

        body.mobile-ready .navbar-top-links > li.topnav-company > a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            max-width: 100%;
            padding: 4px 10px 4px 4px !important;
            border-radius: 14px;
            color: var(--wf-navy);
        }

            body.mobile-ready .navbar-top-links > li.topnav-company > a:active,
            body.mobile-ready .navbar-top-links > li.topnav-company.open > a {
                background: var(--wf-hover);
            }

        body.mobile-ready .topnav-company-tile {
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 11px;
            background: var(--wf-navy);
            color: #fff;
            font-family: 'Comfortaa', sans-serif;
            font-size: 21px;
            font-weight: 700;
            line-height: 1;
            box-shadow: 0 1px 2px rgba(17, 24, 39, 0.18);
        }

            body.mobile-ready .topnav-company-tile .brand-dot {
                color: var(--wf-cyan);
            }

        body.mobile-ready .topnav-company-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        body.mobile-ready .navbar-top-links > li.topnav-company .font-bold {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 17px;
            line-height: 1.2;
        }

        body.mobile-ready .topnav-company-app {
            display: block;
            margin-top: 1px;
            color: var(--wf-muted);
            font-family: 'Comfortaa', sans-serif;
            font-size: 11.5px;
            font-weight: 700;
            line-height: 1.2;
        }

        /* enkel het gebouw in de knop; de keuzelijst eronder toont het wel */
        body.mobile-ready .navbar-top-links > li.topnav-company > a > .fa-building {
            display: none;
        }

        body.mobile-ready .navbar-top-links > li.topnav-company .topnav-company-chev {
            display: inline-block;
            flex: none;
            align-self: flex-start;
            margin-top: 5px;
            font-size: 12px;
            color: var(--wf-muted);
        }

    /* ---------- Invoer ---------- */

    /* 16px voorkomt dat iOS inzoomt bij focus (overschrijft de 14px regel in style.css) */
    body.mobile-ready .form-control,
    body.mobile-ready .single-line {
        font-size: 16px !important;
    }

    body.mobile-ready .form-control {
        height: 40px;
    }

    body.mobile-ready textarea.form-control {
        height: auto;
    }

    /* Select2 meervoudige selectie: style.css zet een vaste hoogte van 34px,
       op telefoon lopen de gekozen waarden over meerdere lijnen */
    body.mobile-ready .select2-container--default .select2-selection--multiple {
        height: auto;
        padding-bottom: 4px;
    }

    body.mobile-ready .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 4px;
        max-width: 100%;
        white-space: normal;
    }

    body.mobile-ready .bl-1 {
        border-left: none;
    }

    body.mobile-ready h1 {
        margin-top: 10px;
    }

    /* ---------- Detail toolbar ---------- */

    body.mobile-ready .detail-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        text-align: left;
        margin-bottom: 10px;
    }

        body.mobile-ready .detail-toolbar > .btn,
        body.mobile-ready .detail-toolbar > .btn-group {
            margin: 0;
        }

        body.mobile-ready .detail-toolbar > .btn,
        body.mobile-ready .detail-toolbar > .btn-group > .btn {
            min-height: 40px;
            min-width: 44px;
        }

        body.mobile-ready .detail-toolbar .toolbar-primary {
            order: -1;
        }

        body.mobile-ready .detail-toolbar > br {
            display: none;
        }

        body.mobile-ready .detail-toolbar .detail-toolbar-note {
            flex-basis: 100%;
            padding-top: 0 !important;
        }

    /* ---------- Tabel als kaarten ---------- */

    body.mobile-ready .table-stack,
    body.mobile-ready .table-stack > tbody {
        display: block;
        width: 100%;
    }

        body.mobile-ready .table-stack > thead {
            display: none;
        }

        body.mobile-ready .table-stack > tbody > tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 10px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #dde2e8;
            border-radius: 6px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12), 0 1px 2px rgba(17, 24, 39, 0.06);
        }

            body.mobile-ready .table-stack > tbody > tr > td {
                display: block;
                padding: 0;
                border: none;
                text-align: left;
                min-width: 0;
                /* Bootstrap zet nowrap op cellen binnen .table-responsive: in een kaart moet tekst wel wrappen */
                white-space: normal;
                overflow-wrap: anywhere;
            }

                body.mobile-ready .table-stack > tbody > tr > td[data-label]::before {
                    content: attr(data-label);
                    display: block;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 18px;
                    color: #676a6c;
                    margin-bottom: 2px;
                }

                body.mobile-ready .table-stack > tbody > tr > td.stack-full {
                    grid-column: 1 / -1;
                }

                body.mobile-ready .table-stack > tbody > tr > td.stack-action {
                    grid-column: 1 / -1;
                    text-align: right;
                }

                body.mobile-ready .table-stack > tbody > tr > td.stack-hide {
                    display: none;
                }

            /* Rij zonder kaartopmaak (bv. de "+"-knop) */
            body.mobile-ready .table-stack > tbody > tr.stack-plain {
                display: block;
                padding: 0;
                border: none;
                background: none;
            }

                body.mobile-ready .table-stack > tbody > tr.stack-plain > td {
                    display: block;
                }

            /* Totaalrij op een lijn: "Totaal: 7.50 u" */
            body.mobile-ready .table-stack > tbody > tr.stack-total {
                display: flex;
                justify-content: flex-end;
            }

                body.mobile-ready .table-stack > tbody > tr.stack-total > td[data-label]::before {
                    display: inline;
                    margin-right: 6px;
                }

        /* Geen blijvende hover-kleur na een tik (op touch blijft :hover hangen). Bootstrap kleurt de cellen grijs,
           dat zou in een kaart alles bedekken, ook de selectiekleur */
        body.mobile-ready .table-stack.table-hover > tbody > tr:not(.stack-total):hover {
            background-color: #fff;
        }

        body.mobile-ready .table-stack.table-hover > tbody > tr:hover > td {
            background-color: transparent;
        }

        /* Geselecteerde kaart (tr.selectedRow in style.css: cyaan met witte tekst, onleesbaar in een kaart):
           lichte cyaan vulling, donkere tekst en een duidelijke rand */
        body.mobile-ready tr.selectedRow,
        body.mobile-ready tr.selectedRow > td {
            background-color: var(--wf-cyan-soft) !important;
            color: var(--wf-navy) !important;
            font-weight: normal;
        }

        body.mobile-ready .table-stack > tbody > tr.selectedRow {
            border-color: #6fc7de;
            box-shadow: 0 0 0 2px #6fc7de, 0 1px 3px rgba(17, 24, 39, 0.12);
        }

        /* Verwijderknop in een kaart: subtiel icoon i.p.v. een rood blok */
        body.mobile-ready .table-stack > tbody > tr > td.sa-delete {
            grid-area: delete;
            align-self: end;
            text-align: right;
        }

            body.mobile-ready .table-stack > tbody > tr > td.sa-delete .btn {
                width: 40px;
                height: 40px;
                padding: 0;
                background: transparent;
                border: none;
                box-shadow: none;
                color: #ed5565;
                font-size: 16px;
            }

    /* Werkuren-kaart:
         [Datum         ] [Uren] [x]
         [Van   ] [Tot  ] [Pauze   ]
         [Technieker               ]
         [Opmerking                ] */
    body.mobile-ready .stack-workhours > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr 64px 40px;
        grid-template-areas:
            "date   date   hours  delete"
            "from   to     brk    brk"
            "tech   tech   tech   tech"
            "remark remark remark remark";
    }

    body.mobile-ready .stack-workhours td.sa-date { grid-area: date; }
    body.mobile-ready .stack-workhours td.sa-from { grid-area: from; }
    body.mobile-ready .stack-workhours td.sa-to { grid-area: to; }
    body.mobile-ready .stack-workhours td.sa-break { grid-area: brk; }
    body.mobile-ready .stack-workhours td.sa-tech { grid-area: tech; }
    body.mobile-ready .stack-workhours td.sa-remark { grid-area: remark; }

    /* Uren: berekende waarde op dezelfde lijn als de invoervelden */
    body.mobile-ready .stack-workhours td.sa-hours {
        grid-area: hours;
        /* label bovenaan (gelijk met "Datum"), waarde onderaan (gelijk met het invoerveld) */
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        line-height: 40px;
        font-size: 15px;
        font-weight: 600;
        color: #211d5d;
        white-space: nowrap;
    }

    body.mobile-ready .stack-workhours td.sa-break input {
        text-align: center;
    }

    /* uib-timepicker compact zodat Van, Tot en Pauze op een lijn passen */
    body.mobile-ready .stack-workhours .uib-timepicker td {
        padding: 0;
    }

    body.mobile-ready .stack-workhours .uib-timepicker input.form-control {
        width: 42px;
        padding-left: 2px;
        padding-right: 2px;
    }

    body.mobile-ready .stack-workhours .uib-separator {
        padding: 0 2px;
    }

    /* Onderdelen (rijkaarten, style.css sr-parts):
         product: [Aantal] [Code / naam            ] [x]      vrije lijn: [Aantal] [Code        ] [x]
                           [STOCK 99] [GEVALIDEERD ☐]                     [Omschrijving             ] */
    body.mobile-ready .sr-parts .sr-part-row.is-product {
        grid-template-columns: 64px auto minmax(0, 1fr) 36px;
        grid-template-areas:
            "qty main  main  act"
            ".   stock valid valid";
        row-gap: 6px;
    }

    body.mobile-ready .sr-parts .sr-part-stock { grid-area: stock; }

    body.mobile-ready .sr-parts .sr-part-stock,
    body.mobile-ready .sr-parts .sr-part-valid {
        flex-direction: row;
        gap: 6px;
    }

        body.mobile-ready .sr-parts .sr-part-stock > .wf-cell-label,
        body.mobile-ready .sr-parts .sr-part-valid > .wf-cell-label {
            margin: 0;
        }

    body.mobile-ready .sr-parts .sr-part-row.is-free {
        grid-template-columns: 64px minmax(0, 1fr) 36px;
        grid-template-areas:
            "qty  code act"
            "desc desc desc";
    }

    body.mobile-ready .sr-parts .sr-part-qty { grid-area: qty; }
    body.mobile-ready .sr-parts .sr-part-main { grid-area: main; }
    body.mobile-ready .sr-parts .sr-part-valid { grid-area: valid; }
    body.mobile-ready .sr-parts .sr-part-code { grid-area: code; }
    body.mobile-ready .sr-parts .sr-part-desc { grid-area: desc; }
    body.mobile-ready .sr-parts .sr-part-act { grid-area: act; }

        body.mobile-ready .sr-parts .sr-part-valid > input[type=checkbox] {
            width: 20px;
            height: 20px;
            margin: 0;
        }

    /* toevoegknoppen onder de lijnen (Onderdelen, Werkuren): even breed, duimhoogte */
    body.mobile-ready .sr-add-bar > .btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    /* ---------- Documentlijnen (factuur/offerte/order/...): kaart per lijn ----------
       Markup: table.table-stack.stack-lines, tr.line-title voor tussentitels, td-classes sa-desc, sa-qty,
       sa-price, sa-disc, sa-stock, sa-sub, sa-margin, sa-act (+ data-label). Zie Views/Invoice/_InvoiceLines.cshtml.
       [Omschrijving                ]
       [Aantal ] [Prijs ] [Korting ]
       [Voorraad] [Subtotaal] [ ✎ 🗑 ] */
    body.mobile-ready .table-stack > colgroup {
        display: none;
    }

    body.mobile-ready .lines-wrap {
        margin-bottom: 0;
        padding: 8px 8px 0 8px;
        overflow: visible;
        border: 1px solid #e3e7ec;
        border-radius: 8px;
        background-color: #f1f3f6;
    }

    body.mobile-ready .lines-wrap .stack-lines > tbody > tr {
        border-left: 4px solid #6fc7de;
        margin-bottom: 10px;
    }

    body.mobile-ready .stack-lines > tbody > tr {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "desc  desc  desc"
            "qty   price disc"
            "stock sub   act";
    }

    body.mobile-ready .stack-lines td.sa-desc { grid-area: desc; }
    body.mobile-ready .stack-lines td.sa-qty { grid-area: qty; }
    body.mobile-ready .stack-lines td.sa-price { grid-area: price; }
    body.mobile-ready .stack-lines td.sa-disc { grid-area: disc; }
    body.mobile-ready .stack-lines td.sa-stock { grid-area: stock; align-self: center; }
    body.mobile-ready .stack-lines td.sa-sub { grid-area: sub; align-self: center; text-align: right; font-weight: 700; }
    body.mobile-ready .stack-lines td.sa-act { grid-area: act; align-self: center; text-align: right; white-space: nowrap; }

    /* Margekolom (enkel als "toon marges" aan staat) komt automatisch op een extra lijn */
    body.mobile-ready .stack-lines td.sa-margin {
        grid-column: 1 / -1;
        text-align: left;
    }

    /* Berekende waarde (korting) op dezelfde hoogte als de invoervelden ernaast */
    body.mobile-ready .stack-lines td.sa-disc {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        line-height: 40px;
        text-align: right;
    }

        body.mobile-ready .stack-lines td.sa-disc::before {
            line-height: 18px;
            text-align: left;
        }

    body.mobile-ready .stack-lines td.sa-qty input,
    body.mobile-ready .stack-lines td.sa-price input {
        text-align: right;
    }

    /* Hulpjes voor de &nbsp;-vullers die op desktop de rijen uitlijnen */
    body.mobile-ready .stack-lines td:not(.sa-desc) > span[ng-show] {
        display: none !important;
    }

    body.mobile-ready .stack-lines td.sa-act .btn {
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
    }

    body.mobile-ready .line-caption {
        font-size: 13px;
        margin-bottom: 4px;
    }

    /* Tussentitel: enkel omschrijving + acties */
    body.mobile-ready .stack-lines > tbody > tr.line-title {
        grid-template-columns: 1fr auto;
        grid-template-areas: "desc act";
        background-color: #f7f7fa;
        border-left-color: #28235b !important;
    }

        body.mobile-ready .stack-lines > tbody > tr.line-title td.sa-qty,
        body.mobile-ready .stack-lines > tbody > tr.line-title td.sa-price,
        body.mobile-ready .stack-lines > tbody > tr.line-title td.sa-disc,
        body.mobile-ready .stack-lines > tbody > tr.line-title td.sa-stock,
        body.mobile-ready .stack-lines > tbody > tr.line-title td.sa-sub,
        body.mobile-ready .stack-lines > tbody > tr.line-title td.sa-margin {
            display: none !important;
        }

    body.mobile-ready .add-line-buttons {
        display: flex;
        gap: 8px;
    }

        body.mobile-ready .add-line-buttons .btn {
            flex: 1 1 0;
        }

    /* ---------- Acties als bottom sheet ----------
       .dropdown-sheet (op de wrapper van een dropdown) en de ⋮-menu's van .list-card-menu tonen hun menu onderaan
       over de volle breedte i.p.v. een klein zwevend menu. Bootstrap voegt op touch zelf een backdrop toe. */
    body.mobile-ready .dropdown-sheet.open > .dropdown-menu,
    body.mobile-ready .list-card-menu.open > .dropdown-menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        float: none;
        width: 100% !important;
        max-width: none;
        max-height: 75vh;
        max-height: 75dvh;
        margin: 0;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: 0;
        border-radius: 16px 16px 0 0;
        /* tweede schaduw = gedimde achtergrond over het hele scherm, zoals bij de modals (een fixed element
           wordt niet afgeknipt door overflow van voorouders) */
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25), 0 0 0 100vmax rgba(17, 24, 39, 0.4);
        z-index: 2100;
    }

        /* text-transform: style.css maakt dropdown-items op desktop lowercase; in een sheet onder een titel in gewone
           schrijfwijze oogt dat slordig, dus hier de tekst zoals ze is (Cash, Overschrijving, ...) */
        body.mobile-ready .dropdown-sheet.open > .dropdown-menu > li > a,
        body.mobile-ready .list-card-menu.open > .dropdown-menu > li > a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 20px;
            font-size: 15px;
            font-weight: 500;
            text-transform: none;
            color: var(--wf-text);
        }

        /* Items die a.btn.btn-white zijn (de ⋮-menu's van de kaarten): compacte rijen, zodat een lang menu zonder scrollen
           past. Dat deed vroeger .btn-white { padding: 3px 5px !important } in style.css; even specifiek als de regel
           hierboven en erna, dus zonder !important. */
        body.mobile-ready .dropdown-sheet > .dropdown-menu > li > a.btn-white,
        body.mobile-ready .list-card-menu > .dropdown-menu > li > a.btn-white {
            padding: 3px 5px;
        }

            /* icoon vooraan: vaste breedte zodat de teksten uitlijnen, rustige kleur */
            body.mobile-ready .dropdown-sheet.open > .dropdown-menu > li > a > i:first-child,
            body.mobile-ready .list-card-menu.open > .dropdown-menu > li > a > i:first-child {
                flex: 0 0 20px;
                width: 20px;
                margin: 0;
                text-align: center;
                color: var(--wf-cyan-icon);
            }

        /* Handvat bovenaan elke sheet, net als bij de modals */
        body.mobile-ready .dropdown-sheet.open > .dropdown-menu::before,
        body.mobile-ready .list-card-menu.open > .dropdown-menu::before {
            content: "";
            display: block;
            width: 40px;
            height: 4px;
            margin: 2px auto 10px auto;
            border-radius: 2px;
            background: #d9dde1;
        }

        /* Titel met icoontegel bovenaan, net als de modals:
           <li class="sheet-title"><span class="wf-icon-tile"><i class="fa-solid fa-bolt"></i></span>Acties</li> */
        body.mobile-ready .dropdown-sheet.open > .dropdown-menu .sheet-title,
        body.mobile-ready .list-card-menu.open > .dropdown-menu .sheet-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 4px 0;
            padding: 0 20px 12px 20px;
            border-bottom: 1px solid #eef0f2;
            font-size: 17px;
            font-weight: 600;
            line-height: 1.35;
            text-align: left;
            text-transform: none;
            white-space: normal;
            color: var(--wf-navy);
        }

        /* Bedrijfskeuze: nette lijstrijen met een vinkje bij het huidige bedrijf */
        body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company {
            position: relative;
            display: block;
            margin: 0;
            padding: 12px 48px 12px 70px; /* links de icoontegel, rechts het vinkje */
            border: 0;
            border-bottom: 1px solid #f0f2f4;
            border-radius: 0;
            font-size: 14px !important; /* wint van de 14px !important in style.css (dropdown-company) */
            font-weight: 600;
            line-height: 1.4;
            white-space: normal;
        }

            body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company:last-child {
                border-bottom: 0;
            }

            body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company small {
                font-size: 12px;
                font-weight: 400;
                color: var(--wf-muted);
            }

            body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company.is-current {
                background-color: #e3f4f9;
            }

            /* Icoontegel links (huidig bedrijf in cyaan), vinkje rechts */
            body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company .sheet-icon {
                display: flex;
                position: absolute;
                left: 20px;
                top: 50%;
                width: 38px;
                height: 38px;
                margin-top: -19px;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                background: #f1f3f5;
                color: var(--wf-muted);
                font-size: 16px;
            }

            body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company.is-current .sheet-icon {
                background: var(--wf-cyan);
                color: #fff;
            }

            body.mobile-ready .dropdown-sheet.open > .dropdown-menu a.dropdown-company .sheet-check {
                display: block;
                position: absolute;
                right: 20px;
                top: 50%;
                margin-top: -8px;
                color: var(--wf-cyan-ink);
            }

    /* Geen verticale scheidingslijn-trucs in een sheet: <hr> blijft een nette scheiding */
    body.mobile-ready .dropdown-sheet.open > .dropdown-menu hr,
    body.mobile-ready .list-card-menu.open > .dropdown-menu hr {
        margin: 6px 0;
    }

    /* ---------- Volgorde en kolommen op telefoon ---------- */

    body.mobile-ready .border-left {
        border-left: none;
    }

    /* Kolom op telefoon over de volle breedte, zonder de desktop-klassen (bv. col-xs-2, waar style.css speciale regels voor heeft) te wijzigen */
    body.mobile-ready .mobile-full {
        float: none;
        width: 100%;
    }

    /* Verticale ruimte tussen gestapelde kolommen, enkel op telefoon (desktop blijft ongewijzigd) */
    body.mobile-ready .mobile-gap {
        margin-top: 10px;
    }

    /* Rij met kolommen onder elkaar waarvan er een naar boven moet (.mobile-order-first), bv. totalen boven de tabs */
    body.mobile-ready .mobile-flex-col {
        display: flex;
        flex-direction: column;
    }

        body.mobile-ready .mobile-flex-col::before,
        body.mobile-ready .mobile-flex-col::after {
            display: none;
        }

        body.mobile-ready .mobile-flex-col > .mobile-order-first {
            order: -1;
        }

    /* ---------- Overzichtskaart: extra's ---------- */

    /* te laat: rode rand met een accentbalk links */
    body.mobile-ready .list-card-late {
        border-color: #f3c3c9;
        box-shadow: inset 3px 0 0 #ed5565;
    }

    body.mobile-ready .list-card-amount {
        font-size: 16px;
        font-weight: 700;
        color: var(--wf-navy);
        font-variant-numeric: tabular-nums;
    }

        body.mobile-ready .list-card-amount small {
            font-size: 12px;
            font-weight: 400;
            color: var(--wf-muted);
        }

    /* Grijze bijregel (datum, referenties, marge) */
    body.mobile-ready .list-card-meta {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--wf-muted);
        overflow-wrap: anywhere;
    }

        body.mobile-ready .list-card-link > .list-card-meta + .list-card-meta {
            margin-top: 1px;
        }

    body.mobile-ready .list-card-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        font-size: 11px;
    }

        body.mobile-ready .list-card-link > .list-card-chips {
            margin-top: 8px;
        }

        body.mobile-ready .list-card-chips > span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 1px 8px;
            border-radius: 999px;
            background-color: #f1f3f5;
            color: #5f6b7a;
            font-weight: 600;
            line-height: 18px;
        }

    /* Onderste regel: status links, bedrag rechts. Loopt onder de ⋮-knop door (die staat bovenaan). */
    body.mobile-ready .list-card-link > .list-card-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 6px 8px;
        margin-top: 10px;
        margin-right: -40px;
    }

        body.mobile-ready .list-card-foot > .list-card-status {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        body.mobile-ready .list-card-foot > .list-card-amount {
            margin-left: auto;
            text-align: right;
            white-space: nowrap;
        }

    /* ---------- Overzichtskop: zoeken, Filters + Nieuw, inklapbaar filtervak ----------
       .list-head op de .row bovenaan het overzicht. Op telefoon wordt die een kolom in deze volgorde:
       .list-head-title, .list-head-search, .list-head-actions, en daarna alles in DOM-volgorde.
       .list-head-flat (op een tussenliggende kolom en .row) laat de kolommen erin meedoen.
       .list-head-filter kolommen zijn verborgen tot de rij .filters-open heeft
       (ng-class="{'filters-open': filtersOpen}", knop .list-head-filter-toggle met ng-click="filtersOpen = !filtersOpen")
       en vormen samen een grijs vak (-first / -last ronden het af). Desktop blijft ongewijzigd. */
    body.mobile-ready .list-head {
        display: flex;
        flex-direction: column;
    }

        body.mobile-ready .list-head::before,
        body.mobile-ready .list-head::after,
        body.mobile-ready .list-head-flat::before,
        body.mobile-ready .list-head-flat::after {
            display: none;
        }

    body.mobile-ready .list-head-flat {
        display: contents;
    }

    body.mobile-ready .list-head-title {
        order: -3;
    }

        body.mobile-ready .list-head-title h1 {
            margin-top: 0;
        }

    body.mobile-ready .list-head-search {
        order: -2;
        margin-top: 0;
    }

        /* groot zoekveld met een vergrootglas (zelfde vorm als .wf-search, zonder extra markup) */
        body.mobile-ready .list-head-search input.form-control {
            margin: 0 !important; /* spacer-10 / inline margin van de desktop */
            height: 44px;
            padding-left: 40px;
            border-radius: 10px;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 13px 50%;
            background-size: 17px 17px;
        }

    body.mobile-ready .list-head-actions {
        order: -1;
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }

        body.mobile-ready .list-head-actions > .btn,
        body.mobile-ready .list-head-actions > .btn-group {
            flex: 1 1 0;
            margin: 0;
        }

            body.mobile-ready .list-head-actions > .btn-group > .btn {
                width: 100%;
            }

        body.mobile-ready .list-head-actions > .list-head-filter-toggle {
            order: -1;
        }

        body.mobile-ready .list-head-actions .badge {
            display: inline-block;
            width: auto;
            min-width: 20px;
            margin-left: 4px;
            padding: 2px 7px;
            border-radius: 999px;
            background-color: var(--wf-cyan);
            color: #fff;
        }

    body.mobile-ready .list-head-filter {
        display: none;
        width: auto;
        margin: 0 15px;
        padding: 6px 14px;
        border: 1px solid var(--wf-border-strong);
        border-top: 0;
        border-bottom: 0;
        background-color: var(--wf-surface);
    }

    body.mobile-ready .list-head.filters-open .list-head-filter {
        display: block;
    }

    body.mobile-ready .list-head-filter.list-head-filter-first {
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--wf-border-strong);
        border-radius: 12px 12px 0 0;
    }

    body.mobile-ready .list-head-filter-last {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--wf-border-strong);
        border-radius: 0 0 12px 12px;
    }

        body.mobile-ready .list-head-filter .control-label {
            margin-bottom: 4px;
            color: var(--wf-muted);
            font-weight: 600;
            letter-spacing: 0.04em;
        }

        /* schakelaars: label links, toggle rechts, een per rij */
        body.mobile-ready .list-head-filter .switch.wf-switch-row {
            display: flex;
            width: auto;
            margin: 0;
            padding: 11px 0;
            border-bottom: 1px solid var(--wf-border);
            border-radius: 0;
            background: none;
        }

            body.mobile-ready .list-head-filter .switch.wf-switch-row > label:first-child {
                font-size: 15px;
            }

    body.mobile-ready .list-head-filter-close {
        margin-top: 14px;
    }

    /* Samenvatting boven de kaarten: periode + aantal, en de totalen van de hele gefilterde set */
    body.mobile-ready .list-summary {
        margin-top: 4px;
        padding: 10px 14px;
        border: 1px solid var(--wf-border);
        border-radius: 12px;
        background-color: var(--wf-surface);
    }

    body.mobile-ready .list-summary-top {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 12.5px;
        color: var(--wf-muted);
    }

    body.mobile-ready .list-summary-figures {
        display: flex;
        gap: 16px;
        margin-top: 6px;
    }

        body.mobile-ready .list-summary-figures > div {
            flex: 1 1 0;
            min-width: 0;
        }

        body.mobile-ready .list-summary-figures small {
            display: block;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--wf-muted);
        }

        body.mobile-ready .list-summary-figures b {
            font-size: 17px;
            color: var(--wf-navy);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

    /* ---------- Bijlages ---------- */

    body.mobile-ready .dropzone {
        min-height: 70px;
        line-height: 30px;
        padding: 15px;
    }

    body.mobile-ready .dropzone-file {
        white-space: normal;
        word-break: break-all;
        margin-bottom: 5px;
    }

    body.mobile-ready .attachment-name {
        word-break: break-all;
    }

    /* ---------- Zwevende bewaarknop ---------- */

    body.mobile-ready .mobile-fab {
        display: block;
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 1040;
        border-radius: 24px;
        padding: 10px 18px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    /* ---------- Overzicht als kaarten ---------- */

    body.mobile-ready .list-card {
        position: relative;
        margin-bottom: 10px;
        border: 1px solid var(--wf-border-strong);
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    }

    body.mobile-ready .list-card-link {
        display: block;
        padding: 12px 52px 12px 14px;
        border-radius: inherit;
        color: inherit;
        text-decoration: none;
    }

        body.mobile-ready .list-card-link:active {
            background-color: var(--wf-hover);
        }

        body.mobile-ready .list-card-link > div + div {
            margin-top: 4px;
        }

    body.mobile-ready .list-card-title {
        font-size: 14px;
        line-height: 22px;
    }

    body.mobile-ready .list-card-status {
        text-transform: uppercase;
        font-size: 11px;
    }

        /* Badges in een kaart als zachte pills (zelfde kleuren als .wf-pill); het thema geeft badges een vaste
           breedte, in een kaart passen ze zich aan hun tekst aan */
        body.mobile-ready .list-card .badge {
            display: inline-block;
            width: auto;
            max-width: 100%;
            white-space: normal;
            text-align: left;
            padding: 1px 8px;
            border-radius: 999px;
            background-color: #f1f3f5;
            color: #5f6b7a;
            font-size: 10.5px;
            font-weight: 600;
            line-height: 18px;
            letter-spacing: 0.02em;
            vertical-align: 1px;
        }

        body.mobile-ready .list-card .badge-primary,
        body.mobile-ready .list-card .badge-primary-darker {
            background-color: var(--wf-success-soft);
            color: var(--wf-success-ink);
        }

        body.mobile-ready .list-card .badge-success,
        body.mobile-ready .list-card .badge-info {
            background-color: var(--wf-cyan-soft);
            color: var(--wf-cyan-ink);
        }

        body.mobile-ready .list-card .badge-warning,
        body.mobile-ready .list-card .badge-warning-light {
            background-color: var(--wf-warning-soft);
            color: var(--wf-warning-ink);
        }

        body.mobile-ready .list-card .badge-danger {
            background-color: var(--wf-danger-soft);
            color: var(--wf-danger-ink);
        }

        body.mobile-ready .list-card .badge-inverse,
        body.mobile-ready .list-card .badge-disable {
            background-color: #3b4252;
            color: #fff;
        }

    body.mobile-ready .list-card-main {
        font-size: 15px;
        font-weight: 600;
        color: var(--wf-navy);
    }

    body.mobile-ready .list-card-text {
        overflow-wrap: anywhere;
    }

    body.mobile-ready .list-card-menu {
        position: absolute;
        top: 6px;
        right: 6px;
    }

        body.mobile-ready .list-card-menu > .btn {
            min-width: 40px;
            min-height: 40px;
        }

}

/* ---------- Beweging op telefoon (zie de "Beweging"-blok in style.css en docs/design-language.md) ----------
   Enkel wanneer de gebruiker geen "minder beweging" vraagt. Animaties met een transform gebruiken fill-mode
   "backwards", zodat er na afloop geen transform blijft staan (die zou fixed sheets in een kaart verplaatsen). */
@keyframes wf-sheet-up {
    from {
        transform: translateY(100%);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0), 0 0 0 100vmax rgba(17, 24, 39, 0);
    }

    to {
        transform: none;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25), 0 0 0 100vmax rgba(17, 24, 39, 0.4);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {

    /* Actiemenu's als bottom sheet: schuiven omhoog, de achtergrond dimt mee (sluiten blijft direct: Bootstrap
       verbergt het menu meteen) */
    body.mobile-ready .dropdown-sheet.open > .dropdown-menu,
    body.mobile-ready .list-card-menu.open > .dropdown-menu {
        animation: wf-sheet-up var(--wf-motion-slow) var(--wf-ease) backwards;
    }

    /* Modals (bottom sheets): zelfde easing als de actiemenu's */
    body.mobile-ready .modal .modal-dialog,
    body.mobile-ready .modal.fade .modal-dialog {
        transition: transform var(--wf-motion-slow) var(--wf-ease);
    }

    /* Kaarten komen licht verschoven binnen, de eerste paar na elkaar */
    body.mobile-ready .list-card {
        animation: wf-rise-in var(--wf-motion) var(--wf-ease) backwards;
    }

        body.mobile-ready .list-card:nth-child(2) { animation-delay: 30ms; }
        body.mobile-ready .list-card:nth-child(3) { animation-delay: 60ms; }
        body.mobile-ready .list-card:nth-child(4) { animation-delay: 90ms; }
        body.mobile-ready .list-card:nth-child(5) { animation-delay: 120ms; }
        body.mobile-ready .list-card:nth-child(n+6) { animation-delay: 150ms; }

    /* Tikken op een kaart: kort indrukken */
    body.mobile-ready .list-card-link {
        transition: background-color var(--wf-motion-fast) ease, transform 0.1s ease;
    }

        body.mobile-ready .list-card-link:active {
            transform: scale(0.985);
        }

    /* Filtervak van een overzicht klapt zacht open */
    body.mobile-ready .list-head.filters-open .list-head-filter {
        animation: wf-drop-in var(--wf-motion) var(--wf-ease) backwards;
    }

    /* Inklapbare secties op documentdetails (.mobile-sections, MODULE invoice): hoogte, padding en inhoud vloeien
       open en dicht; visibility schakelt pas om na het dichtklappen */
    body.mobile-ready .mobile-sections .tab-content > .tab-pane {
        transition: grid-template-rows var(--wf-motion-slow) var(--wf-ease);
    }

        body.mobile-ready .mobile-sections .tab-content > .tab-pane > .panel-body {
            transition: padding var(--wf-motion-slow) var(--wf-ease), border-top-width var(--wf-motion-slow) var(--wf-ease),
                opacity var(--wf-motion) ease, visibility 0s linear var(--wf-motion-slow);
        }

        body.mobile-ready .mobile-sections .tab-content > .tab-pane.section-open > .panel-body {
            transition: padding var(--wf-motion-slow) var(--wf-ease), border-top-width var(--wf-motion-slow) var(--wf-ease),
                opacity var(--wf-motion) ease 60ms, visibility 0s;
        }

    /* (extra .mobile-sections: de basisregel in MODULE invoice staat later in dit bestand) */
    body.mobile-ready .mobile-sections .mobile-section-head .mobile-section-caret {
        transition: transform var(--wf-motion-slow) var(--wf-ease);
    }

    body.mobile-ready .mobile-section-head:active {
        background-color: var(--wf-hover);
    }

    /* Zwevende bewaarknop springt tevoorschijn zodra er wijzigingen zijn */
    body.mobile-ready .mobile-fab {
        animation: wf-pop-in var(--wf-motion) var(--wf-ease) backwards;
    }
}

/*
 * MODULE-SPECIFIC RULES
 * Elk blok is eigendom van een module; voeg enkel in je eigen blok toe (eigen @media en eigen class-namen).
 */

/* ===== MODULE: account ===== */
/* Aanmelden, publieke ondertekenpagina (Sign), dashboard, taken, abonnementen */
@media (max-width: 767px) {

    /* ---------- Aanmeldpagina's (_LayoutAuth en losstaande Account-pagina's) ---------- */

    body.mobile-ready.guest .middle-box {
        padding-top: 5vh;
        padding-bottom: 20px;
    }

    /* Logo van dubbeldot: onderaan de kolom i.p.v. absoluut rechtsonder (overlapt anders de knoppen) */
    body.mobile-ready.guest .sticky-bottom {
        position: static;
        margin-top: 24px;
    }

    body.mobile-ready .loginColumns {
        padding-top: 30px;
    }

    /* Account/Login: zoals op desktop een zwevende kaart op de foto, met de foto rondom zichtbaar */
    body.mobile-ready .login-page {
        padding: 24px 16px;
        background-position: 35% center;
    }

    body.mobile-ready .login-card {
        padding: 28px 20px 24px;
        border-radius: 16px;
    }

    body.mobile-ready .login-card.is-choosing {
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
    }

    body.mobile-ready .login-card .form-control {
        height: 48px;
        font-size: 16px;
    }

    body.mobile-ready .login-card .btn.login-submit {
        height: 50px;
    }

    /* ---------- Publieke ondertekenpagina (Views/Sign/Index.cshtml, Bootstrap 5) ---------- */

    body.mobile-ready.sign-page .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    body.mobile-ready.sign-page .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.mobile-ready.sign-page .document-container {
        margin-top: 12px;
    }

    body.mobile-ready.sign-page .sign-open-doc {
        margin-bottom: 8px;
    }

    body.mobile-ready.sign-page .signature-container {
        padding: 10px 4px 20px 4px;
    }

        /* Tekenen mag de pagina niet laten scrollen */
        body.mobile-ready.sign-page .signature-container .signature canvas {
            touch-action: none;
        }

    body.mobile-ready.sign-page .sign-hint {
        margin-bottom: 6px;
    }

    /* Grote knoppen op volle breedte */
    body.mobile-ready.sign-page .sign-actions {
        display: flex;
        width: 100%;
    }

        body.mobile-ready.sign-page .sign-actions .btn {
            flex: 1 1 0;
            min-height: 64px;
            font-size: 16px;
        }

    /* ---------- Dashboard (Views/Home/Index.cshtml): kerncijfers in twee kolommen, kaarten onder elkaar ----------
       "Te doen": zonder icoon, de titel mag afbreken en de ouderdom staat eronder. */

    /* Diepte: de omhullende witte ibox valt weg, zodat de witte kaarten op de lichte paginagrond liggen
       (wit op wit las als één doorlopend vlak) */
    body.mobile-ready .dashboard-page > .ibox > .ibox-content {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.mobile-ready .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.mobile-ready .dashboard-card {
        padding: 12px 14px;
        box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    }

    body.mobile-ready .dashboard-card.dashboard-actions {
        padding: 0;
    }

    /* timerkaart: knoppen op volle breedte onder de tijd */
    body.mobile-ready .dashboard-timer-time {
        font-size: 26px;
    }

    body.mobile-ready .dashboard-timer-actions {
        width: 100%;
    }

        body.mobile-ready .dashboard-timer-actions .btn {
            flex: 1 1 0;
            justify-content: center;
            min-height: 44px;
        }

        /* "Verderzetten: klant · project" krijgt een eigen rij, "Timer starten" eronder */
        body.mobile-ready .dashboard-timer-actions .dashboard-timer-continue {
            flex: 1 1 100%;
            max-width: 100%;
        }

    body.mobile-ready a.dashboard-action {
        grid-template-columns: 34px minmax(0, 1fr) 12px;
        padding: 10px 14px;
    }

    body.mobile-ready .dashboard-action-icon {
        display: none;
    }

    body.mobile-ready .dashboard-action-count {
        text-align: left;
    }

    body.mobile-ready .dashboard-action-title,
    body.mobile-ready .dashboard-action-meta {
        white-space: normal;
    }


    body.mobile-ready .dashboard-kpi-value {
        font-size: 19px;
    }

    body.mobile-ready .dashboard-section-label .wf-segmented {
        display: flex;
        width: 100%;
    }

        body.mobile-ready .dashboard-section-label .wf-segmented > button {
            flex: 1 1 0;
        }

    body.mobile-ready .dashboard-row {
        gap: 10px;
        margin-top: 10px;
    }

        body.mobile-ready .dashboard-row > .dashboard-side {
            gap: 10px;
        }

        /* werkband: "Mijn taken" onder "Te doen", label tegen de kaart */
        body.mobile-ready .dashboard-row.dashboard-work > .dashboard-side {
            gap: 0;
        }

        body.mobile-ready .dashboard-work > .dashboard-side > .dashboard-section-label {
            margin-top: 12px;
        }

    body.mobile-ready .dashboard-hbar {
        grid-template-columns: 84px minmax(0, 1fr) 84px;
    }

    body.mobile-ready .dashboard-figures {
        gap: 6px 18px;
        margin-bottom: 10px;
    }

    body.mobile-ready .dashboard-bars,
    body.mobile-ready .dashboard-xaxis {
        gap: 3px;
    }

    body.mobile-ready .dashboard-xaxis span {
        font-size: 10px;
    }

    body.mobile-ready .dashboard-table td,
    body.mobile-ready .dashboard-table th {
        padding: 8px 6px;
    }

    body.mobile-ready .dashboard-tasks .dashboard-task-actions .btn {
        min-width: 40px;
        min-height: 40px;
    }

    body.mobile-ready .task-container .quickactions {
        display: block !important;
        margin-left: 0;
    }

        body.mobile-ready .task-container .quickactions .btn {
            min-width: 40px;
            min-height: 40px;
            margin-bottom: 6px;
        }

    /* ---------- Takenoverzicht (kaarten) ---------- */

    /* Prioriteit als accentbalk links (zelfde vorm als .list-card-late), voltooid wat lichter */
    body.mobile-ready .task-card.is-prio-high {
        box-shadow: inset 3px 0 0 #ed5565;
    }

    body.mobile-ready .task-card.is-prio-medium {
        box-shadow: inset 3px 0 0 #f8ac59;
    }

    body.mobile-ready .task-card.is-completed .list-card-link {
        opacity: 0.7;
    }

    body.mobile-ready .task-card-overdue {
        color: var(--wf-danger-ink);
        font-weight: 600;
    }

    body.mobile-ready .task-card-done {
        color: var(--wf-success-ink);
    }

    /* Schakelaars: een lijstje in een witte kaart, tekst links en de schakelaar rechts (.wf-toggle uit style.css) */
    body.mobile-ready .task-filters {
        margin-top: 10px;
        border: 1px solid var(--wf-border-strong);
        border-radius: 12px;
        background-color: #fff;
        overflow: hidden;
    }

        body.mobile-ready .task-filters > .wf-toggle {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            height: auto;
            min-height: 44px;
            padding: 10px 14px;
            border: 0;
            border-radius: 0;
            font-size: 14px;
            white-space: normal;
        }

            body.mobile-ready .task-filters > .wf-toggle + .wf-toggle {
                border-top: 1px solid var(--wf-border);
            }

        body.mobile-ready .task-filter-text {
            order: -1;
            flex: 1;
            min-width: 0;
            overflow-wrap: anywhere;
        }

    /* ---------- Abonnement: gekoppelde producten als kaarten ----------
         [Product                   ]
         [Aantal] [Vaste prijs] [Eenheidsprijs]
         [                  acties  ] */
    body.mobile-ready .stack-subprod > tbody > tr:not(.stack-plain) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "prod prod  prod"
            "qty  fixed unit"
            "act  act   act";
    }

    body.mobile-ready .stack-subprod td.sa-prod {
        grid-area: prod;
        font-weight: 600;
    }

    body.mobile-ready .stack-subprod td.sa-qty { grid-area: qty; }
    body.mobile-ready .stack-subprod td.sa-fixed { grid-area: fixed; }
    body.mobile-ready .stack-subprod td.sa-unit { grid-area: unit; }
    body.mobile-ready .stack-subprod td.sa-actions { grid-area: act; }

    body.mobile-ready .stack-subprod td.sa-fixed input[type=checkbox] {
        display: block;
        width: 22px;
        height: 22px;
        margin: 9px 0 0 0;
    }
}
/* ===== /MODULE: account ===== */

/* ===== MODULE: masterdata ===== */
/* Klanten, leveranciers, techniekers, regio's, projectkosten, eigenschappen, gebruikers, audit */
@media (max-width: 767px) {

    /* Filter/zoekkolommen (col-lg-*) staan onder elkaar: kleine tussenruimte */
    body.mobile-ready .md-gap {
        margin-bottom: 10px;
    }

        body.mobile-ready .md-gap > .form-group {
            margin-bottom: 0;
        }

    /* Knoppenbalk naast een zoekveld: links uitgelijnd en wrapt */
    body.mobile-ready .md-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        text-align: left;
        margin-bottom: 10px;
    }

        body.mobile-ready .md-toolbar > .btn,
        body.mobile-ready .md-toolbar > .btn-group {
            margin: 0;
        }

    /* ---------- Gedeelde regels voor de kaarttabellen van deze module ---------- */

    body.mobile-ready .stack-subscriptions > colgroup,
    body.mobile-ready .stack-contacts > colgroup,
    body.mobile-ready .stack-custtech > colgroup,
    body.mobile-ready .stack-supplier-products > colgroup {
        display: none;
    }

    /* .text-right / .text-center van de desktoptabel: in een kaart links uitlijnen, lange tekst wrapt */
    body.mobile-ready .stack-subscriptions > tbody > tr > td,
    body.mobile-ready .stack-contacts > tbody > tr > td,
    body.mobile-ready .stack-addresses > tbody > tr > td,
    body.mobile-ready .stack-customer-sales > tbody > tr > td,
    body.mobile-ready .stack-custtech > tbody > tr > td,
    body.mobile-ready .stack-supplier-products > tbody > tr > td,
    body.mobile-ready .stack-audit-email > tbody > tr > td,
    body.mobile-ready .stack-audit-subs > tbody > tr > td {
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    /* Open-/actieknoppen in een kaart */
    body.mobile-ready .stack-subscriptions td.sa-actions .btn,
    body.mobile-ready .stack-contacts td.stack-action .btn,
    body.mobile-ready .stack-addresses td.stack-action .btn,
    body.mobile-ready .stack-supplier-products td.sa-open .btn,
    body.mobile-ready .stack-audit-email td.sa-view .btn,
    body.mobile-ready .stack-audit-subs td.sa-view .btn {
        min-width: 40px;
        min-height: 38px;
    }

    /* Klant: abonnementen
         [Omschrijving            ]
         [Bedrag     ] [Periode   ]
         [Van        ] [Tot       ]
         [Laatst gegenereerd      ]
         [                 acties ] */
    body.mobile-ready .stack-subscriptions > tbody > tr:not(.stack-plain) {
        grid-template-areas:
            "desc    desc"
            "amount  period"
            "from    to"
            "last    last"
            "actions actions";
    }

    body.mobile-ready .stack-subscriptions td.sa-desc { grid-area: desc; font-weight: 600; }
    body.mobile-ready .stack-subscriptions td.sa-amount { grid-area: amount; }
    body.mobile-ready .stack-subscriptions td.sa-period { grid-area: period; }
    body.mobile-ready .stack-subscriptions td.sa-from { grid-area: from; }
    body.mobile-ready .stack-subscriptions td.sa-to { grid-area: to; }
    body.mobile-ready .stack-subscriptions td.sa-last { grid-area: last; }

    body.mobile-ready .stack-subscriptions td.sa-actions {
        grid-area: actions;
        text-align: right !important;
    }

    /* Klant: modal "Nieuw adres", de keuzevakjes onder elkaar */
    body.mobile-ready #customerAddressModal .address-checks {
        grid-template-columns: 1fr;
    }

    /* Klant: contacten, naam vet; adressen idem */
    body.mobile-ready .stack-contacts > tbody > tr > td.stack-action,
    body.mobile-ready .stack-addresses > tbody > tr > td.stack-action {
        text-align: right !important;
    }

    /* Klant: verkopen (facturen, orders, offertes, servicerapporten)
         [Nummer   ] [Bedrag]
         [Datum    ] [Status]
         [Referentie        ] */
    body.mobile-ready .stack-customer-sales > tbody > tr:not(.stack-plain):not(.stack-total):not(.wf-state) {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "doc  amount"
            "date status"
            "ref  ref";
    }

    body.mobile-ready .stack-customer-sales td.sa-doc { grid-area: doc; font-weight: 600; }
    body.mobile-ready .stack-customer-sales td.sa-date { grid-area: date; }
    body.mobile-ready .stack-customer-sales td.sa-ref { grid-area: ref; }
    body.mobile-ready .stack-customer-sales td.sa-status { grid-area: status; }

    body.mobile-ready .stack-customer-sales td.sa-amount,
    body.mobile-ready .stack-customer-sales td.sa-status {
        text-align: right !important;
    }

    body.mobile-ready .stack-customer-sales td.sa-amount { grid-area: amount; }

    /* Klant: korting, de kop staat onder elkaar (titel, zoekveld): geen negatieve marge */
    body.mobile-ready .customer-discounts-via {
        margin: 6px 0 12px;
    }

    /* Klant: afwijkend uurtarief per technieker
         [Technieker              ]
         [Uurtarief         ] [x] */
    body.mobile-ready .stack-custtech > tbody > tr:not(.stack-plain) {
        grid-template-columns: 1fr 44px;
        grid-template-areas:
            "tech tech"
            "rate delete";
    }

    body.mobile-ready .stack-custtech td.sa-tech { grid-area: tech; }
    body.mobile-ready .stack-custtech td.sa-rate { grid-area: rate; }

    /* Leverancier: gekoppelde producten
         [Categorie > Product  ] [oog]
         [Aankoopprijs            ] */
    body.mobile-ready .stack-supplier-products > tbody > tr {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name  open"
            "price price";
    }

    body.mobile-ready .stack-supplier-products td.sa-name { grid-area: name; }
    body.mobile-ready .stack-supplier-products td.sa-price { grid-area: price; }

    body.mobile-ready .stack-supplier-products td.sa-open {
        grid-area: open;
        align-self: start;
    }

    /* Audit: uitgaande e-mails
         [Datum        ] [oog]
         [Klant            ]
         [Document - tekst ]
         [Gebruiker        ] */
    body.mobile-ready .stack-audit-email > tbody > tr:not(.stack-plain) {
        grid-template-columns: 1fr 44px;
        grid-template-areas:
            "date view"
            "cust cust"
            "text text"
            "user user";
    }

    body.mobile-ready .stack-audit-email td.sa-date { grid-area: date; }
    body.mobile-ready .stack-audit-email td.sa-cust { grid-area: cust; }
    body.mobile-ready .stack-audit-email td.sa-text { grid-area: text; }
    body.mobile-ready .stack-audit-email td.sa-user { grid-area: user; }

    body.mobile-ready .stack-audit-email td.sa-view {
        grid-area: view;
        text-align: right !important;
    }

    /* Audit: klantabonnementen
         [Omschrijving         ] [oog]
         [Klant                     ]
         [Start     ] [Einde        ]
         [Laatste   ] [Volgende     ] */
    body.mobile-ready .stack-audit-subs > tbody > tr:not(.stack-plain) {
        grid-template-columns: 1fr 1fr 44px;
        grid-template-areas:
            "desc  desc  view"
            "cust  cust  cust"
            "start end   ."
            "last  next  .";
    }

    body.mobile-ready .stack-audit-subs td.sa-desc { grid-area: desc; }
    body.mobile-ready .stack-audit-subs td.sa-cust { grid-area: cust; }
    body.mobile-ready .stack-audit-subs td.sa-start { grid-area: start; }
    body.mobile-ready .stack-audit-subs td.sa-end { grid-area: end; }
    body.mobile-ready .stack-audit-subs td.sa-last { grid-area: last; }
    body.mobile-ready .stack-audit-subs td.sa-next { grid-area: next; }

    body.mobile-ready .stack-audit-subs td.sa-view {
        grid-area: view;
        text-align: right !important;
    }

    /* Financieel jaaroverzicht: breed, dus horizontaal scrollen met vaste eerste kolom (jaar) */
    body.mobile-ready .md-sticky-first td,
    body.mobile-ready .md-sticky-first th {
        white-space: nowrap;
    }

        body.mobile-ready .md-sticky-first td:first-child,
        body.mobile-ready .md-sticky-first th:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08);
        }

        body.mobile-ready .md-sticky-first td:first-child {
            background-color: #fff;
        }

        body.mobile-ready .md-sticky-first tr.md-total-row > td:first-child {
            background-color: #f1f1f1;
        }

        /* de desktopstijl (wf-table, navy wf-title/wf-num) niet op telefoon: blauwe kop, grijze totaalrij, vet */
        body.mobile-ready .md-sticky-first > thead > tr > th {
            background-color: #d7e5f3;
        }

        body.mobile-ready .md-sticky-first tr.md-total-row > td {
            background-color: #f1f1f1;
        }

        body.mobile-ready .md-sticky-first .wf-title,
        body.mobile-ready .md-sticky-first .wf-num {
            color: inherit;
            font-weight: 700;
        }

    /* Gebruikersrechten (rechtenmatrix): elke module een kaart; module + teller, snelkeuze, de drie vaste rechten
       naast elkaar met hun naam, dan de chips en de deelrechten. Een kolom die de module niet heeft, verdwijnt. */
    body.mobile-ready .user-perm-toolbar > .wf-search {
        flex: 1 1 100%;
    }

    body.mobile-ready .user-perm-block {
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--wf-border-strong);
        border-radius: var(--wf-radius-lg);
        background: #fff;
    }

    body.mobile-ready .user-perm-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
    }

    /* deelrechten: geen eigen naam, de vakjes dragen de volledige omschrijving ("Prijzen bekijken") */
    body.mobile-ready .user-perm-sub {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--wf-border);
    }

        body.mobile-ready .user-perm-sub > .user-perm-sub-name {
            display: none;
        }

    body.mobile-ready .user-perm-module,
    body.mobile-ready .user-perm-extras {
        flex: 1 1 100%;
    }

    body.mobile-ready .user-perm-level.is-empty,
    body.mobile-ready .user-perm-cell.is-empty,
    body.mobile-ready .user-perm-extras.is-empty {
        display: none;
    }

    body.mobile-ready .user-perm-level .wf-segmented {
        display: flex;
    }

    body.mobile-ready .user-perm-level {
        flex: 1 1 100%;
    }

        body.mobile-ready .user-perm-level .wf-segmented > button {
            flex: 1 1 0;
        }

    body.mobile-ready .user-perm-check {
        min-height: 32px;
        font-size: 13px;
    }

    /* Klantengroep-modal: geconfigureerde quotienten niet in een vaste hoogte van 500px */
    body.mobile-ready .md-quotients {
        height: auto !important;
        max-height: 260px;
        overflow-y: auto;
    }
}
@media (max-width: 767px) {
    /* Abonnementsnaam als titel van de kaart (op desktop gewone tekst) */
    body.mobile-ready .stack-audit-subs td.sa-desc {
        font-weight: 700;
    }
}
/* ===== /MODULE: masterdata ===== */

/* ===== MODULE: products-settings ===== */
/*
 * Producten (Views/Product/*) en Instellingen (Views/Setting/*).
 * Eigen class-namen: ps-*, psa-* (grid-area van een td), stack-ps-* (kaartlayout per tabel),
 * product-*, mail-*.
 */
@media (max-width: 767px) {

    /* ---------- Algemeen ---------- */

    /* col-xs-N dat op telefoon op een eigen lijn hoort (bv. een col-xs-6 met een datumveld) */
    body.mobile-ready .ps-full {
        float: none;
        width: 100%;
    }

    /* ---------- Productoverzicht ---------- */

    /* Zoekbalk-knoppen: "Filters" en "Nieuw" naast elkaar op volle breedte */
    body.mobile-ready .product-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
        text-align: left;
    }

        body.mobile-ready .product-actions > .btn,
        body.mobile-ready .product-actions > .btn-group {
            flex: 1 1 0;
            margin: 0;
        }

            /* knop met keuzemenu (bv. "Nieuw" bij klanten) vult zijn helft */
            body.mobile-ready .product-actions > .btn-group > .btn {
                width: 100%;
            }

        body.mobile-ready .product-actions .badge {
            display: inline-block;
            width: auto;
            min-width: 20px;
            margin-left: 4px;
            padding: 3px 7px;
        }

    /* Filters + groepenboom: ingeklapt achter de Filters-knop (class filters-open via ng-class) */
    body.mobile-ready .product-filters {
        display: none;
        margin-bottom: 12px;
        padding: 10px 12px;
        border: 1px solid #e7eaec;
        border-radius: 6px;
        background-color: #fafafa;
    }

        body.mobile-ready .product-filters.filters-open {
            display: block;
        }

        body.mobile-ready .product-filters > h4:first-child {
            display: none;
        }

        /* Het grijze zijpaneel (wf-side-panel) niet nog eens binnen het filtervak */
        body.mobile-ready .product-filters .wf-side-panel {
            padding: 0;
            border: 0;
            background: none;
        }

        /* Schakelaars: label links, toggle rechts, een per rij (tikvriendelijk) */
        body.mobile-ready .product-filters .switch.wf-switch-row {
            display: flex;
            width: auto;
            margin: 0;
            padding: 10px 2px;
            border-bottom: 1px solid #eef0f3;
            border-radius: 0;
        }

            body.mobile-ready .product-filters .switch.wf-switch-row > label:first-child {
                font-size: 15px;
            }

    body.mobile-ready .product-filters-close {
        margin-top: 14px;
    }

    /* Paginabalk van server-gepagineerde overzichten (Views/Shared/_ListPager.cshtml, .product-pager), in de stijl van
       .wf-list-pager: "1-25 van 842" links, paginagrootte als segmentknop rechts, ‹ 3 / 34 › gecentreerd eronder */
    body.mobile-ready .product-pager {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        margin: 12px 0 0 0;
    }

        body.mobile-ready .product-pager::before,
        body.mobile-ready .product-pager::after {
            display: none;
        }

        body.mobile-ready .product-pager > [class*="col-"] {
            float: none;
            width: auto;
            padding-left: 0;
            padding-right: 0;
        }

        body.mobile-ready .product-pager > :nth-child(1) {
            order: 1;
            flex: 1 1 auto;
            min-width: 0;
        }

            body.mobile-ready .product-pager > :nth-child(1) small {
                font-size: 12px;
                color: var(--wf-muted);
            }

        body.mobile-ready .product-pager > :nth-child(3) {
            order: 2;
            flex: 0 0 auto;
        }

        body.mobile-ready .product-pager > :nth-child(2) {
            order: 3;
            flex: 1 0 100%;
        }

        body.mobile-ready .product-pager .pagination {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

            body.mobile-ready .product-pager .pagination > li > a,
            body.mobile-ready .product-pager .pagination > li > span {
                float: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 44px;
                height: 40px;
                margin: 0;
                padding: 0 10px;
                border: 1px solid var(--wf-border-strong);
                border-radius: var(--wf-radius) !important;
                background: #fff;
                color: var(--wf-navy);
                font-size: 16px;
                font-weight: 600;
                font-variant-numeric: tabular-nums;
            }

            body.mobile-ready .product-pager .pagination > .disabled > a {
                border-color: var(--wf-border);
                background: var(--wf-surface);
                color: var(--wf-faint);
            }

            /* "3 / 34" is ook een disabled li, maar gewoon leesbare tekst tussen de pijlen */
            body.mobile-ready .product-pager .pagination > .disabled.visible-xs > span {
                min-width: 72px;
                border-color: transparent;
                background: transparent;
                color: var(--wf-text);
                font-size: 14px;
            }

        /* Paginagrootte: segmentknop (zelfde vorm als .wf-segmented), nooit over twee lijnen */
        body.mobile-ready .product-pager .btn-group {
            display: inline-flex;
            flex-wrap: nowrap;
            padding: 2px;
            border: 1px solid var(--wf-border-strong);
            border-radius: var(--wf-radius);
            background: #fff;
        }

            body.mobile-ready .product-pager .btn-group > .btn {
                float: none;
                flex: 0 0 auto;
                min-width: 38px !important; /* inline min-width is de breedte van 3 cijfers op desktop */
                height: 32px;
                min-height: 32px;
                margin: 0;
                padding: 0 7px !important;
                border: 0;
                border-radius: 6px !important;
                background: transparent;
                box-shadow: none;
                color: var(--wf-muted);
                font-size: 13px;
                font-weight: 600;
            }

                body.mobile-ready .product-pager .btn-group > .btn.active {
                    background: var(--wf-cyan-soft);
                    color: var(--wf-navy);
                }

    /* Productkaart (naast het overzichtstabel dat op telefoon verborgen is) */
    body.mobile-ready .list-card-link.product-card-link {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        body.mobile-ready .list-card-link.product-card-link > div + div {
            margin-top: 0;
        }

    body.mobile-ready .product-card-img {
        flex: 0 0 48px;
        width: 48px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid #eef0f1;
        border-radius: 4px;
        background-color: #fff;
        color: #c5c9cc;
        font-size: 20px;
    }

        body.mobile-ready .product-card-img img {
            max-width: 100%;
            max-height: 100%;
        }

    body.mobile-ready .product-card-body {
        flex: 1 1 auto;
        min-width: 0;
    }

        body.mobile-ready .product-card-body > div + div {
            margin-top: 3px;
        }

        body.mobile-ready .product-card-body .list-card-title {
            overflow-wrap: anywhere;
        }

        body.mobile-ready .product-card-body .label {
            display: inline-block;
            white-space: normal;
            text-align: left;
        }

    body.mobile-ready .product-card-figures {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        column-gap: 10px;
        margin-top: 6px;
    }

    body.mobile-ready .product-card-price {
        white-space: nowrap;
    }

    /* ---------- Productdetail en instellingen: tabbladen ---------- */

    body.mobile-ready .product-detail-page .tab-content > .tab-pane > .panel-body,
    body.mobile-ready .settings-page .tab-content > .tab-pane > .panel-body {
        padding: 12px 6px;
    }

    /* Label + selectievakje (col-md-8 + col-md-4 in een input-group) op een lijn */
    body.mobile-ready .product-detail-page .input-group > label[class*="col-md-"],
    body.mobile-ready .product-detail-page .input-group > div[class*="col-md-"] {
        display: inline-block;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    body.mobile-ready .product-detail-page .input-group > label[class*="col-md-"] {
        margin-right: 10px;
    }

    body.mobile-ready .product-detail-page .ps-promos {
        border-left: none;
    }

    /* "Historiek" + toevoegknop op een lijn zonder dat de knop uit beeld loopt */
    body.mobile-ready .ps-head-title {
        width: 50%;
    }

    body.mobile-ready .ps-head-action {
        width: 50%;
    }

    /* ---------- Groepen en product-modals ---------- */

    /* De "toevoegen" modal heeft een inline top: 150px die het bottom sheet zou uitrekken */
    body.mobile-ready #addQuotientModal .modal-dialog {
        top: auto !important;
    }

    body.mobile-ready #editModal .ibox-content {
        min-height: 0 !important;
    }

    /* ---------- Tabellen als kaarten (gedeeld door alle stack-ps-* tabellen) ---------- */

    body.mobile-ready table[class*="stack-ps-"] > colgroup {
        display: none;
    }

    /* inline breedtes (bv. width: 100px) horen niet in een kaart */
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td[style*="width"] {
        width: auto !important;
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr.stack-total {
        gap: 14px;
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-name {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-act {
        text-align: right !important;
        white-space: nowrap;
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-remark,
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-group {
        color: #676a6c;
        overflow-wrap: anywhere;
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-file {
        overflow-wrap: anywhere;
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-img img {
        max-width: 100%;
        max-height: 64px;
    }

    /* grid-area per celtype (de tabelklassen hieronder bepalen welke gebruikt worden) */
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-name { grid-area: name; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-act { grid-area: act; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-del { grid-area: del; align-self: end; text-align: right !important; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-qty { grid-area: qty; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-fixed { grid-area: fixed; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-stock { grid-area: stock; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-ap { grid-area: ap; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-vp { grid-area: vp; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-minm { grid-area: minm; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-sap { grid-area: sap; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-svp { grid-area: svp; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-marge { grid-area: marge; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-price { grid-area: price; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-start { grid-area: start; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-end { grid-area: end; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-img { grid-area: img; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-brand { grid-area: brand; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-desc { grid-area: desc; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-group { grid-area: group; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-file { grid-area: file; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-size { grid-area: size; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-date { grid-area: date; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-user { grid-area: user; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-move { grid-area: move; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-nl { grid-area: nl; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-fr { grid-area: fr; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-doc { grid-area: doc; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-cust { grid-area: cust; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-code { grid-area: code; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-remark { grid-area: remark; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-off { grid-area: off; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-ord { grid-area: ord; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-inv { grid-area: inv; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-pct { grid-area: pct; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-show { grid-area: show; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-c1 { grid-area: c1; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-c2 { grid-area: c2; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-c3 { grid-area: c3; }
    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-c4 { grid-area: c4; }

    /* Kaartlayouts. Rij zonder kaartopmaak (.stack-plain) en totaalrij (.stack-total) blijven met rust. */

    /* 4 velden in 2 x 2 (kortingen via klantengroep) */
    body.mobile-ready .stack-ps-2x2 > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "c1 c2"
            "c3 c4";
    }

    /* Promoties:  [Prijs        ] [bewerk]
                   [Start ] [Einde       ] */
    body.mobile-ready .stack-ps-promos > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr 44px;
        grid-template-areas:
            "price price act"
            "start end   end";
    }

    /* Stockinformatie samengestelde producten */
    body.mobile-ready .stack-ps-substock > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr 44px;
        grid-template-areas:
            "name  name  act"
            "stock qty   qty";
    }

    /* Stockhistoriek en openstaande bestellingen */
    body.mobile-ready .stack-ps-stocklist > tbody > tr:not(.stack-plain):not(.stack-total),
    body.mobile-ready .stack-ps-futurestock > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1.3fr 0.8fr 1.1fr 40px;
        grid-template-areas:
            "date qty price act"
            "remark remark remark remark";
    }

    /* Leveranciers */
    body.mobile-ready .stack-ps-suppliers > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "name  name"
            "price date"
            "act   act";
    }

    /* Bijlages (product en groep) */
    body.mobile-ready .stack-ps-attach > tbody > tr:not(.stack-plain):not(.stack-total),
    body.mobile-ready .stack-ps-gattach > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "file file"
            "size date"
            "user user"
            "move act";
    }

    /* Eigenschappen:  [Naam        ] [pijlen] [x]
                       [Nederlands            ]
                       [Frans                 ] */
    body.mobile-ready .stack-ps-properties > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr auto auto;
        align-items: center;
        grid-template-areas:
            "name move del"
            "nl   nl   nl"
            "fr   fr   fr";
    }

    body.mobile-ready .stack-ps-properties td.psa-del {
        align-self: center;
    }

    /* Verkopen: [Document     ] [Totaal]      Open orders: [Order    ] [Aantal]
                 [Datum] [Aantal] [Stukprijs]                [Datum + ouderdom  ]
                 [Klant                    ]                 [Klant             ] */
    body.mobile-ready .stack-ps-sales > tbody > tr:not(.stack-plain):not(.stack-total):not(.wf-state) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "doc  doc  total"
            "date qty  price"
            "cust cust cust";
    }

    body.mobile-ready .stack-ps-openorders > tbody > tr:not(.stack-plain):not(.stack-total):not(.wf-state) {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "doc  qty"
            "date date"
            "cust cust";
    }

    body.mobile-ready table[class*="stack-ps-"] > tbody > tr > td.psa-total { grid-area: total; }

    /* Verkoopcijfers (product en klant, .wf-figures): 2 x 2, keuzeknoppen en zoekveld volle breedte onder de titel */
    body.mobile-ready .wf-figures {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.mobile-ready .wf-figure-value {
        font-size: 18px;
    }

    body.mobile-ready .wf-card-switch,
    body.mobile-ready .wf-card-search {
        margin: 8px 0 4px;
    }

    body.mobile-ready .product-sales-hint {
        margin: 0 0 8px;
    }

    /* Subproducten (bewerkbaar):
         [Product                 ] [acties]
         [Aantal ] [VP prijs] [Stock]
         [AP     ] [VP     ] [Min.marge]
         [Sub AP ] [Sub VP ] [Marge ] */
    body.mobile-ready .stack-ps-subproducts > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "name  name  act"
            "qty   fixed stock"
            "ap    vp    minm"
            "sap   svp   marge";
    }

    /* Product is onderdeel van ... */
    body.mobile-ready .stack-ps-linked > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 44px;
        grid-template-areas:
            "name  act"
            "group group"
            "price price";
    }

    /* Gerelateerde producten:  [foto] [Merk           ] [acties]
                                [foto] [Omschrijving   ] [      ]
                                [foto] [Groep          ] [      ] */
    body.mobile-ready .stack-ps-related > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas:
            "img brand act"
            "img desc  act"
            "img group act";
    }

    /* Virtuele groepen: [selectie / naam] [knop] (rijen zonder grid-area vullen zichzelf aan) */
    body.mobile-ready .stack-ps-vgroups > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

        body.mobile-ready .stack-ps-vgroups > tbody > tr > td:last-child {
            text-align: right;
        }

    /* Bestellijnen (product/order) */
    body.mobile-ready .stack-ps-orderlines > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 64px 1fr 1fr;
        grid-template-areas:
            "img name  name"
            "qty price act";
    }

    body.mobile-ready .stack-ps-orderlines td.psa-act {
        align-self: end;
    }

    /* Prijsconfiguratie van een productgroep (korting / markup) */
    body.mobile-ready .stack-ps-quot > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr 1fr 44px;
        grid-template-areas:
            "name name del"
            "pct  show show";
    }

    /* Standaardteksten:  [Titel                 ] [bewerk] [x]
                          [Code ] [Offerte] [Order] [Factuur] */
    body.mobile-ready .stack-ps-deftext > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
        grid-template-areas:
            "name name act  act"
            "code off  ord  inv";
    }

    /* Landen */
    body.mobile-ready .stack-ps-countries > tbody > tr:not(.stack-plain):not(.stack-total) {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name act"
            "code act";
    }

    /* ---------- Instellingen ---------- */

    /* E-mailsjablonen: elke sectie (Facturen, Offertes, ...) inklapbaar achter zijn titel.
       De kop krijgt class mail-open via ng-class; de drie elementen erna (NL, FR, bewaren) verdwijnen als hij dicht is. */
    body.mobile-ready .mail-head {
        cursor: pointer;
        border-bottom: 1px solid #e7eaec;
        margin-bottom: 8px;
        user-select: none;
    }

        body.mobile-ready .mail-head h3 {
            margin-top: 8px;
            margin-bottom: 8px;
            font-size: 16px;
        }

            body.mobile-ready .mail-head h3::after {
                content: "";
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-left: 10px;
                vertical-align: middle;
                border-right: 2px solid #676a6c;
                border-bottom: 2px solid #676a6c;
                transform: rotate(45deg);
                transition: transform .2s;
            }

        body.mobile-ready .mail-head.mail-open h3::after {
            transform: rotate(-135deg);
        }

        body.mobile-ready .mail-head:not(.mail-open) + .mail-nl,
        body.mobile-ready .mail-head:not(.mail-open) + .mail-nl + .mail-fr,
        body.mobile-ready .mail-head:not(.mail-open) + .mail-nl + .mail-fr + .mail-save {
            display: none;
        }

}
/* ===== /MODULE: products-settings ===== */

/* ===== MODULE: shared-modals ===== */
/* Binnenwerk van de gedeelde directive-modals (Scripts/angularapp/Directives/*) en Views/Shared/_*Modal.cshtml.
   De sheet zelf (positie, footer, handvat) komt uit "Modals als bottom sheet" hierboven. */

@media (min-width: 768px) {
    /* Veiligheid: na in-/uitklappen op een telefoon blijft de class "collapse" op de groepenboom staan;
       bij roteren naar >= 768px moet de boom (zonder knop) zichtbaar blijven. Nooit actief bij het eerste openen. */
    #productGroupTree.collapse:not(.in),
    #customerGroupList.collapse:not(.in) {
        display: block;
    }
}

@media (max-width: 767px) {

    /* ---------- Zoek-/keuzemodals: geen extra zijpadding van col-md-* in een form zonder .row ---------- */

    body.mobile-ready #searchCustomerModal .modal-body form > [class*="col-md-"],
    body.mobile-ready #searchProductModal .modal-body form > [class*="col-md-"],
    body.mobile-ready #stockselectmodal .modal-body form > [class*="col-md-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* Klant zoeken: sheet springt niet op en neer terwijl resultaten binnenkomen, rijen zijn tikvriendelijk */
    body.mobile-ready #searchCustomerModal .modal-content {
        min-height: 60vh;
        min-height: 60dvh;
    }

    body.mobile-ready #searchCustomerModal .wf-split-side {
        margin-bottom: 10px;
    }

    /* Klantengroepen achter een knop (Bootstrap collapse, zie CustomerSearch.html) */
    body.mobile-ready #customerGroupList:not(.in):not(.collapsing) {
        display: none;
    }

    body.mobile-ready #customerGroupList {
        margin-top: 8px;
    }

    body.mobile-ready #customerGroupList.in {
        max-height: 40vh;
        overflow-y: auto;
    }

    body.mobile-ready #customerGroupList .wf-nav-list > li > button {
        padding: 10px 8px; /* tikvriendelijk */
        font-size: 14px;
    }

    /* Resultaten als kaarten (table-stack): naam + gemeente bovenaan, groep/btw/telefoon eronder */
    body.mobile-ready #searchCustomerModal .table-responsive {
        border: 0;
        margin-bottom: 10px;
    }

    body.mobile-ready #searchCustomerModal #contacts {
        border: 0;
        margin-bottom: 0;
    }

    body.mobile-ready #contacts > tbody > tr:not(.stack-plain) {
        cursor: pointer;
    }

    body.mobile-ready #contacts > tbody > tr.selectedRow > td::before {
        color: #676a6c;
    }

    body.mobile-ready #contacts > tbody > tr.wf-state > td {
        padding: 32px 12px;
        text-align: center;
        color: var(--wf-muted);
    }

        body.mobile-ready #contacts > tbody > tr.wf-state > td > .fa {
            display: block;
            margin-bottom: 8px;
            font-size: 20px;
            color: #cfd6de;
        }

    /* ---------- Product zoeken ---------- */

    body.mobile-ready #searchProductModal .col-md-2 {
        margin-bottom: 10px;
    }

    /* Groepenboom achter een knop (Bootstrap collapse, zie ProductSearch.html) */
    body.mobile-ready #productGroupTree:not(.in):not(.collapsing) {
        display: none;
    }

    body.mobile-ready #productGroupTree {
        margin-top: 8px;
    }

    body.mobile-ready #productGroupTree.in {
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Resultaten als kaarten (table-stack): omschrijving en prijs/stock onder elkaar */
    body.mobile-ready #searchProductModal .table-responsive {
        border: 0;
        margin-bottom: 10px;
    }

    body.mobile-ready #searchProductModal #products {
        border: 0;
        margin-bottom: 0;
    }

    body.mobile-ready #products > tbody > tr > td {
        line-height: 1.4 !important;
        white-space: normal; /* Bootstrap zet nowrap op cellen in .table-responsive */
        overflow-wrap: anywhere;
    }

    body.mobile-ready #products > tbody > tr:not(.stack-plain) {
        cursor: pointer;
    }

    body.mobile-ready #products > tbody > tr > td:nth-child(2) {
        font-weight: 600;
    }

    /* Geselecteerde kaart: zie de algemene regel voor tr.selectedRow bij .table-stack */
    body.mobile-ready #products > tbody > tr.selectedRow > td::before {
        color: #676a6c;
    }

    /* Pijltjes met "1 / 5" (wf-pager, opmaak in style.css) gecentreerd onder de kaarten */
    body.mobile-ready .wf-pager {
        justify-content: center;
        margin-top: 4px;
    }

    /* ---------- Stock kiezen ---------- */

    body.mobile-ready #stockselectmodal .modal-title {
        overflow-wrap: anywhere;
    }

    body.mobile-ready #stockselectmodal .wf-table-wrap table > tbody > tr:not(.wf-state) > td {
        padding: 12px 8px;
    }

    /* Bijlagen (document ondertekenen): de kop is th geworden voor de wf-table, op telefoon blijft hij niet vet zoals voorheen */
    body.mobile-ready #signdocumentmodal .wf-table > thead > tr > th {
        font-weight: normal;
    }

    /* ---------- Aankoopprijs bijwerken: label links boven het veld i.p.v. rechts uitgelijnd ---------- */

    body.mobile-ready #updatepricemodal label.control-label {
        text-align: left !important;
        padding-top: 0 !important;
    }

    /* ---------- Taak ---------- */

    body.mobile-ready #taskmodal input[type="datetime-local"] {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* Kleine iconlinks (verwijder link / toon details) groter om te tikken */
    body.mobile-ready #taskmodal a.tinybutton,
    body.mobile-ready #auditmodal a.tinybutton {
        display: inline-block;
        padding: 9px 12px;
    }

    /* ---------- Documentlijn bewerken (CommentModal, .wf-modal; opmaak in style.css) ---------- */

    /* Omschrijving iets hoger zodat lange teksten leesbaar zijn */
    body.mobile-ready #commentmodal #lineDescription {
        min-height: 64px;
    }

    /* Invoervelden steeds twee per rij */
    body.mobile-ready #commentmodal .line-inputs {
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }

    body.mobile-ready #commentmodal .line-calc {
        max-width: none;
        padding: 2px 14px;
    }

        /* toelichting ("via 40% korting") onder het label, het bedrag houdt zijn plaats rechts */
        body.mobile-ready #commentmodal .line-calc dt small {
            display: block;
            margin: 1px 0 0;
        }

    /* Gerelateerde producten: vaste kolommen (foto en omschrijving zijn hidden-xs), lange namen breken af */
    body.mobile-ready #commentmodal .wf-table {
        display: table;
        width: 100%;
        table-layout: fixed;
        margin-bottom: 0;
    }

        body.mobile-ready #commentmodal .wf-table > thead > tr > th,
        body.mobile-ready #commentmodal .wf-table > tbody > tr > td {
            padding: 8px 6px;
            white-space: normal;
            overflow-wrap: break-word;
            vertical-align: middle;
        }

        body.mobile-ready #commentmodal .wf-table .col-stock { width: 80px; }
        body.mobile-ready #commentmodal .wf-table .col-price { width: 92px; }

        body.mobile-ready #commentmodal .wf-table td .wf-muted {
            font-size: 11.5px;
            white-space: nowrap;
        }
        body.mobile-ready #commentmodal .wf-table .col-action { width: 48px; }

    /* ---------- Audit ---------- */

    body.mobile-ready #auditmodal .table-responsive {
        border: 0;
    }

    body.mobile-ready #auditmodal table.table-stack {
        width: 100% !important;
        margin-bottom: 0;
    }

    body.mobile-ready #auditmodal table.table-stack > tbody > tr > td {
        line-height: 1.4 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.mobile-ready #auditmodal .ibox-content > div {
        margin-left: 6px !important;
    }

    /* ---------- Versturen via email: bulk-kaartjes ---------- */

    /* klant en e-mail onder elkaar (naast elkaar blijft er van de klantnaam te weinig over) */
    body.mobile-ready #sendemailmodal .send-email-bulk-l2 {
        flex-direction: column;
        gap: 0;
    }

        body.mobile-ready #sendemailmodal .send-email-bulk-email::before,
        body.mobile-ready #sendemailmodal .send-email-bulk-missing::before {
            content: none;
        }

    /* ---------- Klant bewerken: contactpersonen ---------- */

    /* "Intracommunautair": vlottende col-xs-11 geeft een wrap-probleem op smalle schermen */
    body.mobile-ready #customerDetail .checkbox.col-xs-11 {
        float: none;
        width: auto;
        margin-left: 0;
    }

    /* Nieuwe contactpersoon: de 4 cellen (naam, email, telefoon, knop) onder elkaar */
    body.mobile-ready #customerDetail table.contact-add,
    body.mobile-ready #customerDetail table.contact-add > tbody,
    body.mobile-ready #customerDetail table.contact-add > tbody > tr,
    body.mobile-ready #customerDetail table.contact-add > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    body.mobile-ready #customerDetail table.contact-add colgroup {
        display: none;
    }

    body.mobile-ready #customerDetail .contactpersonen table.contact-add > tbody > tr > td {
        padding: 0 0 8px 0 !important;
        border-top: 0;
    }

    /* Bestaande contactpersonen: kaartje met naam, email, telefoon en rechts de verwijderknop */
    body.mobile-ready #customerDetail table.contact-list,
    body.mobile-ready #customerDetail table.contact-list > tbody {
        display: block;
        width: 100%;
    }

    body.mobile-ready #customerDetail table.contact-list colgroup {
        display: none;
    }

    body.mobile-ready #customerDetail table.contact-list > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2px 8px;
        padding: 8px 4px;
        border-top: 1px solid #e7eaec;
    }

    body.mobile-ready #customerDetail table.contact-list > tbody > tr > td {
        padding: 0 !important;
        width: auto !important;
        line-height: 1.5 !important;
        min-width: 0;
        overflow-wrap: anywhere;
        border: none;
    }

        body.mobile-ready #customerDetail table.contact-list > tbody > tr > td:empty {
            display: none;
        }

        body.mobile-ready #customerDetail table.contact-list > tbody > tr > td:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
            font-weight: 600;
        }

        body.mobile-ready #customerDetail table.contact-list > tbody > tr > td:nth-child(2) {
            grid-column: 1;
            grid-row: 2;
        }

        body.mobile-ready #customerDetail table.contact-list > tbody > tr > td:nth-child(3) {
            grid-column: 1;
            grid-row: 3;
        }

        body.mobile-ready #customerDetail table.contact-list > tbody > tr > td:nth-child(4) {
            grid-column: 2;
            grid-row: 1 / span 3;
            align-self: center;
        }

    /* ---------- Betaling (Views/Shared/_PaymentModal): geen 10% marge boven en geen animatie op de container ---------- */

    body.mobile-ready #PaymentModal {
        margin-top: 0 !important;
        animation: none !important;
    }

    /* ---------- Handtekeningveld: geen scroll/pull-to-refresh tijdens het tekenen met de vinger ---------- */

    body.mobile-ready .signature canvas {
        touch-action: none;
    }
}
/* ===== /MODULE: shared-modals ===== */

/* ===== MODULE: invoice ===== */
@media (max-width: 767px) {

    /* Betalingen op de factuur: kaart per betaling
         [Datum        ] [Bedrag]
         [Methode      ] [✎ 🗑  ] */
    body.mobile-ready .stack-payments {
        border: 0;
        margin-bottom: 0;
        overflow: visible;
    }

        body.mobile-ready .stack-payments > tbody > tr {
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "date   amount"
                "method act";
            align-items: center;
        }

        body.mobile-ready .stack-payments td.sa-pdate { grid-area: date; font-weight: 600; }
        body.mobile-ready .stack-payments td.sa-pmethod { grid-area: method; }
        body.mobile-ready .stack-payments td.sa-pamount { grid-area: amount; text-align: right; font-weight: 700; }
        body.mobile-ready .stack-payments td.sa-pact { grid-area: act; text-align: right; }

            body.mobile-ready .stack-payments td.sa-pact .btn {
                min-width: 40px;
                height: 40px;
            }

    /* Documentkop (ook offerte en order: _InvoiceInfo/_OfferInfo/_OrderInfo): type, datum en termijn even ver ingesprongen
       als de klantvelden erboven (de col-sm-12 in de form-group gaf er 15px bij) */
    body.mobile-ready .doc-info {
        margin-top: 12px;
    }

    /* min-height 90px (inline) is enkel om de klantkolom op desktop even hoog te houden; op telefoon gaf dat een leeg gat */
    body.mobile-ready .doc-customer {
        min-height: 0 !important;
    }

        body.mobile-ready .doc-info > .form-group {
            margin-left: -15px;
            margin-right: -15px;
        }

    /* Lijnen (ook offerte en order): zonder lijnen geen leeg grijs kader boven "Zoek een product" */
    body.mobile-ready .lines-wrap:not(:has(> table > tbody > tr)) {
        display: none;
    }

    /* Totalen (ook offerte en order, table.doc-totals): de kaart zelf staat in style.css ("Documentdetail");
       hier enkel wat de telefoon anders doet */
    body.mobile-ready .doc-totals {
        display: table !important; /* de algemene regel maakt van tabellen een scrollbaar blok */
        margin: 4px 0 12px;
        padding: 6px 14px;
    }

    /* Tabs (betaling, koppelingen, opmerkingen) worden inklapbare secties onder elkaar: .mobile-sections op de
       tabs-container, een button.mobile-section-head in elke tab-pane, ng-class section-open per pane.
       De tabbalk en de tab-picker uit mobile.js zijn hier dus overbodig. */
    body.mobile-ready .mobile-sections .nav-tabs,
    body.mobile-ready .mobile-sections .tab-picker {
        display: none !important;
    }

    /* .tabs-container.mobile-sections: specifieker dan de tab-picker-regel die elke tab-inhoud een eigen kader geeft.
       Dicht = de rij van .panel-body is 0fr (i.p.v. display:none), zodat open- en dichtklappen kan animeren
       (overgang in het "Beweging op telefoon"-blok); visibility houdt de dichte inhoud uit de tabvolgorde */
    body.mobile-ready .tabs-container.mobile-sections .tab-content > .tab-pane {
        display: grid;
        grid-template-rows: auto 0fr;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid var(--wf-border-strong);
        border-radius: var(--wf-radius-lg);
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.05);
        overflow: hidden;
    }

        body.mobile-ready .tabs-container.mobile-sections .tab-content > .tab-pane.section-open {
            grid-template-rows: auto 1fr;
        }

        body.mobile-ready .tabs-container.mobile-sections .tab-content > .tab-pane > .panel-body {
            min-height: 0;
            overflow: hidden;
            margin: 0;
            padding: 0 14px;
            border: 0;
            border-top: 0 solid var(--wf-border);
            border-radius: 0;
            background: transparent;
            opacity: 0;
            visibility: hidden;
        }

        body.mobile-ready .tabs-container.mobile-sections .tab-content > .tab-pane.section-open > .panel-body {
            padding: 12px 14px 14px;
            border-top-width: 1px;
            opacity: 1;
            visibility: visible;
        }

            /* knoppen (betaling toevoegen, standaardteksten) op hun eigen regel, los van wat eronder komt */
            body.mobile-ready .tabs-container.mobile-sections .panel-body > .text-right {
                overflow: hidden;
                margin-bottom: 10px;
            }

                body.mobile-ready .tabs-container.mobile-sections .panel-body > .text-right:last-child {
                    margin-bottom: 0;
                }

            body.mobile-ready .tabs-container.mobile-sections .panel-body > textarea {
                min-height: 120px;
            }

            body.mobile-ready .tabs-container.mobile-sections .panel-body > small {
                display: block;
                margin-top: 6px;
                font-size: 12px;
                color: var(--wf-muted);
            }

            /* betalingen: lege tabel neemt geen ruimte */
            body.mobile-ready .tabs-container.mobile-sections .stack-payments:not(:has(tbody > tr)) {
                display: none;
            }

            /* betalingen in een sectie: een getinte lijst in de witte kaart, per betaling een icoontegel volgens de methode
                 [💶] [15/10/2026]     [€ 2.122,82]
                 [  ] [CASH]             [✎] [🗑]    */
            body.mobile-ready .tabs-container.mobile-sections .stack-payments {
                margin-bottom: 12px;
                padding: 0 12px;
                background: var(--wf-surface);
                border: 1px solid var(--wf-border);
                border-radius: 10px;
            }

                body.mobile-ready .tabs-container.mobile-sections .stack-payments > tbody > tr {
                    grid-template-columns: 36px 1fr auto;
                    grid-template-areas:
                        "icon date   amount"
                        "icon method act";
                    gap: 0 10px;
                    margin: 0;
                    padding: 10px 0;
                    border: 0;
                    border-bottom: 1px solid var(--wf-border-strong);
                    border-radius: 0;
                    box-shadow: none;
                    background: transparent;
                }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments > tbody > tr:last-child {
                        border-bottom: 0;
                    }

                    /* icoontegel: euro, of het icoon van de methode (zelfde iconen als het menu "betaling toevoegen") */
                    body.mobile-ready .tabs-container.mobile-sections .stack-payments > tbody > tr::before {
                        content: "\f153";
                        grid-area: icon;
                        align-self: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 36px;
                        height: 36px;
                        font-family: "Font Awesome 6 Free";
                        font-weight: 900;
                        font-size: 14px;
                        color: var(--wf-cyan-icon);
                        background: #fff;
                        border-radius: 10px;
                        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
                    }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments > tbody > tr[data-method="Cash"]::before {
                        content: "\f53a";
                    }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments > tbody > tr[data-method="Bancontact"]::before {
                        content: "\f09d";
                    }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments > tbody > tr[data-method="Overschrijving"]::before {
                        content: "\f362";
                    }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pdate {
                        align-self: end;
                        white-space: nowrap;
                        font-weight: 600;
                        color: var(--wf-text);
                    }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pmethod {
                        align-self: center;
                    }

                        body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pmethod .badge {
                            display: inline-block;
                            width: auto;
                            padding: 1px 7px;
                            font-size: 10px;
                            font-weight: 600;
                            letter-spacing: 0.03em;
                            text-transform: uppercase;
                            color: var(--wf-muted);
                            background: #fff;
                            border: 1px solid var(--wf-border-strong);
                            border-radius: 999px;
                        }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pamount {
                        align-self: end;
                        font-weight: 700;
                        font-variant-numeric: tabular-nums;
                        color: var(--wf-navy);
                    }

                    body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pact {
                        align-self: start;
                        margin-right: -8px; /* icoon (niet de knoprand) lijnt uit met het bedrag */
                    }

                        body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pact .btn {
                            min-width: 34px;
                            height: 34px;
                            padding: 0;
                            margin-left: 0;
                            color: var(--wf-muted);
                            background: transparent;
                            border-color: transparent;
                            border-radius: 8px;
                            box-shadow: none;
                        }

                            body.mobile-ready .tabs-container.mobile-sections .stack-payments td.sa-pact .btn:active {
                                background: #fff;
                            }

            /* koppelingen: gewone lijst zonder kader of kolomkoppen */
            body.mobile-ready .tabs-container.mobile-sections #links table.table {
                display: table !important;
                width: 100%;
                margin: 0;
                border: 0;
                background: transparent;
            }

                body.mobile-ready .tabs-container.mobile-sections #links table.table > thead {
                    display: none;
                }

                body.mobile-ready .tabs-container.mobile-sections #links table.table > tbody > tr > td {
                    padding: 8px 8px 8px 0;
                    border: 0;
                    border-top: 1px solid var(--wf-border);
                    vertical-align: middle;
                }

                body.mobile-ready .tabs-container.mobile-sections #links table.table > tbody > tr:first-child > td {
                    border-top: 0;
                }

                body.mobile-ready .tabs-container.mobile-sections #links table.table > tbody > tr > td[colspan] {
                    padding: 0;
                    color: var(--wf-muted);
                }

    body.mobile-ready .mobile-section-head {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        padding: 10px 14px;
        background: none;
        border: 0;
        text-align: left;
        color: var(--wf-navy);
        font-weight: 600;
    }

        body.mobile-ready .mobile-section-head .mobile-section-title {
            flex: 1 1 auto;
        }

        body.mobile-ready .mobile-section-head .mobile-section-ok {
            color: var(--wf-success-ink);
        }

        body.mobile-ready .mobile-section-head .mobile-section-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--wf-cyan-icon);
        }

        body.mobile-ready .mobile-section-head .mobile-section-caret {
            color: var(--wf-muted);
            transition: transform 0.15s ease;
        }

    body.mobile-ready .section-open > .mobile-section-head .mobile-section-caret {
        transform: rotate(180deg);
    }
}

/* Sectiekoppen bestaan enkel op telefoon; op desktop blijven het gewone tabs */
.mobile-section-head {
    display: none;
}
/* Betaalknoppen (opmaak in style.css, .payment-actions): op telefoon de vier knoppen in twee kolommen,
   met betalingen "betaling toevoegen" over de volle breedte */
@media (max-width: 767px) {
    body.mobile-ready .payment-actions.is-empty {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 12px;
    }

    body.mobile-ready .payment-actions:not(.is-empty) > .payment-manual {
        flex: 1 1 100%;
    }
}
/* ===== /MODULE: invoice ===== */

/* ===== MODULE: offer ===== */
@media (max-width: 767px) {

    /* Offerte-detail: de lijnen en onderste blok staan in een .row met inline negatieve marge (-18px) voor desktop.
       Op telefoon die marge neutraliseren, anders steken de lijnkaarten buiten de ibox. */
    body.mobile-ready .offer-lines-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        body.mobile-ready .offer-lines-row .col-xs-12 {
            padding-left: 0;
            padding-right: 0;
        }

    body.mobile-ready .offer-bottom-row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
}

/* ===== /MODULE: offer ===== */

/* ===== MODULE: order ===== */
/* Orders: overzicht (list-cards) en detail (lijnen met stack-lines). Zie Views/Order/* */
@media (max-width: 767px) {

    /* Knoppen in de detailheader zitten in 2 inline-block wrappers: laat ze meestromen met de flex-toolbar */
    body.mobile-ready .detail-toolbar > .toolbar-group {
        display: contents !important;
    }

        body.mobile-ready .detail-toolbar > .toolbar-group > .btn,
        body.mobile-ready .detail-toolbar > .toolbar-group > .btn-group > .btn {
            min-height: 40px;
            min-width: 44px;
        }

        body.mobile-ready .detail-toolbar > .toolbar-group > .btn,
        body.mobile-ready .detail-toolbar > .toolbar-group > .btn-group {
            margin: 0;
        }

        body.mobile-ready .detail-toolbar > .toolbar-group .toolbar-primary {
            order: -1;
        }

    /* Orderlijn: extra rij "Gevalideerd" onder de standaard kaart (stack-lines) */
    body.mobile-ready .stack-order-lines > tbody > tr > td.sa-valid {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

        body.mobile-ready .stack-order-lines > tbody > tr > td.sa-valid::before {
            display: inline;
            margin: 0;
        }

        body.mobile-ready .stack-order-lines > tbody > tr > td.sa-valid > input[type=checkbox] {
            margin: 0 !important;
            width: 20px;
            height: 20px;
        }

        body.mobile-ready .stack-order-lines > tbody > tr > td.sa-valid > div[ng-show] {
            display: none !important;
        }

    body.mobile-ready .stack-order-lines > tbody > tr.line-title > td.sa-valid {
        display: none !important;
    }

    /* Projectlijn: zelfde extra rij "Gevalideerd" als de orderlijn */
    body.mobile-ready .stack-project-lines > tbody > tr > td.sa-valid {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

        body.mobile-ready .stack-project-lines > tbody > tr > td.sa-valid::before {
            display: inline;
            margin: 0;
        }

        body.mobile-ready .stack-project-lines > tbody > tr > td.sa-valid > input[type=checkbox] {
            margin: 0 !important;
            width: 20px;
            height: 20px;
        }

        body.mobile-ready .stack-project-lines > tbody > tr > td.sa-valid > div[ng-show] {
            display: none !important;
        }

    /* Totalen eerst, dan marge, dan de opmerkingen-tabs */
    body.mobile-ready .mobile-flex-col > .order-totals {
        order: -2;
    }
}
/* ===== /MODULE: order ===== */

/* ===== MODULE: supplierorder ===== */
@media (max-width: 767px) {

    /* Bestellijnen (leverancier): kaart per lijn, eigen grid want er is geen korting/voorraad maar wel "gevalideerd"
         [Omschrijving                ]
         [Aantal ] [Aankoopprijs] [Subtotaal]
         [Gevalideerd [x]       ] [ ✎ 🗑 ] */
    body.mobile-ready .stack-supplierlines > tbody > tr {
        grid-template-areas:
            "desc  desc  desc"
            "qty   price sub"
            "valid valid act";
    }

    body.mobile-ready .stack-supplierlines td.sa-valid {
        grid-area: valid;
        align-self: center;
        display: flex;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

        body.mobile-ready .stack-supplierlines td.sa-valid::before {
            margin: 0;
        }

        body.mobile-ready .stack-supplierlines td.sa-valid input[type="checkbox"] {
            width: 22px;
            height: 22px;
            margin: 0 !important;
        }

    body.mobile-ready .stack-supplierlines > tbody > tr.line-title td.sa-valid {
        display: none !important;
    }
}
/* ===== /MODULE: supplierorder ===== */

/* ===== MODULE: project ===== */
@media (max-width: 767px) {

    /* Detail: formulierblokken (min-height 90px is enkel voor het naast elkaar uitlijnen op desktop) */
    body.mobile-ready .project-form-block {
        min-height: 0 !important;
    }

    body.mobile-ready .project-settings-col.bl-1 {
        border-left: 0;
    }

    body.mobile-ready .project-collapse-toggle {
        margin-top: 10px;
        margin-bottom: 4px;
        text-align: left;
    }

    /* Overzicht-tab: drie werkuren-tegels onder elkaar, compact en zonder het grote icoon */
    body.mobile-ready .project-kpis .widget {
        margin: 0 0 8px;
        padding: 10px 14px;
    }

        body.mobile-ready .project-kpis .widget .col-xs-3 {
            display: none;
        }

        body.mobile-ready .project-kpis .widget .col-xs-9 {
            width: 100%;
        }

        body.mobile-ready .project-kpis .widget h2,
        body.mobile-ready .project-kpis .widget h4 {
            display: inline-block;
            margin: 0 0 0 6px;
        }

        body.mobile-ready .project-kpis .widget h2 {
            font-size: 22px;
        }

    /* .space-20 overschrijft de negatieve rij-marges: op telefoon terugzetten zodat de kaarten even breed zijn als de tegels */
    body.mobile-ready .project-totals-wrap {
        margin-left: -15px;
        margin-right: -15px;
    }

    body.mobile-ready .project-phase {
        max-width: none !important;
    }

    body.mobile-ready .project-add-btn {
        margin-bottom: 8px;
    }

    /* Kostenverdeling (materialen / werkuren / werfkosten / totaal): kaart per rij
         [Naam                       ]
         [Verkoop    ] [Aankoop      ]
         [Marge      ] [%            ] */
    body.mobile-ready .stack-projtotals {
        max-width: none !important;
    }

        body.mobile-ready .stack-projtotals > tbody > tr {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "name   name"
                "sell   buy"
                "margin pct";
        }

        body.mobile-ready .stack-projtotals td.sa-name { grid-area: name; font-weight: 600; }
        body.mobile-ready .stack-projtotals td.sa-sell { grid-area: sell; }
        body.mobile-ready .stack-projtotals td.sa-buy { grid-area: buy; }
        body.mobile-ready .stack-projtotals td.sa-margin { grid-area: margin; }
        body.mobile-ready .stack-projtotals td.sa-pct { grid-area: pct; }

        body.mobile-ready .stack-projtotals > tbody > tr > td.sa-sell,
        body.mobile-ready .stack-projtotals > tbody > tr > td.sa-buy,
        body.mobile-ready .stack-projtotals > tbody > tr > td.sa-margin,
        body.mobile-ready .stack-projtotals > tbody > tr > td.sa-pct {
            padding: 4px 8px;
            border-radius: 4px;
            text-align: right;
        }

    /* Kosten / onkosten: kaart per kost
         [Omschrijving            ] [x]
         [Aantal ] [Verkoop ] [Aankoop]
                   [Tot. vk ] [Tot. ak]
         [Opmerking                   ] */
    body.mobile-ready .stack-costs > tbody > tr {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "desc   desc  act"
            "qty    sell  buy"
            ".      tsell tbuy"
            "remark remark remark";
        align-items: start;
    }

        body.mobile-ready .stack-costs td.sa-desc { grid-area: desc; font-weight: 600; align-self: center; }
        body.mobile-ready .stack-costs td.sa-qty { grid-area: qty; }
        body.mobile-ready .stack-costs td.sa-sell { grid-area: sell; }
        body.mobile-ready .stack-costs td.sa-buy { grid-area: buy; }
        body.mobile-ready .stack-costs td.sa-tsell { grid-area: tsell; }
        body.mobile-ready .stack-costs td.sa-tbuy { grid-area: tbuy; }
        body.mobile-ready .stack-costs td.sa-remark { grid-area: remark; }
        body.mobile-ready .stack-costs td.sa-act { grid-area: act; text-align: right; align-self: center; }

        body.mobile-ready .stack-costs td.sa-qty input,
        body.mobile-ready .stack-costs td.sa-sell input,
        body.mobile-ready .stack-costs td.sa-buy input {
            text-align: right;
        }

        body.mobile-ready .stack-costs td.sa-tsell,
        body.mobile-ready .stack-costs td.sa-tbuy {
            text-align: right;
            padding: 2px 6px;
            border-radius: 4px;
        }

        body.mobile-ready .stack-costs td.sa-act .btn {
            min-width: 40px;
            height: 40px;
        }

        /* Totaalrijen */
        body.mobile-ready .stack-costs > tbody > tr.cost-total {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "desc  desc"
                "tsell tbuy";
        }

    /* Contacten: kaart per contact
         [Naam                  ] [✎ 🗑]
         [Rol]  [E-mail] [Telefoon] [Opmerking] onder elkaar */
    body.mobile-ready .stack-contacts > tbody > tr {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    act"
            "role    role"
            "email   email"
            "phone   phone"
            "comment comment";
    }

        body.mobile-ready .stack-contacts td.sa-name { grid-area: name; font-weight: 700; align-self: center; }
        body.mobile-ready .stack-contacts td.sa-role { grid-area: role; }
        body.mobile-ready .stack-contacts td.sa-email { grid-area: email; word-break: break-all; }
        body.mobile-ready .stack-contacts td.sa-phone { grid-area: phone; }
        body.mobile-ready .stack-contacts td.sa-comment { grid-area: comment; }
        body.mobile-ready .stack-contacts td.sa-act { grid-area: act; align-self: center; text-align: right; }

        body.mobile-ready .stack-contacts td.sa-act .btn {
            min-width: 40px;
            height: 40px;
        }

    /* Bijlages: kaart per bestand
         [Bestandsnaam                 ]
         [Grootte] [Datum] [Gebruiker]
         [↑ ↓]     [download ✎ 🗑     ] */
    body.mobile-ready .stack-attach > tbody > tr:not(.stack-plain) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "file file file"
            "size date user"
            "move act  act";
    }

        body.mobile-ready .stack-attach td.sa-file { grid-area: file; font-weight: 600; word-break: break-all; }
        body.mobile-ready .stack-attach td.sa-size { grid-area: size; font-size: 13px; }
        body.mobile-ready .stack-attach td.sa-date { grid-area: date; font-size: 13px; }
        body.mobile-ready .stack-attach td.sa-user { grid-area: user; font-size: 13px; word-break: break-word; }
        body.mobile-ready .stack-attach td.sa-move { grid-area: move; align-self: center; white-space: nowrap; }
        body.mobile-ready .stack-attach td.sa-act { grid-area: act; align-self: center; text-align: right; }

        body.mobile-ready .stack-attach td.sa-act .btn {
            min-width: 40px;
            height: 40px;
        }
}
/* ===== /MODULE: project ===== */

/* ===== MODULE: auditmodal ===== */
/* Historiek (Directives/Audit/AuditModal.html): de basisstijl staat in style.css (#auditmodal), hier enkel de telefoonversie.
   De filterchips scrollen op één regel in plaats van af te breken. */
@media (max-width: 767px) {
    body.mobile-ready #auditmodal .audit-filters > span {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    body.mobile-ready #auditmodal .audit-filters .wf-chip {
        flex: 0 0 auto;
        height: 34px;
    }

    /* .btn krijgt op telefoon min-height 38px; de opties blijven even hoog als de chips */
    body.mobile-ready #auditmodal .audit-options > .wf-icon-btn {
        width: 34px;
        height: 34px;
        min-height: 34px;
    }

    body.mobile-ready #auditmodal .audit-event {
        padding-left: 28px;
    }

        body.mobile-ready #auditmodal .audit-event:before {
            left: 9px;
        }

    body.mobile-ready #auditmodal .audit-dot {
        width: 20px;
        height: 20px;
        line-height: 16px;
        font-size: 9px;
    }

    body.mobile-ready #auditmodal .audit-event-head {
        padding: 8px 28px 8px 10px;
    }

    body.mobile-ready #auditmodal .audit-user {
        display: inline-block;
        max-width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    body.mobile-ready #auditmodal .audit-changes {
        display: block;
    }

    body.mobile-ready #auditmodal .audit-change {
        display: block;
        padding: 3px 0;
        border-bottom: 1px solid var(--wf-border);
    }

        body.mobile-ready #auditmodal .audit-change:last-child {
            border-bottom: 0;
        }

        body.mobile-ready #auditmodal .audit-change > div {
            padding: 0;
            border-bottom: 0;
        }

    body.mobile-ready #auditmodal .audit-label {
        padding-right: 0;
        white-space: normal;
        font-size: 11px;
    }
}
/* ===== /MODULE: auditmodal ===== */

/* ===== MODULE: sentversions ===== */
/* Verzonden versies (Directives/SentVersions/SentVersions.html): basisstijl in style.css (.sent-versions), hier de telefoonversie.
   Per verzending: kanaal en datum op de eerste regel, ontvanger en gebruiker eronder. */
@media (max-width: 767px) {
    body.mobile-ready .sent-versions .sv-head {
        flex-wrap: wrap;
    }

    body.mobile-ready .sent-versions .sv-open {
        padding: 8px 0 8px 12px;
    }

    body.mobile-ready .sent-versions .sv-send {
        flex-wrap: wrap;
    }

    /* kanaal + datum vullen de eerste regel, zodat de ontvanger altijd op de tweede begint */
    body.mobile-ready .sent-versions .sv-channel {
        flex: 1 1 60%;
    }

    body.mobile-ready .sent-versions .sv-recipient {
        order: 3;
        flex: 0 1 auto;
        max-width: 70%;
        padding: 1px 0 0 16px;
    }

    body.mobile-ready .sent-versions .sv-by {
        order: 4;
        flex: 1 1 auto;
    }
}
/* ===== /MODULE: sentversions ===== */

/* ===== MODULE: pdfpreview ===== */
/* Live PDF-voorbeeld (QoL 1.6): op een telefoon volledig scherm met sluitknop; desktop in Content/pdf-preview.css */
@media (max-width: 767px) {
    body.mobile-ready .pdf-preview-panel {
        width: 100%;
        max-width: none;
        border-left: 0;
        box-shadow: none;
    }

    /* volledig scherm: niets te slepen */
    body.mobile-ready .pdf-preview-resize {
        display: none;
    }

    body.mobile-ready .pdf-preview-header {
        padding-top: max(8px, env(safe-area-inset-top));
    }

    body.mobile-ready .pdf-preview-pages {
        padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    }

    body.mobile-ready .pdf-preview-actions .btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* de pagina eronder scrolt niet mee */
    body.mobile-ready.pdf-preview-open {
        overflow: hidden;
    }
}
/* ===== /MODULE: pdfpreview ===== */

/* ===== MODULE: productgroups ===== */
/* Productgroepen (Views/Product/Groups.cshtml): de boom als ingesprongen kaarten; links een pijl om open te klappen */
@media (max-width: 767px) {
    body.mobile-ready .product-groups-card.has-toggle .list-card-link {
        padding-left: 46px;
    }

    body.mobile-ready .product-groups-card-toggle {
        position: absolute;
        top: 6px;
        left: 4px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: none;
        color: var(--wf-muted);
    }

        body.mobile-ready .product-groups-card-toggle:active {
            background: #e3f4f9;
        }

    body.mobile-ready .product-groups-card.tree-hidden .list-card-title {
        color: var(--wf-muted);
    }
}
/* ===== /MODULE: productgroups ===== */
/* ===== MODULE: monitor (Views/Monitor/Index.cshtml) ===== */
@media (max-width: 767px) {
    body.mobile-ready .monitor-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.mobile-ready .monitor-tile .monitor-value { font-size: 24px; }
    body.mobile-ready .monitor-section-head .monitor-filters { margin-left: 0; width: 100%; }
    body.mobile-ready .monitor-page .monitor-actions { text-align: left; padding-top: 4px; }
    body.mobile-ready .monitor-page .monitor-actions .btn { margin: 0 6px 6px 0; }
}
/* ===== /MODULE: monitor ===== */
/* ===== MODULE: time-registration (Views/TimeRegistration/Overview.cshtml) ===== */
@media (max-width: 767px) {
    /* tegels als compacte rijen: label links, waarde rechts */
    body.mobile-ready .time-registration-page .time-registration-tiles { grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
    body.mobile-ready .time-registration-page .time-registration-tile { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
    body.mobile-ready .time-registration-page .time-registration-tile .wf-side-title { flex: 1 1 auto; margin: 0; }
    body.mobile-ready .time-registration-page .time-registration-value { font-size: 18px; order: 2; }
    body.mobile-ready .time-registration-page .time-registration-tile .wf-muted { order: 1; }
    body.mobile-ready .time-registration-page .time-registration-timer { flex-wrap: wrap; margin-top: 12px; }
    body.mobile-ready .time-registration-page .time-registration-timer-actions { width: 100%; }
    body.mobile-ready .time-registration-page .time-registration-timer-actions .btn { flex: 1 1 0; }
    body.mobile-ready .time-registration-page .time-registration-section { margin-top: 16px; }
}
/* ===== /MODULE: time-registration ===== */

/* ===== MODULE: detail-head (kop van product / klant / leverancier, tabkiezer) ===== */

/* Tabkiezer (Scripts/app/mobile.js): enkel op telefoon */
.tab-picker {
    display: none;
}

@media (max-width: 767px) {

    /* ---------- Kop van een detailscherm (.row.detail-head) ----------
       dh-eyebrow (kruimelpad / type), dh-sub, dh-title, dh-chips; toolbar: dh-nav links (vorige / overzicht / volgende
       als één gekoppelde groep), acties rechts, het ⋮-menu (dh-more) helemaal rechts als bottom sheet. */
    body.mobile-ready .detail-head .dh-eyebrow {
        margin: 0 0 2px 0;
        overflow: hidden;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.4;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--wf-muted);
    }

        body.mobile-ready .detail-head .dh-eyebrow .text-muted {
            color: inherit;
        }

    body.mobile-ready .detail-head .dh-sub {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--wf-cyan-ink);
    }

    body.mobile-ready .detail-head .dh-title {
        margin: 2px 0 8px 0 !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1.25;
        overflow-wrap: anywhere;
        color: var(--wf-navy);
    }

    body.mobile-ready .detail-head .dh-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 0 !important;
    }

        body.mobile-ready .detail-head .dh-chips > .label {
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.03em;
        }

        body.mobile-ready .detail-head .dh-chips > .label-info {
            background: var(--wf-success-soft);
            color: var(--wf-success-ink);
        }

        body.mobile-ready .detail-head .dh-chips > .label-warning {
            background: var(--wf-warning-soft);
            color: var(--wf-warning-ink);
        }

        body.mobile-ready .detail-head .dh-chips > .label-danger {
            background: var(--wf-danger-soft);
            color: var(--wf-danger-ink);
        }

    /* Type-regel met een knop rechts (klant: Wijzigingen), als de toolbar op telefoon verborgen is */
    body.mobile-ready .detail-head .dh-eyebrow-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

        body.mobile-ready .detail-head .dh-eyebrow-row > .dh-eyebrow {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }

        body.mobile-ready .detail-head .dh-eyebrow-row > .dh-head-btn {
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            min-height: 40px;
            margin: -6px 0 -4px;
            padding: 0;
            border-radius: var(--wf-control-radius);
            line-height: 38px;
        }

    /* Toolbar: één rij onder een dunne lijn, navigatie links, acties rechts */
    body.mobile-ready .detail-head .detail-toolbar {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px;
        margin: 12px 0 0 0;
        padding-top: 12px;
        border-top: 1px solid var(--wf-border);
    }

        body.mobile-ready .detail-head .detail-toolbar .toolbar-primary {
            order: 0;
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* De zwevende bewaarknop toont al dat er niet bewaarde wijzigingen zijn */
        body.mobile-ready .detail-head .detail-toolbar .detail-toolbar-note {
            display: none !important;
        }

        body.mobile-ready .detail-head .detail-toolbar > .btn,
        body.mobile-ready .detail-head .detail-toolbar > .btn-group > .btn,
        body.mobile-ready .detail-head .dh-nav > .btn {
            height: 40px;
            min-height: 40px;
            min-width: 44px;
            padding: 0 14px;
            border-radius: var(--wf-control-radius);
            font-size: 14px;
            line-height: 38px;
        }

    body.mobile-ready .detail-head .dh-nav {
        display: inline-flex;
        order: -2;
        margin-right: auto;
    }

        body.mobile-ready .detail-head .dh-nav > .btn {
            min-width: 42px;
            padding: 0 11px;
            border-radius: 0;
        }

            body.mobile-ready .detail-head .dh-nav > .btn + .btn {
                margin-left: -1px;
            }

            body.mobile-ready .detail-head .dh-nav > .btn:first-child {
                border-radius: var(--wf-control-radius) 0 0 var(--wf-control-radius);
            }

            body.mobile-ready .detail-head .dh-nav > .btn:last-child {
                border-radius: 0 var(--wf-control-radius) var(--wf-control-radius) 0;
            }

            body.mobile-ready .detail-head .dh-nav > .btn:only-child {
                border-radius: var(--wf-control-radius);
            }

    /* ⋮-menu als sheet: de items zijn a.btn.btn-white (desktop), hier gewone lijstrijen */
    body.mobile-ready .dh-more.open > .dropdown-menu > li > a.btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 13px 20px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 15px;
        text-align: left;
        text-transform: none;
        color: var(--wf-text);
    }

        body.mobile-ready .dh-more.open > .dropdown-menu > li > a.btn:active {
            background: var(--wf-hover);
        }

        body.mobile-ready .dh-more.open > .dropdown-menu > li > a.btn > i {
            font-size: 16px;
            color: var(--wf-muted);
        }

            body.mobile-ready .dh-more.open > .dropdown-menu > li > a.btn > i.text-danger {
                color: var(--wf-danger-ink);
            }

    /* ---------- Tabkiezer i.p.v. een scrollende tabbalk ---------- */
    body.mobile-ready .tab-picker {
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
    }

    body.mobile-ready .nav-tabs.has-tab-picker {
        display: none;
    }

    body.mobile-ready .tab-picker > .tab-picker-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        float: none;
        width: 100%;
        min-height: 50px;
        padding: 8px 14px;
        border: 1px solid var(--wf-border-strong);
        border-radius: var(--wf-radius-lg) !important;
        background: #fff;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        text-transform: none;
        color: var(--wf-navy);
    }

    body.mobile-ready .tab-picker.open > .tab-picker-toggle {
        border-color: var(--wf-cyan);
        box-shadow: var(--wf-focus-ring);
    }

    body.mobile-ready .tab-picker-label {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 10px;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Icoon van de tab als kleine tegel */
    body.mobile-ready .tab-picker-label > i:first-child,
    /* even specifiek als de algemene sheetregel (.dropdown-sheet.open > ... > i:first-child, 20px breed): anders wordt
       de tegel 20 x 32 in plaats van vierkant */
    body.mobile-ready .tab-picker.dropdown-sheet.open > .dropdown-menu > li > a > i:first-child,
    body.mobile-ready .tab-picker .dropdown-menu > li > a > i:first-child {
        display: inline-flex;
        flex: 0 0 32px;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--wf-radius);
        background: var(--wf-cyan-soft);
        font-size: 14px;
        color: var(--wf-cyan-icon);
    }

    body.mobile-ready .tab-picker-caret {
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--wf-muted);
    }

    body.mobile-ready .tab-picker .dropdown-menu > li > a {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        font-weight: 600;
        text-transform: none;
        white-space: normal;
        color: var(--wf-text);
    }

        /* even specifiek als de sheetregel (.dropdown-sheet.open > .dropdown-menu > li > a) en erna: wint zonder !important */
        body.mobile-ready .tab-picker.dropdown-sheet > .dropdown-menu > li > a {
            padding: 9px 48px 9px 20px;
        }

        body.mobile-ready .tab-picker.dropdown-sheet.open > .dropdown-menu > li > a > i:first-child,
        body.mobile-ready .tab-picker .dropdown-menu > li > a > i:first-child {
            background: #f1f3f5;
            color: var(--wf-muted);
        }

    body.mobile-ready .tab-picker .dropdown-menu > li.active > a,
    body.mobile-ready .tab-picker .dropdown-menu > li.active > a:hover,
    body.mobile-ready .tab-picker .dropdown-menu > li.active > a:focus {
        background: var(--wf-cyan-soft);
        color: var(--wf-navy);
    }

        body.mobile-ready .tab-picker.dropdown-sheet.open > .dropdown-menu > li.active > a > i:first-child,
        body.mobile-ready .tab-picker .dropdown-menu > li.active > a > i:first-child {
            background: var(--wf-cyan);
            color: #fff;
        }

    body.mobile-ready .tab-picker .dropdown-menu .sheet-check {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -8px;
        color: var(--wf-cyan-ink);
    }

    /* De inhoud onder de kiezer is een eigen kaart (er hangt geen actieve tab meer aan vast) */
    body.mobile-ready .tab-picker ~ .tab-content > .tab-pane > .panel-body {
        border: 1px solid var(--wf-border-strong);
        border-radius: var(--wf-radius-lg);
    }

    /* Kiezer en inhoud zijn elk een kaart: zonder de schaduw van het thema rond .tabs-container, die anders als een
       kader van de kiezer tot onder de inhoud loopt (desktop doet hetzelfde voor .wf-record-main in style.css) */
    body.mobile-ready .tabs-container:has(> .tab-picker) {
        box-shadow: none;
    }
}

/* Recorddetail (klant): de kaarten van een tab (Gegevens = identiteit, contact, adres, ...) hebben op telefoon geen
   kader, enkel wat lucht tussen de secties */
@media (max-width: 767px) {
    body.mobile-ready .wf-record-cards > .wf-card + .wf-card {
        margin-top: 20px;
    }
}
/* ===== /MODULE: detail-head ===== */
/* ===== MODULE: reports (Views/Report/*) ===== */
/* De keuzeknoppen (groepering, Vervallen, Niet verkocht, ...) lopen over meerdere regels in plaats van af te knippen */
@media (max-width: 767px) {
    body.mobile-ready .report-page .wf-segmented {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

        body.mobile-ready .report-page .wf-segmented > button {
            flex: 1 1 auto;
            white-space: nowrap;
        }

    body.mobile-ready .report-page .wf-segmented + .wf-segmented {
        margin: 8px 0 0;
    }
}
/* ===== /MODULE: reports ===== */

/* ===== MODULE: pricechange (Views/PriceChange/*) ===== */
/* Prijzen aanpassen: de twee bronknoppen elk een halve breedte, de schakelaars zonder de bovenmarge van de desktopkolom */
@media (max-width: 767px) {
    body.mobile-ready .price-change-modal .price-change-source {
        display: flex;
        width: 100%;
    }

        body.mobile-ready .price-change-modal .price-change-source > button {
            flex: 1 1 0;
            white-space: normal;
        }

    body.mobile-ready .price-change-modal .price-change-toggle {
        margin-top: 4px;
    }
}
    /* prijslijst: de tabs lopen door in plaats van af te knippen, de knop op de leveranciersfiche onder de titel */
@media (max-width: 767px) {
    body.mobile-ready .price-list-modal .price-list-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    body.mobile-ready .price-list-open {
        float: none;
        margin: 0 0 10px;
    }
}
/* ===== /MODULE: pricechange ===== */
/* ===== MODULE: checklists ===== */
/* Checklists > bibliotheek (Views/Checklist/Templates.cshtml): de naam van een taak over de volle breedte, de knoppen eronder rechts;
   keuzelijsten en code op een eigen regel */
@media (max-width: 767px) {
    body.mobile-ready .checklist-page .checklist-item-head {
        flex-wrap: wrap;
    }

        body.mobile-ready .checklist-page .checklist-item-head > .form-control {
            flex: 1 1 calc(100% - 34px);
        }

    body.mobile-ready .checklist-page .checklist-item-tools {
        margin-left: auto;
    }

    body.mobile-ready .checklist-page .checklist-service,
    body.mobile-ready .checklist-page .checklist-builtin {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

        body.mobile-ready .checklist-page .checklist-service .form-control,
        body.mobile-ready .checklist-page .checklist-builtin .form-control {
            width: 100%;
            min-width: 0;
        }

    body.mobile-ready .checklist-page .checklist-code {
        margin-left: 0;
    }
}
/* ===== /MODULE: checklists ===== */

/* ===== MODULE: checklist-visit ===== */
/* Checklist op een servicerapport (Views/ServiceReport/_Checklist.cshtml): het hoofdtoestel van de technieker.
   Overzicht: grote rijen, "Checklist starten" over de volle breedte. De checklistmodus vult het scherm (boven de
   tabbalk, onder modals), resultaten 2 x 2, Vorige / Volgende onderaan binnen duimbereik, rekening houdend met de notch. */
@media (max-width: 767px) {
    body.mobile-ready .service-report-checklist .checklist-visit-head {
        flex-direction: column;
        align-items: stretch;
    }

        body.mobile-ready .service-report-checklist .checklist-visit-add .form-control {
            width: 100%;
            min-width: 0;
            min-height: 48px;
        }

    body.mobile-ready .service-report-checklist .checklist-visit-start {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

        body.mobile-ready .service-report-checklist .checklist-visit-start-btn {
            width: 100%;
            min-height: 52px;
            font-size: 16px;
        }

        body.mobile-ready .service-report-checklist .checklist-visit-start-progress {
            flex-basis: auto;
            font-size: 15px;
        }

        body.mobile-ready .service-report-checklist .checklist-visit-docs {
            margin-left: 0;
        }

        body.mobile-ready .service-report-checklist .checklist-visit-docs .btn {
            flex: 1 1 0;
            justify-content: center;
            min-height: 44px;
        }

            body.mobile-ready .service-report-checklist .checklist-visit-docs .checklist-visit-docs-icon {
                flex: 0 0 48px;
            }

    body.mobile-ready .service-report-checklist .checklist-visit-section-head {
        padding: 10px 0;
    }

    body.mobile-ready .service-report-checklist .checklist-visit-section-title {
        font-size: 16px;
    }

    body.mobile-ready .service-report-checklist .checklist-visit-check {
        padding: 0 12px 0 2px;
    }

        body.mobile-ready .service-report-checklist .checklist-visit-check > input {
            width: 24px;
            height: 24px;
        }

    body.mobile-ready .service-report-checklist .checklist-visit-row-open {
        min-height: 56px;
        font-size: 15px;
    }

    /* de modus: schermvullend */
    body.mobile-ready .checklist-flow.is-open {
        padding: 0;
        background: #fff;
    }

    body.mobile-ready .checklist-flow-panel {
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    body.mobile-ready .checklist-flow-header {
        padding: calc(4px + env(safe-area-inset-top)) 4px 9px 6px;
    }

    body.mobile-ready .checklist-flow-body {
        padding: 14px 16px 20px;
    }

    body.mobile-ready .checklist-flow-title {
        font-size: 20px;
    }

    body.mobile-ready .checklist-flow .checklist-results {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 14px 0 18px;
    }

    /* icoon naast het label: even duidelijk, een derde minder hoog dan icoon erboven */
    body.mobile-ready .checklist-flow .checklist-result {
        flex-direction: row;
        gap: 8px;
        min-height: 56px;
        padding: 6px 8px;
        font-size: 15px;
    }

        body.mobile-ready .checklist-flow .checklist-result > i {
            font-size: 19px;
        }

    body.mobile-ready .checklist-flow .form-control {
        font-size: 16px; /* iOS zoomt niet in bij velden van 16px */
    }

    body.mobile-ready .checklist-flow .checklist-billing .wf-segmented > button {
        min-height: 44px;
    }

    body.mobile-ready .checklist-flow-tools .checklist-tool {
        flex: 1 1 calc(50% - 4px);
        min-height: 48px;
    }

    body.mobile-ready .checklist-flow-footer {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

        body.mobile-ready .checklist-flow-footer .btn {
            min-height: 52px;
        }

    body.mobile-ready .checklist-flow-picker-list {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    body.mobile-ready .checklist-flow-picker-item {
        min-height: 56px;
        font-size: 15px;
    }
}

/* smalle telefoons (360px): labels passen naast het icoon */
@media (max-width: 380px) {
    body.mobile-ready .checklist-flow .checklist-result {
        gap: 6px;
        padding: 6px 4px;
        font-size: 14px;
    }

    body.mobile-ready .checklist-flow-body {
        padding: 12px 12px 18px;
    }
}

/* lage schermen (kleine telefoon, liggend, toetsenbord): kop, voet en knoppen compacter, zodat de taak zelf in beeld blijft */
@media (max-width: 767px) and (max-height: 700px) {
    body.mobile-ready .checklist-flow-header {
        padding-bottom: 5px;
    }

        body.mobile-ready .checklist-flow-header .checklist-flow-close {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        body.mobile-ready .checklist-flow-where {
            padding: 2px 8px;
        }

    body.mobile-ready .checklist-flow-body {
        padding-top: 10px;
    }

    body.mobile-ready .checklist-flow-title {
        margin-bottom: 8px;
        font-size: 18px;
    }

    body.mobile-ready .checklist-flow .checklist-results {
        gap: 8px;
        margin: 10px 0 14px;
    }

    body.mobile-ready .checklist-flow .checklist-result {
        min-height: 50px;
    }

    body.mobile-ready .checklist-flow .form-group {
        margin-bottom: 10px;
    }

    body.mobile-ready .checklist-flow-footer {
        padding-top: 6px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }

        body.mobile-ready .checklist-flow-footer .btn {
            min-height: 46px;
        }
}
/* ===== /MODULE: checklist-visit ===== */

/* ===== MODULE: servicereport-tabs ===== */
/* Servicerapport op telefoon: zoals klant en product (de tab-kiezer uit mobile.js, kaarten zonder kader), maar de
   samenvatting blijft zichtbaar bovenaan, zodat je meteen ziet welk rapport je open hebt. De recordregels uit style.css
   gelden pas vanaf 768px; hier een compacte opmaak voor de samenvatting. Bijlagen twee per rij met "Foto nemen". */
@media (max-width: 767px) {
    body.mobile-ready .sr-summary {
        margin: 0 0 12px;
        padding: 14px;
        border: 1px solid var(--wf-border-strong);
        border-radius: var(--wf-radius-lg);
        background: #fff;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.05);
    }

        body.mobile-ready .sr-summary .wf-summary-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 12px;
        }

        body.mobile-ready .sr-summary .wf-summary-avatar {
            display: flex;
            flex: 0 0 40px;
            align-items: center;
            justify-content: center;
            height: 40px;
            border-radius: 10px;
            background: var(--wf-cyan-soft);
            color: var(--wf-cyan-ink);
            font-weight: 600;
        }

        body.mobile-ready .sr-summary .wf-summary-name {
            color: var(--wf-navy);
            font-size: 16px;
            font-weight: 600;
            line-height: 1.3;
        }

        body.mobile-ready .sr-summary .wf-summary-lines {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            body.mobile-ready .sr-summary .wf-summary-lines > li {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                overflow-wrap: anywhere;
            }

                body.mobile-ready .sr-summary .wf-summary-lines > li > i {
                    flex: 0 0 16px;
                    margin-top: 3px;
                    color: var(--wf-muted);
                    text-align: center;
                }

        body.mobile-ready .sr-summary .wf-summary-section {
            margin: 12px 0 0;
            padding: 12px 0 0;
            border-top: 1px solid var(--wf-border);
        }

            body.mobile-ready .sr-summary .wf-summary-section > .wf-card-title {
                margin: 0 0 4px;
                color: var(--wf-muted);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.06em;
                text-transform: uppercase;
            }

        /* Klant (het eerste deel) zonder lijn erboven; titel en knop op één regel zoals op desktop */
        body.mobile-ready .sr-summary > .wf-summary-section:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

        body.mobile-ready .sr-summary .sr-part-head > .wf-card-title {
            margin: 0;
            color: var(--wf-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        /* de link-knop krijgt een groter raakvlak zonder de kop hoger te maken */
        body.mobile-ready .sr-summary .sr-part-head > .wf-link-btn {
            margin: -10px 0;
            padding: 10px 0 10px 12px;
            font-size: 13px;
        }

        /* tijdlijn op telefoon: enkel de huidige stap (of de laatste als alles af is), zodat de tabs hoog blijven */
        body.mobile-ready .sr-summary .sr-timeline > li:not(.now):not(:last-child),
        body.mobile-ready .sr-summary .sr-timeline > li:last-child:not(.now):not(.done) {
            display: none;
        }

            body.mobile-ready .sr-summary .sr-timeline > li::after {
                display: none;
            }

        body.mobile-ready .sr-summary .sr-sign-actions .btn {
            min-height: 44px;
        }

    body.mobile-ready .service-report-checklist .checklist-empty {
        flex-wrap: wrap;
        padding: 14px;
    }

        body.mobile-ready .service-report-checklist .checklist-empty-pick {
            flex: 1 1 100%;
            width: 100%;
        }

    body.mobile-ready .sr-attachments .sr-att-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    body.mobile-ready .sr-attachments .sr-att-add {
        min-height: 120px;
    }

    body.mobile-ready .sr-attachments .sr-att-camera {
        display: flex;
    }

    body.mobile-ready .sr-attachments .sr-att-thumb {
        height: 110px;
    }

    body.mobile-ready .sr-attachments .sr-att-flag {
        padding: 6px 10px;
    }

    body.mobile-ready .sr-attachments .sr-att-actions .btn {
        min-width: 40px;
        min-height: 40px;
    }
}
/* ===== /MODULE: servicereport-tabs ===== */

/* ===== MODULE: toastr =====
   Meldingen staan rechtsonder (toastr.options in _Layout). Toastr zet ze op 12px van de rand met z-index 999999: zonder
   extra ruimte liggen ze over de tabbalk (telefoon), de zwevende bewaarknop of de plakkende onderbalk van een overzicht
   (.wf-sticky-bar: 12px van de onderkant, 56px hoog, acties rechts). */
@media (min-width: 768px) {
    body:has(.wf-sticky-bar) #toast-container.toast-bottom-right {
        bottom: 84px;
    }
}

@media (max-width: 767px) {
    /* boven de tabbalk (62px + veilige zone), over de volle breedte i.p.v. 300px rechts */
    body.mobile-ready #toast-container.toast-bottom-right {
        right: 12px;
        left: 12px;
        bottom: calc(var(--wf-tabbar-height, 62px) + 12px + env(safe-area-inset-bottom, 0px));
    }

        body.mobile-ready #toast-container.toast-bottom-right > .toast {
            width: auto;
            max-width: none;
        }

    /* en boven de zwevende bewaarknop (.mobile-fab, 16px boven de tabbalk) als die er is */
    body.mobile-ready:has(.mobile-fab) #toast-container.toast-bottom-right {
        bottom: calc(var(--wf-tabbar-height, 62px) + 84px + env(safe-area-inset-bottom, 0px));
    }
}
/* ===== /MODULE: toastr ===== */

/* ===== MODULE: overview-lists =====
   Telefoon: aanklikbare telefoon/e-mail onder een klanten- of leverancierskaart (.list-card-contact: grote tikdoelen, buiten de
   kaartlink omdat een link in een link niet bestaat) en de lege staat (.wf-empty, Views/Shared/_EmptyState.cshtml). */
@media (max-width: 767px) {
    body.mobile-ready .list-card-contact {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: -4px;
        padding: 0 14px 12px;
    }

        body.mobile-ready .list-card-contact a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            max-width: 100%;
            padding: 0 14px;
            border: 1px solid var(--wf-border-strong);
            border-radius: 20px;
            background: #fff;
            color: var(--wf-navy);
            font-size: 14px;
            text-decoration: none;
        }

            body.mobile-ready .list-card-contact a:active {
                background-color: var(--wf-hover);
            }

            body.mobile-ready .list-card-contact a > .fa-fw {
                flex: 0 0 auto;
                color: var(--wf-muted);
            }

            body.mobile-ready .list-card-contact a > span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* een veld zonder bruikbaar nummer of adres: gewone tekst, geen knop */
            body.mobile-ready .list-card-contact a:not([href]) {
                min-height: 0;
                padding: 0 2px;
                border-color: transparent;
                background: none;
                color: inherit;
            }

    body.mobile-ready .wf-empty {
        margin: 4px 0 10px;
        padding: 32px 16px;
    }

        body.mobile-ready .wf-empty-actions .btn {
            display: block;
            width: 100%;
        }
}
/* ===== /MODULE: overview-lists ===== */

/* ===== MODULE: overdue-notice (Directives/OverdueNotice, klantkaart van factuur/bestelling/offerte) ===== */
@media (max-width: 767px) {
    /* het paneel als bottom sheet: wit (zoals elke sheet), dezelfde kaartjes met wat meer lucht; specifieker dan de
       algemene sheetregel (.dropdown-sheet.open > .dropdown-menu > li > a: flex, 13px 20px, 15px) */
    body.mobile-ready .wf-doc-overdue-menu.open > .wf-doc-overdue-list {
        background: #fff;
    }

        body.mobile-ready .wf-doc-overdue-menu.open > .wf-doc-overdue-list > .wf-doc-overdue-row {
            padding: 0 16px 8px;
        }

        body.mobile-ready .wf-doc-overdue-menu.open > .wf-doc-overdue-list > li > a.wf-doc-overdue-item {
            display: grid;
            gap: 4px 12px;
            padding: 11px 14px;
            font-size: 15px;
        }

        body.mobile-ready .wf-doc-overdue-menu.open > .wf-doc-overdue-list .wf-doc-overdue-due {
            font-size: 13px;
        }

        body.mobile-ready .wf-doc-overdue-menu.open > .wf-doc-overdue-list > .wf-doc-overdue-foot {
            margin: 4px 0 0;
            padding: 12px 16px 4px;
        }

            body.mobile-ready .wf-doc-overdue-foot > .btn {
                min-height: 44px;
            }
}
/* ===== /MODULE: overdue-notice ===== */