/* Viewport sizing only: keep form handlers, visibility and data unchanged. */
@media screen {
 body:has(#admin:not(.hidden))>.wrap {width:100%;max-width:none;min-height:100dvh;box-sizing:border-box}
 #admin {min-width:0;max-width:100%;box-sizing:border-box}
 #admin>.tab {min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:break-word}
 body dialog {box-sizing:border-box!important;inset:0!important;margin:auto!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;min-height:0!important;overflow:auto;overscroll-behavior:contain}
 body dialog>header {position:sticky;top:0;z-index:10;flex-shrink:0}
 body dialog input,body dialog select,body dialog textarea {box-sizing:border-box;max-width:100%;min-width:0}
 #personalLayoutDialog[open] {display:flex;flex-direction:column;overflow:hidden!important}
 #personalLayoutDialog>header,#personalLayoutDialog>.personalLayoutIntro,#personalLayoutDialog>.personalLayoutTools,#personalLayoutDialog>[data-status] {flex-shrink:0}
 #personalLayoutDialog .personalLayoutColumns {flex:1;min-height:0;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);overflow:hidden}
 #personalLayoutDialog [data-list],#personalLayoutDialog [data-editor] {min-height:0;min-width:0;max-height:none;overflow:auto;overscroll-behavior:contain;scroll-padding:12px}
 #personalLayoutDialog [data-editor]>* {flex-shrink:0}
 #personalLayoutDialog [data-editor]>h3 {margin:0 0 8px}
 #personalLayoutDialog [data-editor]>button[type=submit] {position:sticky;bottom:0;z-index:2;box-shadow:0 -5px 12px #ffffff;min-height:44px}
 #personalLayoutDialog details {flex-shrink:0;max-height:25dvh;overflow:auto}
}
@media screen and (max-width:700px) {
 body dialog {width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important}
 #personalLayoutDialog[open] {overflow:auto!important;display:block}
 #personalLayoutDialog>header {padding:10px;gap:8px}
 #personalLayoutDialog h2 {font-size:20px}
 #personalLayoutDialog .personalLayoutIntro,#personalLayoutDialog [data-status],#personalLayoutDialog details {margin:10px}
 #personalLayoutDialog .personalLayoutTools {padding:0 10px;gap:8px}
 #personalLayoutDialog .personalLayoutColumns {display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;padding:0 10px 12px;gap:10px}
 #personalLayoutDialog [data-list] {max-height:25dvh;min-height:100px}
 #personalLayoutDialog [data-editor] {overflow:visible;padding:12px}
 #personalLayoutDialog .personalLayoutSizes {grid-template-columns:repeat(3,minmax(0,1fr))}
 #personalLayoutDialog .personalLayoutSizes label {font-size:12px;overflow-wrap:anywhere}
 #personalLayoutDialog [data-editor]>button[type=submit] {bottom:env(safe-area-inset-bottom,0px)}
}

/* Visual audit: all dialog headings and long controls remain within the viewport. */
@media screen {
 body dialog :is(header,.assignmentHead,.payHead){min-width:0;gap:8px;flex-wrap:wrap}
 body dialog :is(header,.assignmentHead,.payHead)>:is(h2,h3,div){min-width:0;overflow-wrap:anywhere}
 body dialog :is(header,.assignmentHead,.payHead)>.btn{flex-shrink:0}
 body dialog .btn{max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}
 body dialog :is(.assignmentBody,.payBody,.kmImportFields,.dialogBody){min-width:0;max-width:100%;box-sizing:border-box}
 body dialog[aria-label="Kilometers invoeren"]>div:first-child{position:sticky;top:-20px;z-index:10;background:white;flex-wrap:wrap;padding:10px 0}
 body dialog[aria-label="Kilometers invoeren"]>div:first-child h2{margin:0;font-size:22px;min-width:0}
 body dialog[aria-label="Kilometers invoeren"]>div:first-child .btn{flex-shrink:0}
 #driver,#customer{min-width:0;max-width:100%;box-sizing:border-box}
 #customer :is(input,select,textarea,.btn){max-width:100%;box-sizing:border-box}
}
@media screen and (max-width:600px){
 body dialog .assignmentHead h2,body dialog .payHead h2{font-size:18px}
 body dialog[aria-label="Kilometers invoeren"]{padding:12px!important}
 body dialog[aria-label="Kilometers invoeren"]>div:first-child{top:-12px}
}

/* Chauffeur indelen: compact visual layout only; all actions remain unchanged. */
@media screen {
 body dialog.assignmentCompact {font-size:16px;line-height:1.35;scroll-padding-top:76px}
 body dialog.assignmentCompact .assignmentHead {padding:10px 16px}
 body dialog.assignmentCompact .assignmentHead h2 {font-size:22px;line-height:1.2}
 body dialog.assignmentCompact .assignmentBody {padding:12px 16px 20px}
 body dialog.assignmentCompact p {margin:8px 0;line-height:1.4}
 body dialog.assignmentCompact p:empty {display:none}
 body dialog.assignmentCompact .btn {font-size:16px;line-height:1.25;padding:10px 14px;min-height:44px;margin:3px 4px 3px 0}
 body dialog.assignmentCompact .assignmentGrid {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin:10px 0}
 body dialog.assignmentCompact .assignmentGrid label {font-size:16px;gap:4px;min-width:0;margin:0}
 body dialog.assignmentCompact .assignmentGrid :is(input,select) {font-size:16px;line-height:1.25;padding:8px 10px;height:44px;min-height:44px;margin:0}
 body dialog.assignmentCompact .assignmentInfo {padding:10px 12px;margin:8px 0}
 body dialog.assignmentCompact .muted {font-size:14px}
 body dialog.assignmentCompact .assignmentList {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
 body dialog.assignmentCompact .assignmentList>h3 {grid-column:1/-1;margin:12px 0 0;font-size:18px}
 body dialog.assignmentCompact .assignmentList>.assignmentInfo {margin:0;min-width:0;overflow-wrap:anywhere}
}
@media screen and (max-width:1000px) {
 body dialog.assignmentCompact .assignmentGrid,body dialog.assignmentCompact .assignmentList {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:600px) {
 body dialog.assignmentCompact .assignmentHead {padding:8px 10px}
 body dialog.assignmentCompact .assignmentHead h2 {font-size:19px}
 body dialog.assignmentCompact .assignmentBody {padding:10px 10px calc(16px + env(safe-area-inset-bottom,0px))}
 body dialog.assignmentCompact .assignmentGrid,body dialog.assignmentCompact .assignmentList {grid-template-columns:minmax(0,1fr);gap:8px}
}

/* Keep the assignment title and disconnect actions visible above the scrolling form. */
@media screen {
 body dialog.assignmentCompact[open] {display:flex;flex-direction:column;overflow:hidden}
 body dialog.assignmentCompact>.assignmentHead {flex-shrink:0;position:static}
 body dialog.assignmentCompact>.assignmentDisconnectBar {flex-shrink:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0;padding:8px 16px;border-width:0 0 1px;border-radius:0}
 body dialog.assignmentCompact>.assignmentDisconnectBar>p {order:2;flex-basis:100%;font-size:13px;margin:0}
 body dialog.assignmentCompact .assignmentDisconnectDriver {font-size:14px;margin-right:auto}
 body dialog.assignmentCompact>.assignmentBody {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:12px}
}
@media screen and (max-width:600px) {
 body dialog.assignmentCompact>.assignmentDisconnectBar {padding:8px 10px;gap:4px 6px}
 body dialog.assignmentCompact>.assignmentDisconnectBar>strong {font-size:15px}
 body dialog.assignmentCompact>.assignmentDisconnectBar>.btn {flex:1 1 95px;font-size:14px;padding:8px;margin:0}
 body dialog.assignmentCompact .assignmentDisconnectDriver {flex-basis:100%}
}