/* ===== 1. app-base.css ===== */
/* Algemene applicatie-opmaak en toegankelijkheid. */
:focus-visible {
  outline: 3px solid #f2b705;
  outline-offset: 2px;
}

@media screen {
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.table-wrap {
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  th,
  td {
    padding: .5rem;
  }

  .section-box {
    scroll-margin-top: 1rem;
  }

  .remove-row {
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.notes-measure-probe {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 181mm;
  box-sizing: border-box;
  margin: 0;
  padding: 0 .5mm;
  border: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.5pt;
  font-weight: 400;
  line-height: 7.4mm;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.administration-coding-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid #cbd6cf;
}

.administration-coding-panel h3,
.administration-coding-section h4 {
  margin: 0;
}

.administration-coding-section {
  display: grid;
  gap: .55rem;
  padding: .9rem;
  border: 1px solid #cbd6cf;
  border-radius: 8px;
  background: #f8faf9;
}

.administration-coding-rows {
  display: grid;
  gap: .5rem;
}

.administration-coding-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: .8rem;
  align-items: center;
  padding: .55rem .65rem;
  border-radius: 6px;
  background: #fff;
}

.administration-coding-row span {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .administration-coding-row {
    grid-template-columns: 1fr;
  }
}

[hidden]{display:none!important}
:root{font-family:Arial,Helvetica,sans-serif;color:#222;background:#eef1ef;line-height:1.35}*{box-sizing:border-box}body{margin:0}.app-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.2rem;background:#173f2c;color:#fff;box-shadow:0 2px 8px #0003}.app-bar span{display:block;font-size:.8rem;opacity:.8}.toolbar{display:flex;gap:.6rem;flex-wrap:wrap}button,.button-link{border:0;border-radius:6px;padding:.6rem .9rem;background:#2f7d4b;color:#fff;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font:inherit}.secondary,.button-link.secondary{background:#fff;color:#173f2c;border:1px solid #cbd6cf}.compact{padding:.4rem .65rem;font-size:.88rem}.sheet{width:min(1180px,calc(100% - 2rem));margin:1.5rem auto;background:#fff;padding:1.4rem;box-shadow:0 4px 22px #0002}.masthead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.brand h1,.masthead h2{margin:0;font-size:2rem}.brand p{margin:.2rem 0 0}.section-box{border:1px solid #555;padding:.7rem;margin-bottom:.8rem}.top-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.top-grid>label,.stacked-fields label{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:.5rem}.stacked-fields{display:grid;gap:.45rem}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.section-heading h3,.notes-section h3{margin:0;font-size:1rem}.add-row{padding:.35rem .6rem;font-size:.8rem}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:720px}th,td{border-right:1px solid #888;border-bottom:1px solid #aaa;padding:.55rem;vertical-align:top;text-align:left}th:last-child,td:last-child{border-right:0}th{font-size:.86rem;font-weight:600}small{display:block;font-weight:400}input,textarea,select{width:100%;border:0;border-bottom:1px dotted #666;padding:.35rem .25rem;background:transparent;font:inherit;color:inherit}input:focus,textarea:focus,select:focus{outline:2px solid #2f7d4b33;border-bottom-color:#2f7d4b}input[type=checkbox],input[type=radio]{width:auto;accent-color:#2f7d4b}textarea{resize:vertical}.split-grid{display:grid;grid-template-columns:2fr 1fr;gap:.8rem}.machine-waste-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(250px,1fr);gap:.8rem;align-items:stretch}.machine-waste-grid>div{min-width:0}.waste-panel{height:calc(100% - .8rem)}.line-list{display:grid;gap:.35rem}.line-row{display:flex;gap:.5rem}.remove-row{padding:.2rem .5rem;background:#8d2f2f}.received-check{display:flex;gap:1rem;align-items:center;border:0;padding:.7rem 0 0}.received-check legend{float:left;margin-right:1rem}.notice{margin:.35rem 0 0;font-size:.85rem}.notes-section textarea{min-height:380px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,#999 29px);line-height:29px;border:0}.save-status{text-align:right;color:#567;font-size:.8rem;margin:0}.platform-shell,.page-shell{width:min(1180px,calc(100% - 2rem));margin:1rem auto;display:grid;gap:1rem}.platform-card{background:#fff;padding:1rem;border-radius:10px;box-shadow:0 2px 14px #0001}.platform-card h1,.platform-card h2{margin:.1rem 0 .5rem}.platform-card h1{font-size:1.45rem}.platform-card h2{font-size:1.1rem}.login-grid,.travel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;align-items:end}.platform-message{margin:.7rem 0 0;padding:.65rem;border-radius:6px;background:#eef3ef}.platform-message[data-kind=warning]{background:#fff5d6}.platform-message[data-kind=error]{background:#fde5e5}.platform-message[data-kind=success]{background:#e3f5e7}.platform-card table button{white-space:nowrap}.platform-card input,.platform-card select{border:1px solid #bbb;border-radius:5px;background:#fff}.platform-card table{min-width:680px}button:disabled{opacity:.5;cursor:not-allowed}.muted{margin:.15rem 0;color:#607067}.status-pill{display:inline-block;padding:.25rem .55rem;border-radius:999px;background:#e8f0eb;color:#173f2c;font-size:.82rem;font-weight:700}.empty-state{text-align:center;color:#68756d;padding:2rem}.users-layout{grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start}.admin-user-form{display:grid;gap:.8rem}.admin-user-form label,.auth-form label{display:grid;gap:.35rem;font-weight:700}.admin-user-form input,.admin-user-form select,.auth-form input{padding:.7rem;border:1px solid #b7c2bb;border-radius:7px;background:#fff}.auth-page{min-height:100vh;background:linear-gradient(135deg,#173f2c 0%,#2f7d4b 55%,#dce8df 55%,#eef3ef 100%);display:grid;place-items:center;padding:1.5rem}.auth-shell{width:min(440px,100%)}.auth-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 18px 50px #0003}.auth-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.8rem}.auth-brand span{display:block;color:#627067;font-size:.85rem}.auth-mark{width:48px;height:48px;border-radius:12px;background:#173f2c;color:#fff!important;display:grid!important;place-items:center;font-weight:800;font-size:1.05rem!important}.auth-card h1{margin:0 0 .35rem;font-size:2rem}.auth-form{display:grid;gap:1rem;margin-top:1.4rem}.auth-form button{margin-top:.25rem;padding:.8rem}.overview-table tbody tr:hover{background:#f6f9f7}.app-page{min-height:100vh}
@media(max-width:760px){.app-bar,.masthead{align-items:flex-start}.app-bar{position:static;flex-direction:column}.top-grid,.split-grid,.machine-waste-grid,.login-grid,.travel-grid,.users-layout{grid-template-columns:1fr}.top-grid>label,.stacked-fields label{grid-template-columns:1fr}.sheet{width:100%;margin:0;padding:.7rem;box-shadow:none}.platform-shell,.page-shell,.platform-card{width:100%;margin:0;border-radius:0}.brand h1,.masthead h2{font-size:1.4rem}.masthead{gap:1rem}.toolbar{width:100%}.toolbar button,.toolbar .button-link{flex:1 1 45%}.auth-page{padding:0;background:#eef1ef}.auth-card{min-height:100vh;border-radius:0;padding:1.4rem}.waste-panel{height:auto}}
@media print{:root{background:#fff;font-size:10pt}.no-print{display:none!important}.sheet{width:100%;margin:0;padding:0;box-shadow:none}.section-box{break-inside:avoid;margin-bottom:5mm}.notes-section{break-before:page;min-height:270mm}.notes-section textarea{min-height:245mm}.masthead{margin-bottom:5mm}input,textarea,select{outline:0!important}select{appearance:none}.brand h1,.masthead h2{font-size:20pt}}

.dashboard-heading{align-items:flex-start}.result-count{white-space:nowrap;color:#173f2c;background:#e8f0eb;padding:.35rem .7rem;border-radius:999px}.dashboard-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto auto;gap:.75rem;align-items:end;margin:1rem 0}.dashboard-filters label{display:grid;gap:.3rem;font-weight:700}.dashboard-filters input,.dashboard-filters select{padding:.65rem;border:1px solid #b7c2bb;border-radius:7px;background:#fff}.row-actions{display:flex;gap:.4rem;flex-wrap:wrap;min-width:230px}.danger{background:#8d2f2f!important;color:#fff!important;border:1px solid #8d2f2f!important}.status-rejected{background:#fde5e5;color:#7b2222}.status-draft{background:#fff5d6;color:#69520c}.history-card{margin-top:1rem}.history-list{display:grid;gap:.55rem}.history-item{display:grid;gap:.15rem;padding:.65rem .75rem;border-left:4px solid #2f7d4b;background:#f6f9f7;border-radius:4px}.history-item span{font-size:.82rem;color:#607067}.history-item p{margin:.25rem 0 0}.overview-table td{vertical-align:middle}@media(max-width:760px){.dashboard-filters{grid-template-columns:1fr}.result-count{align-self:flex-start}.row-actions{min-width:0}.row-actions>*{flex:1 1 45%}}@media print{.history-card{display:none!important}}

/* ===== 2. paper-first-form.css ===== */
/*
 * Paper-first invoerweergave.
 *
 * De bestaande printbestanden blijven onaangetast en zijn de visuele referentie.
 * Deze stylesheet past dezelfde verhoudingen toe op het scherm, met grotere
 * aanraakvlakken en meegroeibare secties voor extra regels.
 */

@media screen {
  body.paper-first-page {
    background: #dfe4e1;
  }

  .paper-orientation-hint {
    display: none;
    width: min(720px, calc(100% - 24px));
    margin: 12px auto 0;
    padding: 10px 14px;
    border: 1px solid #d6b55a;
    border-radius: 8px;
    background: #fff5d6;
    color: #5c4810;
    font-weight: 700;
    text-align: center;
  }

  body.paper-first-page .sheet {
    width: min(1120px, calc(100vw - 24px));
    max-width: none;
    margin: 18px auto 48px;
    padding: clamp(24px, 5.8vw, 68px);
    overflow: visible;
    background: #fff;
    box-shadow: 0 10px 32px #0003;
  }

  body.paper-first-page #workOrderForm {
    --pf-mm: 0.543478cqw;
    --pf-border: max(1px, 0.136cqw);
    --pf-rule: max(1px, 0.109cqw);
    --pf-font: clamp(12px, 1.2cqw, 15px);
    --pf-small-font: clamp(10px, 0.98cqw, 13px);
    --pf-touch-row: 38px;
    --pf-touch-row-large: 44px;
    container-type: inline-size;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--pf-font);
    line-height: 1;
  }

  body.paper-first-page #workOrderForm,
  body.paper-first-page #workOrderForm * {
    box-sizing: border-box;
  }

  body.paper-first-page #workOrderForm input,
  body.paper-first-page #workOrderForm textarea,
  body.paper-first-page #workOrderForm select {
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    color: #111;
    font: inherit;
  }

  body.paper-first-page #workOrderForm input:focus,
  body.paper-first-page #workOrderForm textarea:focus,
  body.paper-first-page #workOrderForm select:focus {
    outline: 3px solid #2f7d4b55;
    outline-offset: 1px;
    background: #f4fbf6;
  }

  /* Kop: dezelfde verdeling als de bewaarde printversie. */
  body.paper-first-page .masthead {
    display: flex;
    min-height: 11.956cqw;
    margin: 0;
    justify-content: space-between;
    align-items: flex-start;
  }

  body.paper-first-page .brand h1 {
    margin: 0;
    font-size: clamp(28px, 3.7cqw, 42px);
    line-height: .92;
  }

  body.paper-first-page .brand p {
    margin: .543cqw 0 0;
    font-size: clamp(12px, 1.5cqw, 17px);
    line-height: 1.2;
  }

  body.paper-first-page .work-order-title {
    display: grid;
    width: calc(50% - .815cqw);
    min-height: 10.87cqw;
    grid-template-rows: 4.348cqw minmax(5.435cqw, auto);
    gap: 1.087cqw;
    align-content: start;
    justify-items: stretch;
  }

  body.paper-first-page .work-order-title h2 {
    margin: 0;
    align-self: start;
    text-align: right;
    font-size: clamp(23px, 2.85cqw, 33px);
    line-height: 1;
  }

  body.paper-first-page .worknumber-field,
  body.paper-first-page .top-grid > .top-field,
  body.paper-first-page .stacked-fields {
    border: var(--pf-border) solid #555;
    background: #fff;
  }

  body.paper-first-page .worknumber-field,
  body.paper-first-page .top-field,
  body.paper-first-page .stacked-fields label {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: .543cqw;
    min-width: 0;
    font-size: clamp(11px, 1.24cqw, 15px);
  }

  body.paper-first-page .worknumber-field {
    width: 100%;
    min-height: 5.435cqw;
    padding: .543cqw .815cqw;
  }

  body.paper-first-page .field-caption {
    align-self: center;
    line-height: 1.467cqw;
    white-space: nowrap;
  }

  body.paper-first-page .worknumber-field input,
  body.paper-first-page .top-field input,
  body.paper-first-page .stacked-fields input {
    display: block;
    width: 100%;
    min-height: 34px;
    margin: 0;
    border: 0;
    border-bottom: var(--pf-rule) dotted #555;
    background: transparent;
    padding: 4px 3px;
  }

  /* Datum/invuller links, opdrachtgevervelden rechts. */
  body.paper-first-page .top-grid {
    display: grid;
    position: static;
    min-height: 11.956cqw;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, minmax(5.435cqw, auto));
    gap: 1.087cqw 1.63cqw;
    margin: 0 0 1.087cqw;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body.paper-first-page .top-grid > .top-field {
    width: auto;
    min-height: 52px;
    position: static;
    padding: .543cqw .815cqw;
    overflow: visible;
    transform: none;
  }

  body.paper-first-page .top-grid > .top-field:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.paper-first-page .top-grid > .top-field:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  body.paper-first-page .stacked-fields {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body.paper-first-page .stacked-fields label {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: .245cqw .815cqw;
    overflow: visible;
  }

  /* Algemene vakken en tabellen. */
  body.paper-first-page .section-box {
    position: relative;
    height: auto;
    margin: 0 0 1.087cqw;
    padding: .652cqw .87cqw;
    border: var(--pf-border) solid #555;
    background: #fff;
    overflow: visible;
  }

  body.paper-first-page .top-grid.section-box {
    padding: 0;
    border: 0;
    background: transparent;
  }

  body.paper-first-page .section-heading {
    position: relative;
    display: flex;
    min-height: 1.522cqw;
    margin: 0;
    align-items: flex-start;
    overflow: visible;
  }

  body.paper-first-page .section-heading h3,
  body.paper-first-page .notes-section h3 {
    margin: 0;
    font-size: clamp(11px, 1.2cqw, 15px);
    font-weight: 400;
    line-height: 1.304cqw;
    white-space: nowrap;
  }

  body.paper-first-page .add-row {
    position: absolute;
    z-index: 4;
    top: -18px;
    right: 2px;
    min-width: 76px;
    min-height: 34px;
    padding: 5px 10px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 7px #0003;
    font-size: 13px;
  }

  body.paper-first-page .table-wrap {
    overflow: visible;
  }

  body.paper-first-page table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }

  body.paper-first-page thead tr {
    min-height: 28px;
  }

  body.paper-first-page th,
  body.paper-first-page td {
    position: relative;
    padding: 2px .353cqw;
    border-right: var(--pf-rule) solid #777;
    border-bottom: 0;
    overflow: visible;
    text-align: left;
    font-size: var(--pf-font);
    font-weight: 400;
    line-height: 1.05;
  }

  body.paper-first-page th {
    vertical-align: top;
    white-space: normal;
  }

  body.paper-first-page td {
    vertical-align: middle;
  }

  body.paper-first-page th:last-child,
  body.paper-first-page td:last-child {
    border-right: 0;
  }

  body.paper-first-page th small {
    display: block;
    font-size: var(--pf-small-font);
    line-height: 1;
  }

  body.paper-first-page tbody input,
  body.paper-first-page tbody textarea,
  body.paper-first-page tbody select,
  body.paper-first-page .line-row input {
    display: block;
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 5px 3px;
    border: 0;
    background: transparent;
    font-size: var(--pf-font);
  }

  body.paper-first-page tbody textarea {
    resize: vertical;
    overflow: auto;
  }

  body.paper-first-page #employeesBody td:not(:first-child)::after,
  body.paper-first-page #activitiesBody td:not(:nth-child(4))::after,
  body.paper-first-page #machinesBody td::after,
  body.paper-first-page #wasteBody td::after,
  body.paper-first-page #suppliersBody td::after,
  body.paper-first-page #materialsBody .line-row::after {
    content: "";
    position: absolute;
    left: .435cqw;
    right: .435cqw;
    bottom: 3px;
    border-bottom: var(--pf-rule) dotted #555;
    pointer-events: none;
  }

  /* Bedieningskolom ligt over de rand en verandert de originele kolombreedtes niet. */
  body.paper-first-page th.no-print,
  body.paper-first-page td.no-print {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body.paper-first-page td.no-print .remove-row {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: -34px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    transform: translateY(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 5px #0004;
    opacity: .45;
  }

  body.paper-first-page tr:focus-within td.no-print .remove-row,
  body.paper-first-page tr:hover td.no-print .remove-row {
    opacity: 1;
  }

  /* Medewerkers. */
  body.paper-first-page .employees-section {
    min-height: 15.76cqw;
  }

  body.paper-first-page #employeesBody tr {
    height: auto;
    min-height: var(--pf-touch-row);
  }

  body.paper-first-page .employees-section tr > :nth-child(1) { width: 12%; }
  body.paper-first-page .employees-section tr > :nth-child(2) { width: 19%; }
  body.paper-first-page .employees-section tr > :nth-child(3) { width: 19%; }
  body.paper-first-page .employees-section tr > :nth-child(4) { width: 35%; }
  body.paper-first-page .employees-section tr > :nth-child(5) { width: 15%; }

  body.paper-first-page #employeesBody td:not(:first-child) {
    padding: 0 .353cqw 3px;
    vertical-align: bottom;
  }

  body.paper-first-page #employeesBody td:first-child {
    padding: 0;
    text-align: center;
  }

  body.paper-first-page #employeesBody input[type="checkbox"] {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    accent-color: #2f7d4b;
  }

  /* Uitgevoerde werkzaamheden. */
  body.paper-first-page .activities-section {
    min-height: 28.804cqw;
  }

  body.paper-first-page #activitiesBody tr {
    height: auto;
    min-height: var(--pf-touch-row-large);
  }

  body.paper-first-page .activities-section tr > :nth-child(1) { width: 13%; }
  body.paper-first-page .activities-section tr > :nth-child(2) { width: 14%; }
  body.paper-first-page .activities-section tr > :nth-child(3) { width: 60%; }
  body.paper-first-page .activities-section tr > :nth-child(4) { width: 13%; }

  body.paper-first-page #activitiesBody td:not(:nth-child(4)) {
    padding: 0 .353cqw 3px;
    vertical-align: bottom;
  }

  body.paper-first-page #activitiesBody textarea {
    min-height: 40px;
  }

  body.paper-first-page #activitiesBody td:nth-child(4) select {
    min-height: 36px;
    border: 1px solid #aab4ae;
    border-radius: 5px;
    background: #fff;
    text-align: center;
  }

  /* Machines, materialen en afval: originele kolomverhouding, maar variabele hoogte. */
  body.paper-first-page .machine-waste-grid {
    display: grid;
    min-height: 48.913cqw;
    grid-template-columns: minmax(0, 4.6fr) minmax(16.848cqw, 1fr);
    gap: 1.087cqw;
    margin: 0 0 1.304cqw;
    align-items: stretch;
  }

  body.paper-first-page .machine-waste-grid > div {
    display: grid;
    grid-template-rows: minmax(29.348cqw, auto) minmax(18.478cqw, auto);
    gap: 1.087cqw;
    min-width: 0;
  }

  body.paper-first-page .machine-panel,
  body.paper-first-page .material-panel,
  body.paper-first-page .waste-panel {
    height: auto;
    min-height: 0;
    margin: 0;
  }

  body.paper-first-page .waste-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  body.paper-first-page #machinesBody tr,
  body.paper-first-page #materialsBody .line-row,
  body.paper-first-page #wasteBody tr {
    height: auto;
    min-height: var(--pf-touch-row);
  }

  body.paper-first-page .machine-panel tr > :nth-child(1) { width: 15%; }
  body.paper-first-page .machine-panel tr > :nth-child(2) { width: 53%; }
  body.paper-first-page .machine-panel tr > :nth-child(3),
  body.paper-first-page .machine-panel tr > :nth-child(4),
  body.paper-first-page .machine-panel tr > :nth-child(5) { width: 10.66%; }

  body.paper-first-page .waste-panel tr > :nth-child(1) { width: 66%; }
  body.paper-first-page .waste-panel tr > :nth-child(2) { width: 34%; }

  body.paper-first-page #machinesBody td,
  body.paper-first-page #wasteBody td {
    padding: 0 .353cqw 3px;
    vertical-align: bottom;
  }

  body.paper-first-page .material-panel {
    display: grid;
    grid-template-rows: minmax(24px, 1.522cqw) auto;
    overflow: visible;
  }

  body.paper-first-page #materialsBody {
    display: grid;
    min-height: 0;
    grid-auto-rows: minmax(var(--pf-touch-row), auto);
    overflow: visible;
  }

  body.paper-first-page #materialsBody .line-row {
    position: relative;
    display: flex;
    padding: 0 .353cqw 3px;
    align-items: flex-end;
    overflow: visible;
  }

  /* Leveranciers. */
  body.paper-first-page .suppliers-section {
    min-height: 22.826cqw;
    margin-bottom: 0;
  }

  body.paper-first-page .suppliers-section tr > :nth-child(1) { width: 23%; }
  body.paper-first-page .suppliers-section tr > :nth-child(2) { width: 49%; }
  body.paper-first-page .suppliers-section tr > :nth-child(3) { width: 28%; }

  body.paper-first-page #suppliersBody tr {
    height: auto;
    min-height: var(--pf-touch-row-large);
  }

  body.paper-first-page #suppliersBody td {
    padding: 0 .353cqw 3px;
    vertical-align: bottom;
  }

  body.paper-first-page #suppliersBody textarea {
    min-height: 40px;
  }

  body.paper-first-page .received-check {
    display: flex;
    width: 100%;
    min-height: 38px;
    margin: 6px 0 2px;
    padding: 0;
    gap: 12px;
    border: 0;
    align-items: center;
    overflow: visible;
    font-size: var(--pf-small-font);
    line-height: 1;
  }

  body.paper-first-page .received-check legend {
    float: left;
    width: auto;
    max-width: 72%;
    margin: 0 8px 0 0;
    padding: 0;
    white-space: nowrap;
  }

  body.paper-first-page .received-check label {
    display: flex;
    margin: 0;
    gap: 5px;
    align-items: center;
    white-space: nowrap;
  }

  body.paper-first-page .received-check input[type="radio"] {
    width: 28px;
    height: 28px;
    margin: 0;
    accent-color: #2f7d4b;
  }

  body.paper-first-page .notice {
    margin: 0;
    font-size: var(--pf-small-font);
    line-height: 1.2;
    white-space: normal;
  }

  /* Opmerkingen blijven een herkenbare tweede papieren pagina. */
  body.paper-first-page .notes-section {
    min-height: min(151.087cqw, 1500px);
    margin: 32px 0 0;
    padding: 14px 0 0;
    border: 0;
    box-shadow: 0 -20px 0 #dfe4e1;
  }

  body.paper-first-page .notes-section textarea {
    display: block;
    width: 100%;
    min-height: min(145.65cqw, 1440px);
    margin-top: 0;
    padding: 8px 4px;
    border: 0;
    line-height: 34px;
    resize: vertical;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 32px,
      #777 32px,
      #777 33px
    );
    background-size: 100% 34px;
  }

  body.paper-first-page .save-status {
    margin-top: 10px;
  }

  @media (orientation: portrait) and (max-width: 900px) {
    .paper-orientation-hint {
      display: block;
    }

    body.paper-first-page .sheet {
      width: calc(100vw - 8px);
      margin-top: 8px;
      padding: 12px;
    }

    body.paper-first-page #workOrderForm {
      --pf-font: clamp(10px, 1.45cqw, 13px);
      --pf-small-font: clamp(9px, 1.18cqw, 11px);
      --pf-touch-row: 34px;
      --pf-touch-row-large: 40px;
    }
  }

  @media (max-width: 760px) {
    body.paper-first-page .masthead {
      flex-direction: row;
      gap: 1.5cqw;
      align-items: flex-start;
    }

    body.paper-first-page .work-order-title {
      width: calc(50% - .815cqw);
      justify-items: stretch;
    }

    body.paper-first-page .work-order-title h2 {
      text-align: right;
    }

    body.paper-first-page .worknumber-field {
      grid-template-columns: max-content minmax(0, 1fr);
    }

    body.paper-first-page .top-grid,
    body.paper-first-page .machine-waste-grid {
      grid-template-columns: 1fr 1fr;
    }

    body.paper-first-page .toolbar {
      width: auto;
    }
  }
}

