/* GRIP, laag telefoon (B-074, B-080 punt 1, 28 A): dezelfde app als op de laptop, compact. Tot en met 720 px en buiten AFAS InSite; in InSite blijft de laptopweergave. De compacte maten komen uit de tokens (rol, rij, marge, hoek); hier staat alleen wat de vorm verandert: de zijbalk wordt de kopbalk en de onderbalk, een tabel wordt een lijst, de hele regel is tikbaar. De maten uit Apple HIG, Material 3 en WCAG 2.2 (vault, 04-ux/grip-mobiel-ontwerpen): - raakvlakken van minstens 44 px, een zijmarge van 16 px; - regels van minstens 48 px, de hele regel tikbaar, met één meta-gegeven of een pijl; - invoer op 16 px, zodat iOS niet inzoomt. Elke pagina heeft dezelfde volgorde: de kopbalk, de paginakop, het antwoord, filterchips, de groepen. */ @layer telefoon { .kopbalk-icoon { display: inline-flex; align-items: center; justify-content: center; width: var(--raak); height: var(--raak); border: 0; border-radius: 50%; background: none; color: var(--tekst); cursor: pointer; } .kopbalk-icoon .icon { width: 22px; height: 22px; } .kopbalk-icoon:active { background: var(--vlak-zacht); } .kopbalk-icoon:disabled { color: var(--tekst-uit); } .kopbalk-icoon.is-bezig .icon { animation: draai 1s linear infinite; } @media (max-width: 720px) { html:not(.embedded) { /* de onderbalk (64 px) en de zwevende knop erboven (56 px): de laatste regel valt er nooit onder */ --tel-onder: calc(152px + env(safe-area-inset-bottom)); scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* ── Wat op de telefoon wel en niet staat ── */ html:not(.embedded) .alleen-telefoon { display: block; } html:not(.embedded) nav.alleen-telefoon { display: flex; } html:not(.embedded) .alleen-telefoon-inline { display: inline; } html:not(.embedded) .niet-telefoon, html:not(.embedded) .niet-telefoon-inline { display: none; } html:not(.embedded) .todo-label-lang { display: none; } html:not(.embedded) .todo-label-kort { display: inline; } /* ── 1. De schil: de kopbalk blijft staan; de pagina is wit, zoals het referentiebeeld (B-097, #15817) ── */ html:not(.embedded) body, html:not(.embedded) .app-shell { background: var(--vlak-blad); } html:not(.embedded) .app-shell { flex-direction: column; height: auto; overflow: visible; } /* Geen eigen scrollvak (#15747): met overflow-y: auto bleef main een scrollvak dat nooit scrolt, en dan plakte niets erin, niet de tabs en niet de actiebalk van een geopend item. De pagina zelf scrolt. */ html:not(.embedded) .app-main { height: auto; overflow: visible; } html:not(.embedded) .app-page { padding: 0 var(--marge) var(--tel-onder); } html:not(.embedded) .sidebar { position: sticky; top: 0; z-index: 40; flex-direction: row; align-items: center; gap: var(--ruimte-2); width: 100%; height: auto; min-height: 48px; padding: 0 var(--ruimte-1) 0 var(--marge); overflow: visible; background: var(--vlak-blad); box-shadow: 0 1px 0 var(--lijn); } /* Van de zijbalk blijft de werkruimte over (#15832): het menu met Instellingen, Rol aannemen en Afmelden. */ html:not(.embedded) .sidebar > :not(.sidebar-werkruimte):not(.kopbalk-acties):not(.modal-overlay) { display: none; } /* De vensters Instellingen en Rol aannemen staan in de zijbalk (Arne, 19 okt: "de knoppen in dit menuutje doen het niet goed"): ze bleven verborgen. De kopbalk is een stapellaag (sticky, z-index); met een venster open gaat hij boven de onderbalk en de rest van de pagina, zodat het venster heel te zien is. */ html:not(.embedded) .sidebar:has(> .modal-overlay) { z-index: 1000; } html:not(.embedded) .sidebar-werkruimte { flex: 1 1 auto; min-width: 0; margin: 0; } html:not(.embedded) .sidebar-werkruimteknop { width: auto; max-width: 100%; height: var(--raak); margin-left: calc(-1 * var(--ruimte-2)); padding: 0 var(--ruimte-2); } html:not(.embedded) .sidebar-avatar { margin-left: var(--ruimte-1); } html:not(.embedded) .werkruimtemenu { width: min(280px, calc(100vw - 2 * var(--marge))); } html:not(.embedded) .werkruimtemenu-item { min-height: var(--raak); } html:not(.embedded) .werkruimtemenu-sync { display: flex; border-top: 1px solid var(--lijn); border-radius: 0; color: var(--tekst-zacht); } html:not(.embedded) .sidebar > .kopbalk-acties.alleen-telefoon { display: flex; flex: none; gap: 0; } html:not(.embedded) .kopbalk-icoon .icon { stroke-width: 1.5; color: var(--tekst-zacht); } /* ── De onderbalk (#15832, B-097): Inbox · Mijn werk · Projecten · Zoeken, voor elke rol ── */ html:not(.embedded) .onderbalk { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--vlak-blad); border-top: 1px solid var(--lijn); } .onderbalk-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--raak); padding: 0; border: 0; background: none; color: var(--tekst-zacht); font: var(--rol-label); text-decoration: none; cursor: pointer; } .onderbalk-item .icon { width: 22px; height: 22px; stroke-width: 1.5; } .onderbalk-item.active { color: var(--tekst); } .onderbalk-item:focus-visible { outline-offset: -2px; border-radius: var(--hoek-veld); } /* Vastleggen: een stille witte knop, niet paars (B-097); de enige paarse knop is de hoofdactie. */ html:not(.embedded) .zwevende-knop { position: fixed; z-index: 52; right: var(--ruimte-4); bottom: calc(76px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--lijn-sterk); border-radius: var(--hoek-antwoord); background: var(--vlak-blad); color: var(--tekst); box-shadow: var(--schaduw-zwevend); cursor: pointer; transition: transform var(--duur-kort) var(--beweging-standaard), opacity var(--duur-kort) var(--beweging-standaard); } @media (prefers-reduced-motion: reduce) { html:not(.embedded) .zwevende-knop { transition: none; } } html:not(.embedded) .zwevende-knop:active { background: var(--vlak-hover); } html:not(.embedded) .zwevende-knop .icon { width: 22px; height: 22px; stroke-width: 1.5; } html:not(.embedded) .zwevende-knop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Lees je omlaag, dan schuift de knop weg (js/zweefknop.js): hij dekt nooit een regel af terwijl je leest. */ html:not(.embedded).lezen .zwevende-knop:not(:focus-visible) { transform: translateY(calc(100% + 76px)); opacity: 0; pointer-events: none; } html:not(.embedded):has(.opnamebalk) .zwevende-knop { bottom: calc(140px + env(safe-area-inset-bottom)); } html:not(.embedded) .opnamebalk { bottom: calc(76px + env(safe-area-inset-bottom)); } html:not(.embedded) .opnamebalk-fout { bottom: calc(136px + env(safe-area-inset-bottom)); } html:not(.embedded) .app-page:has(.opnamebalk) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } /* De melding (#15728, #15817) boven de onderbalk en de zwevende knop, over de hele breedte. */ html:not(.embedded) .melding-plek { left: var(--ruimte-2); right: var(--ruimte-2); width: auto; max-width: none; transform: none; bottom: calc(144px + env(safe-area-inset-bottom)); } html:not(.embedded):has(.opnamebalk) .melding-plek { bottom: calc(204px + env(safe-area-inset-bottom)); } html:not(.embedded) .melding { flex-wrap: wrap; gap: 0 10px; } html:not(.embedded) .melding-tekst { flex: 1 1 180px; } /* ── 2. De paginakop: terug, de titel en de meta; de uitleg en de acties niet ── */ html:not(.embedded) .page-header { flex-wrap: nowrap; align-items: center; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-3); padding-top: var(--ruimte-3); } html:not(.embedded) .page-header-text { flex: 1 1 auto; min-width: 0; } html:not(.embedded) .page-eyebrow, html:not(.embedded) .page-subtitle, html:not(.embedded) .page-header-actions { display: none; } html:not(.embedded) .page-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html:not(.embedded) .page-title-rij .page-title { display: block; } /* De uitleg van de projectstand midden in het scherm, met een marge rondom: nooit tegen de rand (B-088) */ .projectstand-uitleg:popover-open { position: fixed; inset: 0; width: calc(100vw - 2 * var(--ruimte-4)); height: fit-content; max-height: calc(100dvh - 2 * var(--ruimte-8)); margin: auto; overflow-y: auto; position-area: none; } html:not(.embedded) .page-meta { display: block; margin-top: 2px; font: var(--rol-klein); color: var(--tekst-zacht); } html:not(.embedded) .page-terug { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--raak); height: var(--raak); margin-left: calc(-1 * var(--ruimte-3)); border-radius: 50%; color: var(--tekst); } html:not(.embedded) .page-terug .icon { width: 24px; height: 24px; } html:not(.embedded) .page-terug:active { background: var(--vlak-zacht); } /* ── 3. Het antwoord: zonder kaart; de schermbalk met de terugknop sluit aan op de kopbalk ── */ html:not(.embedded) .schermbalk { position: static; margin: 0 calc(-1 * var(--marge)) 0; } html:not(.embedded) .schermbalk + .page-header { padding-top: 0; } html:not(.embedded) .catalogus-werkblad .schermbalk { margin: 0; } /* ── 4. Filterchips: alleen om te filteren, met het aantal ── */ .navchips { display: flex; gap: var(--ruimte-2); margin: 0 calc(-1 * var(--marge)) var(--ruimte-4); padding: 2px var(--marge); overflow-x: auto; scrollbar-width: none; } .navchips::-webkit-scrollbar { display: none; } .navchip { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--ruimte-1); min-height: var(--raak); padding: 0 var(--ruimte-4); border: 0; border-radius: var(--hoek-rond); background: var(--vlak-blad); color: var(--tekst); font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: var(--schaduw-uitklap); } .navchip.is-actief { background: var(--nadruk); color: var(--tekst-op-donker); } .navchip-telling { font-weight: 400; color: var(--tekst-zacht); } .navchip.is-actief .navchip-telling { color: color-mix(in srgb, var(--tekst-op-donker) 80%, transparent); } /* een schakelaar (Lopend): aan is een vinkje en een tint, geen gevuld vlak */ .navchip-schakel.is-actief { background: var(--vlak-actief); color: var(--tekst); } .navchip-schakel::before { content: "✓ "; position: static; display: none; } .navchip-schakel.is-actief::before { display: inline; } /* ── 5. Groepen: de kop erboven, compact ── */ html:not(.embedded) .panel-body { padding: var(--ruimte-3); } html:not(.embedded) :is(.panel-header, .todo-head, .sectie-kop) { flex-wrap: wrap; margin-bottom: var(--ruimte-1); } html:not(.embedded) .btn { min-height: var(--raak); max-width: 100%; white-space: normal; } html:not(.embedded) :is(.sectie-kop, .panel-header) .btn { min-height: var(--raak); } html:not(.embedded) .knop-icoon { min-width: var(--raak); padding: 0; border-color: transparent; background: none; color: var(--tekst-zacht); } html:not(.embedded) .knop-icoon .icon { display: inline; width: 20px; height: 20px; } html:not(.embedded) .knop-icoon .knop-tekst { display: none; } html:not(.embedded) .sectie-kop:has(> .niet-telefoon:first-child) { justify-content: flex-end; } html:not(.embedded) .sectie-kop .knoppen { flex-wrap: nowrap; gap: var(--ruimte-1); } html:not(.embedded) .empty-state { padding: var(--ruimte-8) var(--ruimte-4); } html:not(.embedded) .sectie > .sectie-link { float: right; margin-top: calc(-1 * var(--raak)); } /* ── 6. Regels: minstens 48 px, de hele regel tikbaar met een pijl ── */ html:not(.embedded) .todo-list > li { flex-wrap: nowrap; align-items: flex-start; padding: var(--ruimte-2) var(--ruimte-3); } /* de persoon vooraan op 28 px (#15726); de zin houdt de breedte en kapt na drie regels af, de regel met soort en wie blijft */ html:not(.embedded) .todo-wie { margin-top: 2px; } /* soort, stand en wie op de telefoon zonder punten: een punt aan het begin van een nieuwe regel leest als ruis */ html:not(.embedded) .todo-meta { gap: 0 var(--ruimte-3); } html:not(.embedded) .todo-meta > * + *::before { content: none; } html:not(.embedded) .todo-naam { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not(.embedded) .todo-zin { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html:not(.embedded) .todo-list > li > .btn:not(.btn-accent) { align-self: center; } html:not(.embedded) .todo-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } /* de knop van een regel wordt een pijl, en de hele regel de knop */ html:not(.embedded) .todo-list > li > .btn:not(.btn-accent) { position: static; min-width: 20px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 0; color: var(--tekst-zacht); } html:not(.embedded) .todo-list > li > .btn:not(.btn-accent)::before { content: "›"; font: var(--rol-titel); } html:not(.embedded) .todo-list > li > .btn:not(.btn-accent)::after { content: ""; position: absolute; inset: 0; } /* de bovenste regel houdt zijn knop */ html:not(.embedded) .todo-list > li.todo-eerst { display: grid; grid-template-columns: var(--persoon) minmax(0, 1fr); column-gap: var(--ruimte-3); row-gap: var(--ruimte-2); align-items: start; } html:not(.embedded) .todo-list > li.todo-eerst .todo-zin { display: inline; -webkit-line-clamp: unset; } html:not(.embedded) .todo-list > li.todo-eerst > .btn-accent { grid-column: 2; justify-self: end; min-height: var(--raak); } html:not(.embedded) .todo-list > li.todo-groep { padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-1); } /* Op een tabblad: leesbare inhoud, de actie eronder en weinig ruimte vóór de onderdelen. */ html:not(.embedded) .todo-card.is-kort .todo-list > li.todo-eerst { grid-template-columns: var(--persoon) minmax(0, 1fr); padding-block: var(--ruimte-2); } html:not(.embedded) .todo-card.is-kort .todo-list > li.todo-eerst .todo-zin { display: -webkit-box; -webkit-line-clamp: 2; } html:not(.embedded) .todo-card.is-kort .todo-list > li.todo-eerst > .btn-accent { grid-column: 2; min-height: var(--raak); } html:not(.embedded) .todo-card.is-kort .todo-meer { min-height: var(--raak); margin: 0; } html:not(.embedded) .uitklap-kop { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--ruimte-3); } html:not(.embedded) .uitklap-meta { grid-column: 2; justify-content: flex-start; } html:not(.embedded) .uitklap-inhoud { margin-left: var(--ruimte-3); margin-right: var(--ruimte-3); } /* Een tabel als lijst: de rijen onder elkaar, de knop in beeld. */ .data-table-stack thead { display: none; } .data-table-stack, .data-table-stack tbody { display: block; width: 100%; } .data-table-stack tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-1) var(--ruimte-3); padding: var(--ruimte-3); border-bottom: 1px solid var(--lijn); } .data-table-stack tr:last-child { border-bottom: 0; } .data-table-stack td { padding: 0; border: 0; } .data-table-stack td:first-child { flex-basis: 100%; } html:not(.embedded) #projectenlijst .row-actions .btn { min-width: 20px; min-height: var(--raak); padding: 0; border: 0; background: none; font-size: 0; color: var(--tekst-zacht); } html:not(.embedded) #projectenlijst .row-actions .btn::before { content: "›"; font: var(--rol-titel); } html:not(.embedded) #projectenlijst .row-actions .btn::after { content: ""; position: absolute; inset: 0; } /* Zonder dossier op Mijn werk (#15821): de knop onder de naam als de regel smal is */ html:not(.embedded) .zonderdossier-regel { flex-wrap: wrap; padding: var(--ruimte-2) 0; } /* Projecten: naam, nummer en klant links, de status rechts */ html:not(.embedded) #projectenlijst tr { flex-wrap: nowrap; min-height: 60px; padding: var(--ruimte-2) var(--ruimte-3); } html:not(.embedded) #projectenlijst td:first-child { flex: 1 1 0%; min-width: 0; } html:not(.embedded) #projectenlijst td:first-child :is(.taak-omschrijving, .form-hint) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not(.embedded) #projectenlijst td:nth-child(2), html:not(.embedded) #projectenlijst td:nth-child(4), html:not(.embedded) #projectenlijst .badge-default { display: none; } /* ── 7. Het projectdetail (#15833): ‹ Projecten, de kop, de eigenschappen alleen als ze open zijn, dan de tabs. Op Overzicht is de mijlpaalkaart het antwoord (#15818). ── */ html:not(.embedded) .scherm-details:has(.dossier-hoofd) { margin-top: var(--ruimte-1); } html:not(.embedded) .dossier-paneel:not(.is-open), html:not(.embedded) .dossier-paneel-fasen { display: none; } html:not(.embedded) .dossier-paneel { margin-top: var(--ruimte-2); } html:not(.embedded) .dossier-blad > .scherm-antwoord:not(:has(.mijlpaalkaart, .loading-inline, .empty-state)) { display: none; } /* De tabs als één rij pillen die schuift, plakkend onder de kopbalk (B-094, B-097). */ html:not(.embedded) .tabrij { position: sticky; top: 48px; z-index: 30; margin: 0 calc(-1 * var(--marge)) var(--ruimte-4); padding: var(--ruimte-2) var(--marge); background: var(--vlak-blad); /* Een tab die deels buiten beeld valt, vervaagt in de marge: zo zie je dat de rij schuift. Een tab die helemaal te zien is, valt binnen de marge en blijft scherp. Een masker leest alleen de dekking: black is geen kleur op het scherm, en dus geen token. */ mask-image: linear-gradient(to right, transparent, black var(--marge), black calc(100% - var(--marge)), transparent); } html:not(.embedded) .stappenrij li:not(.is-huidig) .stappenrij-naam { visibility: hidden; } html:not(.embedded) .segmented { display: flex; flex-wrap: wrap; width: 100%; } html:not(.embedded) .segmented-option { flex: 1 1 auto; min-width: 0; min-height: var(--raak); padding: var(--ruimte-1); } /* Het aantal onder de naam: vier herkenbare keuzes, ook met tweecijferige aantallen. */ html:not(.embedded) .afspraak-keuze .segmented { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } html:not(.embedded) .afspraak-keuze .segmented-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } html:not(.embedded) .afspraak-telling { font: var(--rol-label); } html:not(.embedded) .groep-reden { font: var(--rol-klein); } /* Taken: de omschrijving, wie en wanneer; een badge alleen als er iets mis is */ .taak-kop { gap: var(--ruimte-2); padding-left: var(--ruimte-3); } .taak-vink { position: relative; width: 26px; height: 26px; } .taak-vink::after { content: ""; position: absolute; inset: -9px; } /* Hier gaat de taak voor de algemene uitklapregel (html:not(.embedded) .uitklap-kop en .uitklap-meta): even zwaar en later, anders kwam de badge in een smalle tweede kolom en viel zijn woord weg aan de rand (#15726). De badge staat als vorm plus woord in de grijze regel onder de titel, op één regel waar dat past. */ html .uitklap-kop.taak-knop { grid-template-columns: minmax(0, 1fr) auto; padding: var(--ruimte-2) 0 var(--ruimte-2) var(--ruimte-1); } html .taak-knop .uitklap-titel { grid-column: 1; grid-row: 1; } html .taak-knop .uitklap-meta { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: 0 var(--ruimte-3); margin-top: 2px; } html .taak-knop .uitklap-meta .badge { padding: 0; font: var(--rol-klein); color: var(--tekst-zacht); } html .taak-knop .uitklap-pijl { grid-column: 2; grid-row: 1 / span 2; align-self: center; } /* Op de telefoon alleen wat afwijkt; onbekend is niet nul en blijft dus altijd staan. */ .taak-knop .uitklap-meta .badge:not(.badge-danger):not(.badge-warning):not(.badge-muted) { display: none; } .taak-knop .uitklap-meta:not(:has(.badge-danger, .badge-warning, .badge-muted)) { display: none; } .taak-details { padding-left: var(--ruimte-3); } html:not(.embedded) .checkbox { min-height: var(--raak); } html:not(.embedded) .taken-afgerond { display: inline-flex; align-items: center; min-height: var(--raak); } html:not(.embedded) .geschiedenis li { grid-template-columns: 1fr; gap: 2px; } html:not(.embedded) .geschiedenis time { display: flex; flex-wrap: wrap; gap: 0 var(--ruimte-2); } /* De naam in een eigen span: zonder de br vloeiden tijd en naam anders samen tot één tekst zonder ruimte. */ html:not(.embedded) .geschiedenis time br { display: none; } /* Het AFAS-dossier: een lijst in plaats van een tabel met zes kolommen */ html:not(.embedded) .afas-dossier, html:not(.embedded) .afas-dossier tbody { display: block; width: 100%; } html:not(.embedded) .afas-dossier thead { display: none; } html:not(.embedded) .afas-dossier tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--ruimte-2); padding: var(--ruimte-3); border-bottom: 1px solid var(--lijn); } html:not(.embedded) .afas-dossier td { display: block; padding: 0; border: 0; font: var(--rol-klein); color: var(--tekst-zacht); } html:not(.embedded) .afas-dossier .ad-onderwerp { order: -1; flex: 1 1 100%; font: var(--rol-tekst); color: var(--tekst); } html:not(.embedded) .afas-dossier .ad-type::before { content: "· "; } html:not(.embedded) .afas-dossier .ad-aantal { display: none; } html:not(.embedded) .afas-dossier tr.actie-paneel td { flex: 1 1 100%; color: var(--tekst); } /* ── 8. Invoer: 16 px, anders zoomt iOS in ── */ html:not(.embedded) :is(.input, .select, .textarea) { font-size: var(--invoer); } /* ── 9. De schermen ── */ /* Te doen: de bolletjes vóór de projectnaam (Arne, 19 okt). Achter een naam van wisselende lengte stonden ze per regel ergens anders; vooraan staan de vier kolommen op elke regel recht onder elkaar. */ html:not(.embedded) .todo-project .projectstand { order: -1; } html:not(.embedded) .todo-project .projectstand-knop { padding-left: 0; } /* Mijn planning: dagen compact */ html:not(.embedded) .planningsdag { gap: var(--ruimte-1); padding: var(--ruimte-3); } html:not(.embedded) .week-dag { flex-basis: 100%; } /* De tab Uren (#15819): per persoon en de prognose onder elkaar; per fase de balk op een eigen regel. */ html:not(.embedded) .urenpaneel-twee { grid-template-columns: minmax(0, 1fr); gap: 0; } html:not(.embedded) :is(.urenpaneel-meter, .urenpaneel-grafiek) { padding-inline: var(--ruimte-3); } html:not(.embedded) .urenperfase-kop { grid-template-columns: auto minmax(0, 1fr) auto; } html:not(.embedded) .urenperfase-kop .urenmeter { grid-column: 2 / 4; grid-row: 2; } html:not(.embedded) .verloop-svg.is-laptop { display: none; } html:not(.embedded) .verloop-svg.is-telefoon { display: block; } /* Inbox (#15837): de lijst met regels van 60 px; een item opent op een eigen scherm. */ html:not(.embedded) .wachtregel { min-height: 60px; padding-inline: var(--ruimte-2); } html:not(.embedded) .wachtregel-beeld { width: 36px; height: 36px; } html:not(.embedded) .wachtregel { grid-template-columns: 36px minmax(0, 1fr) auto; } /* Een update verwerken: de kaarten zonder inspringen, de balk boven de onderbalk, het potlood weg */ html:not(.embedded) .voorstelkaart-kies { width: 22px; height: 22px; } html:not(.embedded) .neemover-balk { bottom: calc(72px + env(safe-area-inset-bottom)); width: 100%; } html:not(.embedded):has(.neemover-balk) .zwevende-knop { display: none; } /* Update insturen: de drie tegels compact op één regel */ .aanleveren { margin-bottom: var(--ruimte-2); } .aanleveren-knop { flex-direction: row; min-height: var(--raak); } .aanleveren-knop .icon { width: 18px; height: 18px; } .aanleveren-of { display: none; } .vastleggen-soort { flex-wrap: nowrap; } /* ── Itemacties: bij het item, nooit over gegevens of personenpillen heen. Meer blijft een blad van onderen. ── */ html:not(.embedded) .itemacties-balk { padding: 0 0 var(--ruimte-3); border-top: 0; border-bottom: 1px solid var(--lijn-sterk); } html:not(.embedded) .itemacties-hoofd { flex: 0 1 auto; min-height: var(--raak); } /* Zonder hoofdknop blijven de namen zichtbaar. Met een hoofdknop staat alles op één rij (#15818): Wijzig en Meer zijn dan iconknoppen van 44 px, met hun naam als aria-label en tooltip. */ html:not(.embedded) .itemacties-wijzig, html:not(.embedded) .itemacties-meer-knop { min-width: var(--raak); min-height: var(--raak); justify-content: center; padding-inline: var(--ruimte-2); } html:not(.embedded) .itemacties-balk:has(.itemacties-hoofd) .itemacties-tekst { display: none; } html:not(.embedded) .itemacties-balk:has(.itemacties-hoofd) :is(.itemacties-wijzig, .itemacties-meer-knop) { width: var(--raak); padding: 0; } html:not(.embedded) .itemacties-balk:has(.itemacties-hoofd) { column-gap: var(--ruimte-2); } html:not(.embedded) .itemacties-balk:has(.itemacties-hoofd) .itemacties-hoofd { min-width: 0; } html:not(.embedded):has(.itemacties-balk) .zwevende-knop { display: none; } html:not(.embedded) .itemacties-overlay { z-index: 1400; background: var(--vlak-overlay); } html:not(.embedded) .itemacties-menu { position: fixed; z-index: 1500; top: auto; left: 0; right: 0; bottom: 0; min-width: 0; max-height: calc(100dvh - var(--ruimte-4)); overflow-y: auto; padding: var(--ruimte-2) var(--ruimte-2) calc(var(--ruimte-2) + env(safe-area-inset-bottom)); border-radius: var(--hoek-groep) var(--hoek-groep) 0 0; animation: venster-omhoog var(--duur-middel) var(--beweging-in); } html:not(.embedded) .itemacties-menu-kop { display: block; padding: var(--ruimte-2) var(--ruimte-3); overflow: hidden; font: var(--rol-klein); color: var(--tekst-zacht); text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--lijn); } html:not(.embedded) .itemacties-menu-item.is-sluiten { display: flex; justify-content: center; color: var(--tekst-zacht); } /* ── 10. Vensters: een blad van onderen, de hoofdknop in de voet, boven het toetsenbord (#15264) ── */ .modal-overlay { place-items: end center; padding: 0 0 var(--toetsenbord, 0px); } .modal { width: 100%; max-height: 92vh; max-height: min(92dvh, calc(var(--zichtbaar, 100dvh) - var(--ruimte-3))); border-radius: var(--hoek-groep) var(--hoek-groep) 0 0; animation: venster-omhoog var(--duur-middel) var(--beweging-in); } .modal-header { padding: var(--ruimte-2) var(--ruimte-2) 0 var(--ruimte-4); } .modal-body { padding-inline: var(--ruimte-4); } .modal-sluit { width: var(--raak); height: var(--raak); } /* Een bijlage in beeld (#16010): schermvullend, zonder blad van onderen. */ .modal-overlay:has(> .bijlagevenster) { padding: 0; } .modal.bijlagevenster { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); } .bijlagevenster-inhoud { padding: var(--ruimte-2); border-radius: 0; } .modal-footer { justify-content: flex-end; padding: var(--ruimte-3) var(--ruimte-4) calc(var(--ruimte-3) + env(safe-area-inset-bottom)); border-radius: 0; } .toetsenbord-open .modal-footer { padding-bottom: var(--ruimte-3); } .modal-footer .btn { min-height: var(--raak); } .modal-footer .btn-accent { flex: 0 1 auto; min-width: 44%; } .modal-footer .voet-klein { margin-right: auto; } .modal-reden { display: block; flex: 1 1 100%; margin: 0; font: var(--rol-klein); color: var(--tekst-zacht); text-align: right; } .modal-header, .modal-footer { flex-shrink: 0; } .modal-body { min-height: 0; } /* De kleurkiezer (#15724): een blad van onderen met de acht kleuren, de knoppen met de duim bereikbaar. */ .kleurkiezer-achter { background: var(--vlak-overlay); } .kleurkiezer-venster { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; padding: var(--ruimte-3) var(--ruimte-4) calc(var(--ruimte-4) + env(safe-area-inset-bottom)); border-radius: var(--hoek-groep) var(--hoek-groep) 0 0; box-shadow: var(--schaduw-venster); animation: venster-omhoog var(--duur-middel) var(--beweging-in); } .kleurkiezer-voet .btn { min-height: var(--raak); } } /* De ronde op de telefoon (#15590): raakvlakken van 44 px; de voet met de hoofdknop direct onder de aspecten, met de duim bereikbaar. */ @media (max-width: 720px) { .ronde-aspect { grid-template-columns: minmax(0, 1fr); padding: var(--ruimte-2) 0; border: 0; border-bottom: var(--lijn-dikte) solid var(--lijn); border-radius: 0; } .ronde-aspect:last-child { border-radius: 0; } .ronde-aspect > .ronde-aspect-toelichting { grid-row: auto; margin-left: 0; } .ronde-aspect > .ronde-advies, .ronde-aspect > .ronde-advies-regel { margin-left: 0; } .ronde-groep .ronde-projectnummer { display: none; } /* De omvang op één regel; wie hem koos, staat in de uitleg bij de tekst (ervaringstoets 21). */ .omvang-herkomst, .ronde-aspect-of { display: none; } /* De omvang, de review en Wijzig op één regel (#15818): het ritme staat in de tooltip, Wijzig is een potlood van 44 px. */ .omvang-wijzig-tekst { display: none; } .omvang-wijzig { width: var(--raak); min-width: var(--raak); min-height: var(--raak); margin-left: auto; padding: 0; justify-content: center; } .omvang-wijzig .icon { display: block; width: 16px; height: 16px; } .ronde-aspect-acties .btn, .omvang-keuze .btn, .omvang-keuze .select { min-height: var(--raak); } .ronde-voet .btn { min-height: var(--raak); } .beoordeling-regel { align-items: flex-start; } /* Compact (#15821): de omvang met het potlood op één regel (het ritme in de tooltip), de projectnaam kapt af voor Open het dossier, en de voet op één rij met Vorig en Onderbreken als iconknoppen van 44 px. */ .beoordeling-regel { flex-wrap: nowrap; margin-bottom: var(--ruimte-1); } .beoordeling-regel .omvang:not(:has(.omvang-keuze)) { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; } .beoordeling-regel .omvang-stand { flex: 1 1 auto; min-width: 0; } .beoordeling-regel .omvang-stand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .beoordeling-regel .omvang-ritme { display: none; } .ronde-groep .groepskop { flex-wrap: nowrap; } .ronde-groep .groepskop-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ronde-groep .groepskop-rechts { flex: none; } .ronde-open { white-space: nowrap; } .ronde-voet { flex-wrap: nowrap; } .ronde-voet-icoon { width: var(--raak); min-width: var(--raak); padding: 0; justify-content: center; } .ronde-voet-volgende { flex-wrap: nowrap; } .ronde-nog { display: none; } /* Projecten (#15821): Lopend naast de tabs. Zonder de marge en de negatieve rand van de plakkende tabrij, anders zakt Lopend 8 px onder de tabs. */ html:not(.embedded) .projecten-weergave > .tabrij { align-self: stretch; align-items: center; margin: 0; padding: 0; mask-image: none; } } @media (prefers-reduced-motion: reduce) { .kopbalk-icoon.is-bezig .icon, .modal, .kleurkiezer-venster, .itemacties-menu { animation: none; } } }