:root{--bg: #f5f6f8;--panel: #ffffff;--border: #d9dce1;--text: #1f2430;--muted: #667085;--primary: #2563eb;--primary-dark: #1d4ed8;--danger: #dc2626;--success: #16a34a;--warning: #d97706;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:light}*{box-sizing:border-box}body,html,#root{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.app-shell{display:flex;flex-direction:column;min-height:100vh}.offline-banner{background:var(--warning);color:#fff;text-align:center;padding:.5rem;font-size:.9rem;font-weight:600}.topbar{background:#111827;color:#e5e7eb;padding:.75rem 1.25rem;display:flex;align-items:center;flex-wrap:wrap;row-gap:.6rem;column-gap:1.5rem;position:sticky;top:0;z-index:45}.app-title{font-size:1.1rem;font-weight:700;color:#fff}.tabbar{display:flex;gap:.5rem;flex:1;min-width:0}.tabbar a{color:#cbd5e1;text-decoration:none;padding:.5rem 1rem;border-radius:8px;font-weight:600;white-space:nowrap}.tabbar a.active{background:var(--primary);color:#fff}.topbar-right{display:flex;align-items:center;gap:.75rem}.who{color:#cbd5e1;font-size:.9rem;white-space:nowrap}.topbar-right button{display:inline-block;width:auto;background:transparent;color:#e5e7eb;border:1px solid #374151;border-radius:8px;padding:.5rem .9rem;font-size:.85rem;font-weight:600;white-space:nowrap;margin-top:0}.topbar-right button:hover{background:#1f2937}@media(max-width:640px){.topbar{padding:.6rem .85rem}.app-title{flex:1 1 auto}.who{display:none}.tabbar{order:3;flex:1 1 100%}.tabbar a{flex:1;text-align:center;padding:.5rem}}.content{flex:1;padding:1.25rem;max-width:720px;margin:0 auto;width:100%}.mechanic-home section{margin-bottom:2rem}.mechanic-home h1,.mechanic-history h1{font-size:1.1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .75rem}.order-card-detail{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem}.order-card-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.order-card-header h2{margin:0;font-size:1.3rem}.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600;background:#e5e7eb;color:#374151}.badge.service-type{background:#dbeafe;color:#1e40af;margin:.5rem 0}.badge.status-open{background:#e5e7eb;color:#374151}.badge.status-onderweg{background:#fef3c7;color:#92400e}.badge.status-gestart{background:#dbeafe;color:#1e40af}.badge.status-afgerond{background:#dcfce7;color:#166534}.badge.status-geannuleerd{background:#fee2e2;color:#991b1b}.order-card-fields{margin:1rem 0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}.order-card-fields dt{color:var(--muted);font-size:.85rem}.order-card-fields dd{margin:0}.order-card-company{font-weight:600}.primary-action{display:block;width:100%;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:1rem;font-size:1.1rem;font-weight:700;margin-top:.5rem}.primary-action:disabled{opacity:.6}.secondary{display:block;width:100%;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.85rem;font-size:1rem;margin-top:.5rem}.upcoming-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.25rem}.upcoming-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.history-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.muted{color:var(--muted)}.error-text{color:var(--danger);font-weight:600}.field{margin-bottom:.85rem;display:flex;flex-direction:column;gap:.35rem}.field label{font-size:.9rem;color:var(--muted)}.field input,.field textarea{border:1px solid var(--border);border-radius:8px;padding:.65rem}.photo-gallery{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}.photo-gallery h3{margin:0 0 .75rem;font-size:.95rem;color:var(--muted)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-bottom:.75rem}.photo-grid img,.photo-grid video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--border)}.photo-gallery-section{margin-bottom:1rem}.photo-gallery-section-header{display:flex;align-items:baseline;gap:.4rem;font-size:.85rem;font-weight:600;margin-bottom:.4rem}.photo-grid-video{position:relative;display:block}.photo-grid-video-badge{position:absolute;bottom:.3rem;left:.3rem;background:#000000a6;color:#fff;font-size:.68rem;padding:.1rem .4rem;border-radius:4px}.media-share-history{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}.media-share-history h4{margin:0 0 .75rem;font-size:.95rem;color:var(--muted)}.media-share-history ul{list-style:none;margin:0;padding:0}.media-share-history>ul>li{margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);font-size:.9rem}.media-share-history>ul>li:last-child{border-bottom:none}.media-share-history details{margin-top:.3rem;font-size:.85rem}.media-share-history details ul{margin-top:.3rem;padding-left:1.1rem;list-style:disc}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh}.login-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:2rem;width:100%;max-width:360px}.login-box h1{text-align:center;margin-top:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:flex-end;justify-content:center;z-index:50}.modal-box{background:var(--panel);border-radius:16px 16px 0 0;padding:1.5rem;width:100%;max-width:480px;max-height:85vh;overflow-y:auto}.modal-box h2{margin-top:0}.success-text{color:var(--success);font-weight:600}.link-action{display:inline-block;width:auto;background:none;border:none;color:var(--primary);font-weight:600;padding:.4rem 0;margin-top:0;text-decoration:underline}.payment-step{margin-top:.5rem}.payment-step h3{margin:0 0 .5rem;font-size:.95rem;color:var(--muted)}.payment-list{margin:.75rem 0;display:flex;flex-direction:column;gap:.4rem}.payment-list-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem;font-size:.9rem}.work-order-section{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:1rem}.work-order-header strong{margin-right:.5rem}.work-order-status-concept{background:#e5e7eb;color:#374151}.work-order-status-goedgekeurd{background:#dbeafe;color:#1e40af}.work-order-status-definitief{background:#dcfce7;color:#166534}.work-order-customer-header{display:flex;align-items:center;justify-content:space-between}.work-order-customer h3,.work-order-regels h3,.approval-history h3{margin:0 0 .5rem;font-size:.95rem;color:var(--muted)}.work-order-changed-notice{color:var(--warning);font-weight:600;font-size:.85rem;margin:.25rem 0}.work-order-customer-compare{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;font-size:.9rem}.work-order-customer-compare-label{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.25rem}.work-order-regels-list{display:flex;flex-direction:column;gap:.75rem}.work-order-regel-row{border:1px solid var(--border);border-radius:10px;padding:.65rem .85rem}.work-order-regel-disabled{opacity:.55}.work-order-regel-main{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.work-order-regel-toggle{display:flex;align-items:center;gap:.5rem;font-weight:600}.work-order-regel-amount{font-weight:700;white-space:nowrap}.work-order-regel-detail{font-size:.82rem;margin-top:.25rem}.work-order-regel-actions{display:flex;gap:1rem;margin-top:.4rem}.work-order-regel-actions .link-action{padding:0}.work-order-add-line{border:1px dashed var(--border);border-radius:10px;padding:.85rem;margin-top:.5rem}.work-order-add-line-triggers{display:flex;gap:.5rem;flex-wrap:wrap}.work-order-totals{display:flex;flex-direction:column;gap:.25rem}.work-order-totals>div,.approval-totals>div{display:flex;justify-content:space-between;font-size:.9rem}.work-order-totals-final,.approval-totals-final{font-weight:700;border-top:1px solid var(--border);padding-top:.3rem}.work-order-status-banner{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;text-align:center}.approval-history-item{border:1px solid var(--border);border-radius:10px;padding:.6rem .85rem;display:flex;flex-direction:column;gap:.2rem;margin-bottom:.5rem}.approval-history-item-header{display:flex;justify-content:space-between;align-items:center;font-weight:600}.approval-lines table{width:100%;border-collapse:collapse;font-size:.85rem}.approval-lines th,.approval-lines td{text-align:left;padding:.35rem .3rem;border-bottom:1px solid var(--border)}.approval-totals{margin-top:.5rem}.approval-diff{background:#f9fafb;border-radius:10px;padding:.75rem 1rem;font-size:.9rem;line-height:1.5}.approval-protocol{background:#f9fafb;border-radius:10px;padding:.75rem 1rem;font-size:.85rem;color:var(--muted);white-space:pre-wrap}.mechanic-work-order-detail{display:flex;flex-direction:column;gap:.4rem}.mechanic-work-order-detail table{width:100%;border-collapse:collapse;font-size:.85rem;margin:.4rem 0}.mechanic-work-order-detail th,.mechanic-work-order-detail td{text-align:left;padding:.35rem .3rem;border-bottom:1px solid var(--border)}.approval-list{display:flex;flex-direction:column;gap:.7rem}.approval-card{border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem}.approval-card-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.3rem}.approval-protocol-text{white-space:pre-wrap;color:var(--muted);font-size:.85rem}.approval-signature{display:flex;flex-direction:column;gap:.3rem;margin:.5rem 0}.order-task-list{display:flex;flex-direction:column;gap:.7rem}.order-task-card{border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem}.order-task-card-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.3rem}.approval-signature-image{max-width:100%;max-height:160px;border:1px solid var(--border);border-radius:8px;background:#fff;object-fit:contain}.signature-pad{position:relative;margin:.5rem 0}.signature-pad-canvas{width:100%;height:180px;border:1px solid var(--border);border-radius:10px;background:#fff;touch-action:none;display:block}.signature-pad-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--muted);font-size:.85rem;pointer-events:none}.signature-pad-actions{display:flex;justify-content:flex-end;margin-top:.4rem}.signature-pad-actions button{width:auto}