*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--navy:#0a192f;--navy-light:#1a365d;--teal:#11b2f1;--sky:#87ceeb;--red:#ff4b4b;--text:#333;--text-muted:#6b7686;--bg:#f8f8f8;--surface:#fff;--border:#e2e8f0;--border-dark:#c8d3df;--radius:6px;--radius-lg:10px;--font:"Inter", system-ui, -apple-system, sans-serif}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;font-size:14px;line-height:1.5}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3{color:var(--navy);font-weight:700}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:3px}input,select,textarea{background:var(--surface);border:1.5px solid var(--border-dark);border-radius:var(--radius);color:var(--text);font-size:14px;font-family:var(--font);outline:none;width:100%;padding:10px 14px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #11b2f11f}input::placeholder,textarea::placeholder{color:var(--text-muted)}select option{background:var(--surface)}textarea{resize:vertical;min-height:72px}.form-label{color:var(--navy);margin-bottom:6px;font-size:12px;font-weight:600;display:block}.form-field{margin-bottom:16px}.form-hint{color:var(--text-muted);margin-top:4px;font-size:12px}.form-error{color:var(--red);margin-top:4px;font-size:12px;font-weight:600}.form-grid{gap:16px;display:grid}.form-grid-2{grid-template-columns:1fr 1fr}.form-grid-3{grid-template-columns:1fr 1fr 1fr}button{cursor:pointer;font-family:var(--font);border-radius:var(--radius);border:none;padding:10px 18px;font-size:14px;transition:opacity .15s,background .15s,border-color .15s}button:hover{opacity:.9}button:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:var(--teal);color:var(--navy);font-weight:600}.btn-secondary{background:var(--surface);color:var(--navy);border:1.5px solid var(--border-dark);font-weight:600}.btn-danger{background:var(--red);color:#fff;font-weight:600}.btn-ghost{color:var(--navy);background:0 0;padding:8px 12px;font-weight:600}.btn-ghost:hover{background:var(--bg);opacity:1}.btn-block{width:100%}.btn-lg{padding:14px 20px;font-size:16px}.btn-sm{padding:6px 12px;font-size:12px}.btn-icon{color:var(--navy);background:0 0;padding:6px 8px}.btn-icon:hover{background:var(--bg);opacity:1}.card{background:var(--surface);border:1.5px solid var(--border-dark);border-radius:var(--radius-lg);padding:20px}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:100px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-block}.badge-teal{background:var(--teal);color:var(--navy)}.badge-navy{background:var(--navy);color:#fff}.badge-muted{background:var(--border);color:var(--text-muted)}.badge-red{background:var(--red);color:#fff}.section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--teal);align-items:center;gap:10px;margin-bottom:14px;font-size:12px;font-weight:700;display:flex}.section-label:before{content:"";background:var(--teal);width:18px;height:2px;display:inline-block}.block-extra{border:1.5px solid var(--red);border-radius:var(--radius-lg);background:#ff4b4b0d;margin-top:16px;padding:16px}.block-extra .section-label{color:var(--red)}.block-extra .section-label:before{background:var(--red)}.app-main{flex:1;width:100%;max-width:900px;margin:0 auto;padding:24px}.topbar{background:var(--navy);color:#fff}.topbar-inner{justify-content:space-between;align-items:center;gap:16px;max-width:900px;height:60px;margin:0 auto;padding:0 24px;display:flex}.topbar-brand{letter-spacing:.02em;align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.topbar-logo{width:auto;height:34px;display:block}.tab-nav{gap:4px;display:flex}.tab-btn{color:#ffffffb3;border-radius:var(--radius);white-space:nowrap;background:0 0;padding:8px 14px;font-weight:600}.tab-btn:hover{opacity:1;background:#ffffff14}.tab-btn.active{background:var(--teal);color:var(--navy)}.topbar-right{flex:none;align-items:center;gap:12px;display:flex}.topbar-technicus{color:#ffffffd9;white-space:nowrap;font-size:13px}.topbar-switch{color:#ffffffb3;background:0 0;padding:6px 10px;font-size:12px}.topbar-switch:hover{color:#fff;opacity:1}.topbar-icon-btn{color:#ffffffb3;background:0 0;justify-content:center;align-items:center;min-width:36px;min-height:36px;padding:8px;display:inline-flex}.topbar-icon-btn:hover{color:#fff;opacity:1}.bottom-nav{display:none}.bottom-nav-btn{color:#fff9;border-radius:var(--radius);background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:8px 4px;font-size:11px;font-weight:600;display:flex}.bottom-nav-btn i{font-size:18px}.bottom-nav-btn.active{color:var(--teal)}.fab-new-bezoek i{margin-right:8px}.modal-overlay{z-index:100;background:#0a192f8c;justify-content:center;align-items:flex-start;padding:24px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--surface);border:1.5px solid var(--border-dark);border-radius:var(--radius-lg);width:100%;max-width:520px;padding:24px}.modal-sm{max-width:420px}.modal-title{color:var(--navy);margin-bottom:20px;font-size:18px;font-weight:700}.modal-actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.picker-screen{background:var(--navy);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:24px;display:flex}.picker-title{color:#fff;margin-bottom:4px;font-size:22px;font-weight:700}.picker-sub{color:#fff9;margin-bottom:28px;font-size:14px}.picker-list{flex-direction:column;gap:12px;width:100%;max-width:340px;display:flex}.picker-btn{background:var(--navy-light);color:#fff;text-align:left;border-radius:var(--radius-lg);border:1.5px solid #ffffff26;justify-content:space-between;align-items:center;padding:16px 20px;font-size:16px;font-weight:600;display:flex}.picker-btn:hover{background:var(--teal);color:var(--navy);opacity:1}.login-logo{width:auto;height:44px;margin-bottom:28px;display:block}.login-card{width:100%;max-width:360px;padding:28px}.bezoek-card{border:1.5px solid var(--border-dark);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:12px;padding:16px}.bezoek-card.clickable{cursor:pointer}.bezoek-card.clickable:hover{border-color:var(--teal)}.bezoek-card-top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.bezoek-card-project{color:var(--navy);font-weight:700}.bezoek-card-klant{color:var(--text-muted);font-size:12px}.bezoek-card-meta{color:var(--text-muted);flex-wrap:wrap;gap:14px;font-size:13px;display:flex}.bezoek-card-meta strong{color:var(--text);font-weight:600}.autocomplete-option:hover{background:var(--bg)}.overzicht-controls{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.overzicht-control-buttons{gap:10px;display:flex}.project-card{border:1.5px solid var(--border-dark);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:12px;padding:16px}.project-card-top{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;display:flex}.empty-state{text-align:center;color:var(--text-muted);padding:48px 20px}.empty-state .fa-solid,.empty-state .fa-regular{color:var(--border-dark);margin-bottom:12px;font-size:32px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.w-full{width:100%}.text-muted{color:var(--text-muted)}.text-red{color:var(--red)}.text-navy{color:var(--navy)}.text-sm{font-size:12px}.text-lg{font-size:18px}.font-bold{font-weight:700}.font-medium{font-weight:600}.day-heading{color:var(--navy);text-transform:capitalize;margin:20px 0 10px;font-size:13px;font-weight:700}.day-heading:first-child{margin-top:0}.toast{background:var(--navy);border:1.5px solid var(--teal);border-radius:var(--radius-lg);color:#fff;z-index:999;padding:12px 20px;font-size:13px;font-weight:600;animation:.2s fadeInUp;position:fixed;bottom:24px;right:24px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=720px){.app-main{padding:16px;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.topbar-inner{height:auto;padding:12px 16px}.topbar-logo{height:27px}.tab-nav{display:none}.topbar-technicus{font-size:12px}.bottom-nav{z-index:90;background:var(--navy);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid #ffffff1a;display:flex;position:fixed;bottom:0;left:0;right:0}button{min-height:44px}.btn-sm{min-height:36px}.btn-icon{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.topbar-icon-btn{min-width:44px;min-height:44px}.picker-btn{min-height:56px}input,select,textarea{font-size:16px}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.modal-overlay{align-items:flex-end;padding:0}.modal,.modal-sm{border:none;border-top:1.5px solid var(--border-dark);width:100%;max-width:none;max-height:92vh;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;overflow-y:auto}.fab-new-bezoek{right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:80;border:2px solid var(--navy);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;min-height:56px;padding:0;display:flex;position:fixed}.fab-new-bezoek .fab-label{display:none}.fab-new-bezoek i{margin-right:0;font-size:20px}.week-submit-btn{width:100%}.overzicht-controls{flex-direction:column;align-items:stretch}.overzicht-controls .form-field,.overzicht-control-buttons{width:100%}.overzicht-control-buttons button{flex:1}}