/* ===== 3. work-order-screen.css ===== */
/* Werkbonspecifieke schermopmaak en bedieningscorrecties. */
@media screen {
  .app-bar {
    position: sticky !important;
    top: 0;
    z-index: 1000;
  }

  .activities-section .extra-work-heading-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    text-align: center;
  }

  .activities-section .extra-work-heading-title {
    grid-column: 1 / -1;
    margin-bottom: .28rem;
    white-space: nowrap;
  }

  .activities-section .extra-work-heading-yes,
  .activities-section .extra-work-heading-no {
    display: block;
    text-align: center;
  }

  .extra-work-options {
    display: grid;
    grid-template-columns: repeat(2, 18px);
    align-items: center;
    justify-content: space-around;
    gap: 0;
    min-height: 2.25rem;
  }

  .extra-work-options label {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
  }

  .extra-work-options input[type="radio"] {
    margin: 0;
  }

  body.paper-first-page .employees-section thead th:first-child {
    text-align: center;
  }

  body.paper-first-page #employeesBody input[type="checkbox"],
  body.paper-first-page .extra-work-options input[type="radio"],
  body.paper-first-page .received-check input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0 auto;
    opacity: 1;
    accent-color: #2f7d4b;
  }

  body.paper-first-page #wasteBody tr:nth-child(10) td:first-child {
    position: relative;
  }

  body.paper-first-page #wasteBody tr:nth-child(10) td:first-child input {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  body.paper-first-page #wasteBody tr:nth-child(10) td:first-child::before {
    content: "overig\A(te noemen)";
    position: absolute;
    z-index: 2;
    left: .353cqw;
    bottom: 4px;
    color: #111;
    font: inherit;
    line-height: 1.05;
    white-space: pre-line;
    pointer-events: none;
  }

  body.work-order-locked button[data-add],
  body.work-order-locked .remove-row {
    display: none !important;
  }

  body.work-order-locked #workOrderForm input:disabled,
  body.work-order-locked #workOrderForm textarea:disabled,
  body.work-order-locked #workOrderForm select:disabled {
    opacity: 1;
    color: #111;
    -webkit-text-fill-color: #111;
    cursor: default;
  }

  body.work-order-locked #wasteBody tr:nth-child(10) td:first-child input:disabled {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  body.work-order-locked #workOrderForm input[type="checkbox"]:disabled,
  body.work-order-locked #workOrderForm input[type="radio"]:disabled {
    opacity: 1;
    filter: none;
    cursor: default;
  }

  .remove-row {
    min-width: 2.8rem;
    padding: .28rem .45rem;
    border: 1px solid #a94a4a;
    border-radius: 5px;
    background: #fff;
    color: #7b2222;
    font-size: 0;
    line-height: 1.2;
    box-shadow: none;
  }

  .remove-row::after {
    content: 'Wis';
    font-size: .75rem;
    font-weight: 700;
  }

  .remove-row:hover,
  .remove-row:focus-visible {
    background: #fdeaea;
    outline: 2px solid #b4231833;
    outline-offset: 1px;
  }

  td.no-print:empty {
    width: .25rem;
    padding-left: .15rem;
    padding-right: .15rem;
  }

  .line-row:not([data-removable="true"]) {
    padding-right: 0;
  }

  body.paper-first-page {
    padding-bottom: 5.5rem;
  }

  .work-order-action-bar {
    position: fixed;
    z-index: 1200;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    width: auto;
    min-height: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .work-order-action-bar .workflow-action-buttons {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .work-order-action-bar button {
    box-shadow: 0 3px 12px #0003;
  }

  .history-card-compact .history-list {
    max-height: 13rem;
    overflow: auto;
    padding-right: .25rem;
  }

  .history-card-compact .history-item {
    padding: .45rem .6rem;
  }

  .validation-inline-error {
    margin: .4rem 0 .65rem;
    padding: .7rem .85rem;
    border: 2px solid #b42318;
    border-radius: 6px;
    background: #fff1f0;
    color: #7a271a;
    font-weight: 700;
    line-height: 1.35;
    scroll-margin-top: 5.5rem;
  }

  .validation-invalid {
    outline: 2px solid #b42318 !important;
    outline-offset: 2px;
    border-bottom-color: #b42318 !important;
  }

  .validation-block-invalid {
    box-shadow: 0 0 0 2px #b42318;
  }

  body.paper-first-page .machine-waste-grid {
    grid-template-rows: auto;
  }

  body.paper-first-page .machine-waste-grid > div,
  body.paper-first-page .waste-panel {
    grid-row: 1;
    align-self: stretch;
  }

  body.paper-first-page .waste-panel {
    height: auto;
    min-height: 100%;
  }

  body.paper-first-page .notes-section textarea {
    padding: 0 6px !important;
    font-size: 16px !important;
    line-height: 34px !important;
    background-position: 0 0 !important;
    background-size: 100% 34px !important;
    caret-color: #111;
  }
}

@media screen and (max-width: 760px) {
  .work-order-action-bar {
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
    width: auto;
    flex-wrap: wrap;
  }

  .work-order-action-bar > button,
  .work-order-action-bar .workflow-action-buttons,
  .work-order-action-bar .workflow-action-buttons > button {
    flex: 1 1 45%;
  }
}

@media print {
  .validation-inline-error {
    display: none !important;
  }

  .validation-invalid,
  .validation-block-invalid {
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* ===== 4. pagination.css ===== */
@media screen {
  .dashboard-filters-wide {
    grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(170px, 1fr)) auto auto;
  }

  .users-filters {
    grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
  }

  .table-sort {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-weight: inherit;
    text-align: left;
  }

  .table-sort::after {
    content: '↕';
    color: #708077;
    font-size: .8rem;
  }

  .table-sort[data-direction="asc"]::after { content: '↑'; color: #173f2c; }
  .table-sort[data-direction="desc"]::after { content: '↓'; color: #173f2c; }

  .pagination-bar {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d6ded9;
  }

  .pagination-bar > label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .pagination-bar select {
    width: auto;
    min-width: 78px;
    padding: .45rem 1.8rem .45rem .55rem;
  }

  .pagination-range {
    color: #506259;
    font-weight: 700;
  }

  .pagination-controls,
  .pagination-pages {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
  }

  .pagination-controls button {
    min-width: 40px;
  }

  .pagination-current {
    background: #173f2c;
    color: #fff;
  }

  .pagination-ellipsis {
    min-width: 24px;
    text-align: center;
  }
}

@media (max-width: 1100px) {
  .dashboard-filters-wide,
  .users-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filters-wide button,
  .users-filters button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .dashboard-filters-wide,
  .users-filters,
  .pagination-bar {
    grid-template-columns: 1fr;
  }

  .pagination-controls,
  .pagination-pages {
    justify-content: flex-start;
  }
}