@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--forest:#173e2b;--dark:#112d20;--pine:#2e6248;--mint:#eaf3e8;--mint2:#dce9dd;--bg:#f7f8f6;--text:#26352d;--muted:#728078;--border:#e3e8e2;--white:#fff;--amber:#b87618;--shadow:0 9px 30px rgba(35,52,39,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--bg);font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;line-height:1.3}h1{font-size:clamp(24px,3vw,31px);letter-spacing:-1px}h2{font-size:17px;letter-spacing:-.35px;margin-bottom:12px}h3{font-size:14px}a{color:var(--pine);text-decoration:none}a:hover{text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.46;cursor:not-allowed}.small{font-size:12px}.muted{color:var(--muted)}.full{width:100%}.icon{flex-shrink:0}.notice,.alert{border-radius:10px;padding:12px 15px;background:#eef5ed;color:#28563b;font-size:13px;margin:12px 0}.alert-error{background:#fff1ef;color:#a03e33}.alert-warning,.amber-notice{background:#fff5e5;color:#86541a}.alert-success{background:#ecf6ed;color:#2d6943}
.layout{min-height:100vh;display:flex}.sidebar{width:256px;background:#fff;border-right:1px solid var(--border);height:100vh;position:sticky;top:0;display:flex;flex-direction:column;flex-shrink:0;padding:24px 15px 14px;z-index:15}.sidebar-brand{min-height:100px;display:flex;flex-direction:column;align-items:flex-start;padding:0 17px 13px;color:var(--forest)}.brand-logo{width:178px;max-height:70px;object-fit:contain;object-position:left}.brand-sub{font-size:11px;letter-spacing:2.5px;font-weight:800;color:#708477;margin-top:0}.nav-label{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#9ca7a0;margin:18px 15px 8px}.nav-gap{margin-top:24px}.nav{flex:1;overflow:auto}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;font-weight:600;color:#62766a;margin:3px 0;font-size:13px;transition:background .12s,color .12s}.nav-item.active{background:#e8f2e8;color:#245a3c}.nav-item:hover{background:#f3f7f3;color:#245a3c}.nav-icon{display:flex}.sidebar-bottom{border-top:1px solid var(--border);padding:17px 6px 0}.signed{display:flex;align-items:center;gap:10px;margin-bottom:12px}.signed strong,.signed span{display:block}.signed span{font-size:12px;color:var(--muted)}.avatar{background:#e4eee3;color:#366747;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800}.logout{color:#718378;border:0;background:none;display:flex;align-items:center;gap:9px;padding:5px;font-weight:600;font-size:12px}.main-column{flex:1;min-width:0}.topbar{height:68px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.86);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,46px)}.topbar-breadcrumb{display:flex;gap:13px;align-items:center;color:#87988d;font-size:12px}.topbar-breadcrumb strong{color:#3b5243}.crumb-sep{color:#c6d1c9}.topbar-right{display:flex;align-items:center;gap:20px}.date-label{font-size:12px;color:#7c8b82}.status-pill{background:#edf5ef;border:1px solid #dfebde;color:#2e6946;border-radius:99px;padding:6px 10px;font-size:11px;font-weight:700;white-space:nowrap}.status-dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#54ae70;margin-right:5px}.content{padding:32px clamp(18px,4vw,46px);max-width:1660px;margin:auto;min-height:calc(100vh - 114px)}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.page-title h1{margin-bottom:5px;color:#1f3d2c}.page-title p{color:#88978c;margin-bottom:0}.app-footer{padding:10px clamp(18px,4vw,46px) 22px;font-size:11px;color:#a0aaa2}.app-footer span{padding:0 6px}.mobile-only{display:none}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.metric-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:21px 20px;box-shadow:var(--shadow)}.metric-label{font-size:12px;color:#839287;font-weight:700}.metric-value{font-family:Manrope,sans-serif;font-size:clamp(23px,2.4vw,33px);font-weight:800;color:#264634;letter-spacing:-1.2px;margin:10px 0 3px;white-space:nowrap}.metric-foot{font-size:12px;color:#87968c}.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:18px}.panel{background:#fff;border:1px solid var(--border);border-radius:13px;padding:24px;box-shadow:var(--shadow);min-width:0}.panel-space{margin-top:18px}.panel h2{margin-bottom:15px}.panel h3{margin:14px 0 12px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-head h2{margin:0 0 5px}.panel-head p{font-size:12px;color:#8a968e;margin:0}.panel-note{color:#88988b;font-size:12px;padding-top:12px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.bar-chart{display:flex;align-items:end;gap:13px;height:215px;padding:24px 0 12px}.bar-chart>div{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.bar-chart .bar{display:block;background:#78a886;border-radius:6px 6px 2px 2px;width:min(56px,86%);min-height:4px}.bar-chart small{color:#94a196;font-size:10px}.bar-chart b{font-size:10px;font-weight:700;color:#58705e}.stat-list,.rank-list{display:flex;flex-direction:column;gap:5px}.stat-row,.rank-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #eef1ed}.stat-row:last-child,.rank-row:last-child{border:0}.stat-row b,.rank-row b{color:#315943}.rank-row{gap:12px}.rank-row strong{margin-right:auto}.rank-index{display:grid;place-items:center;background:#eff4eb;border-radius:8px;width:26px;height:26px;font-weight:800;font-size:12px}.rank-list .empty-state{padding:20px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:9px;border:1px solid transparent;font-weight:700;min-height:40px;padding:10px 15px;text-align:center;white-space:normal;font-size:13px;transition:background .15s,transform .15s}.btn:active:not(:disabled){transform:scale(.99)}.btn-primary{background:#246440;color:#fff}.btn-primary:hover{background:#184c30;color:#fff}.btn-soft{background:#eaf3e9;border-color:#d7e8d9;color:#326448}.btn-soft:hover{background:#dcebdc}.btn-quiet{background:#f6f8f5;color:#62776a;border-color:#e5e9e4}.btn-large{min-height:50px;font-size:14px}.inline-form{display:inline-flex;align-items:center;gap:8px}.stacked-form{display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#57675c}.field input,.field select,.field textarea,.searchbar input,select{border:1px solid #dbe4dc;border-radius:8px;background:#fff;min-height:43px;padding:10px 12px;outline:none;color:#263c2e;width:100%}.field input:focus,.field textarea:focus,.field select:focus,.searchbar input:focus{border-color:#82ab8c;box-shadow:0 0 0 3px #e4f3e6}.field textarea{resize:vertical}.check-label{display:flex;align-items:center;gap:9px;font-size:13px;color:#405b48}.check-label input{accent-color:#347b4d;width:16px;height:16px}.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tag{display:inline-block;font-size:10px;font-weight:800;border-radius:50px;padding:5px 10px;white-space:nowrap}.tag-gray{background:#f0f2f0;color:#718176}.tag-green{background:#e1f1e3;color:#237447}.tag-blue{background:#e7f0fe;color:#286da7}.tag-amber{background:#fff1dc;color:#97651c}.tag-danger{background:#ffeae8;color:#ae463a}.searchbar{display:flex;gap:10px;margin-bottom:20px}.searchbar input{flex:1}.table-scroll{overflow:auto}.data-table{border-collapse:collapse;min-width:550px;width:100%;text-align:left}.data-table th{font-size:11px;color:#8a998f;font-weight:800;padding:13px 12px;border-bottom:1px solid var(--border);white-space:nowrap}.data-table td{border-bottom:1px solid #edf1ec;padding:14px 12px;font-size:13px}.data-table tr:last-child td{border-bottom:0}.data-table td strong{font-weight:700;color:#344b39}.subline{display:block;color:#9eaba1;font-size:11px;margin-top:3px}.empty-state{text-align:center;color:#7e9183;padding:50px 18px}.empty-icon{display:flex;justify-content:center;color:#62946e;margin-bottom:12px}.empty-state h3{margin-bottom:7px;color:#43614c}.empty-state p{font-size:12px;margin:0}.soft-line{border:0;border-top:1px solid var(--border);margin:23px 0}.notice{border:1px solid #dcead9}.back-link{display:inline-block;font-size:12px;color:#728c78;margin-bottom:17px;font-weight:700}
.order-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.order-list{display:grid;gap:12px}.order-card{padding:16px 19px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}.order-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.order-main{flex:1;min-width:170px}.order-main h3{margin:0 0 5px;font-size:16px}.order-main p{color:var(--muted);margin:0;font-size:12px}.order-side{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.order-priority{border-left:4px solid #c98f48}.order-state-line{color:#8b988d;margin-top:9px;font-size:12px}.pack-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:18px}.pack-item{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--border)}.pack-item:last-child{border:0}.pack-item-body{flex:1}.pack-item-body strong{display:block;font-size:13px}.check-round{width:27px;height:27px;border:2px solid #d6ded8;color:#fff;border-radius:100%;display:grid;place-items:center}.pack-item.is-done .check-round{background:#4e9d68;border-color:#4e9d68}.pack-count{font-weight:800;color:#4b6d57}.small-undo{background:#f1f4f0;color:#637768;border:none;border-radius:7px;padding:7px;font-weight:800}.progress-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:23px;margin-bottom:9px}.progress-label span{color:#8a958c;font-size:12px}.progress{height:10px;border-radius:20px;background:#e8ece7;overflow:hidden}.progress span{display:block;background:#6db083;height:100%;border-radius:20px;transition:width .2s}.customer-note{background:#fff6e7;border:1px solid #f1e4c9;border-radius:10px;padding:15px;margin:14px 0}.customer-note strong{display:flex;align-items:center;gap:7px;color:#8b6a2e}.customer-note p{margin:8px 0 0;font-size:13px}.details>div{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #eef1ed;padding:11px 0;gap:15px}.details dt{color:#84948b;font-size:12px}.details dd{margin:0;text-align:right;font-weight:700;font-size:12px}.scanner-frame{height:240px;background:#16291d;border-radius:13px;position:relative;overflow:hidden;display:grid;place-items:center}.scanner-frame video{width:100%;height:100%;object-fit:cover}.scanner-frame:before{content:'';pointer-events:none;position:absolute;inset:36px 26%;border:2px solid rgba(156,223,166,.7);border-radius:12px;z-index:2}.scanner-hint{text-align:center;display:flex;align-items:center;flex-direction:column;color:#deeee0;gap:8px}.scanner-hint span{font-size:12px;color:#a9bcb0}.scan-feedback{border:1px solid #e4eae1;padding:12px;margin:12px 0;border-radius:10px;color:#566f60}.scan-feedback.ok{background:#e7f5e9;border-color:#c0e3c4;color:#2c773d}.scan-feedback.bad{background:#fff0eb;border-color:#f2d1c6;color:#af4437}.scanner-controls{display:flex;gap:10px;margin-bottom:12px}.pack-panel,.pack-side .panel{padding:22px}.blocked{opacity:.6}.team-layout .people-list{max-height:660px;overflow:auto}.person{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);color:var(--text)}.person span:nth-child(2){flex:1}.person strong,.person small{display:block}.person small{color:#85948a;margin-top:3px}.block-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}.block-row small{display:block;color:var(--muted)}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(400px,52%) minmax(0,48%);background:#f5f8f3}.auth-card{width:min(440px,calc(100% - 55px));margin:auto;position:relative;z-index:1;padding:75px 25px}.auth-brand{margin-bottom:43px}.auth-brand .login-logo{width:215px;max-height:102px;object-fit:contain;object-position:left}.auth-brand p{letter-spacing:3px;color:#779585;text-transform:uppercase;font-size:10px;font-weight:800;margin:3px 0}.auth-copy h1{color:#1d432c;font-size:34px;margin-bottom:8px}.auth-copy p{font-size:14px;color:#84978b;margin-bottom:31px}.auth-form .field{font-size:13px;margin-bottom:17px}.auth-form input{height:51px;background:#fff}.auth-form .btn{margin-top:17px}.auth-footer{text-align:center;font-size:12px;color:#9da99f;margin-top:29px}.captcha-line{margin:13px 0}.auth-side{background:radial-gradient(circle at 75% 15%,#4e8758,transparent 45%),linear-gradient(145deg,#173e2b,#0e281c);padding:10%;color:#fff;display:flex;align-items:flex-end;min-height:100vh;position:relative;overflow:hidden}.auth-side:before,.auth-side:after{content:'';position:absolute;width:750px;height:750px;border:1px solid rgba(190,226,193,.12);border-radius:44%;transform:rotate(25deg);right:-230px;top:-270px}.auth-side:after{width:430px;height:430px;right:-120px;top:290px;transform:rotate(65deg)}.auth-side>div{position:relative;z-index:1;max-width:530px}.auth-side-eyebrow{font-size:11px;letter-spacing:3px;color:#aacbb3;font-weight:800;margin-bottom:20px}.auth-side h2{font-size:clamp(34px,3.4vw,57px);letter-spacing:-2px;font-weight:800;line-height:1.14;margin-bottom:22px;color:#fff}.auth-side p{font-size:15px;color:#c9dacd;max-width:380px}.auth-side-line{width:48px;height:3px;background:#b2d7ab;margin:50px 0 22px}.auth-side span{color:#a9c4ae;font-size:12px}.onboarding{max-width:560px;margin:12vh auto;padding:42px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.onboarding h1{margin-top:24px;color:#20442f}.onboarding p{color:var(--muted)}
.wall-page{background:#0e1912;color:#f1f7f0}.wall-shell{min-height:100vh;padding:22px 28px 14px;display:flex;flex-direction:column}.wall-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:16px}.wall-brand{display:flex;gap:19px;align-items:center;font-size:14px;font-weight:800;letter-spacing:3px;color:#bbdac2}.wall-logo{width:150px;max-height:67px;object-fit:contain;filter:brightness(1.6)}.wall-clock{text-align:right;display:flex;flex-direction:column;gap:0}.wall-clock strong{font:800 clamp(32px,3.5vw,58px)/1.1 Manrope,sans-serif;letter-spacing:-2px;color:#fff;font-variant-numeric:tabular-nums}.wall-clock span{font-size:14px;color:#9dbbab}.wall-summary{display:flex;gap:32px;border-top:1px solid #27362b;border-bottom:1px solid #27362b;padding:13px 4px;margin-bottom:18px;font-size:13px;color:#b3c6b6}.wall-summary b{color:#ebf2ea}.wall-board{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.wall-column{background:#19291e;border:1px solid #2b3a2d;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:50vh}.wall-column>header{background:#203225;border-bottom:1px solid #314533;display:flex;align-items:center;justify-content:space-between;padding:16px 19px}.wall-column h2{color:#e6f0e7;margin:0;font-size:clamp(16px,1.5vw,21px)}.wall-column header strong{font-size:22px;color:#f0f8ed}.wall-cards{padding:13px;display:flex;gap:10px;flex-direction:column;overflow:auto;max-height:calc(100vh - 250px)}.wall-order{background:#26392a;border:1px solid #354c38;border-radius:11px;padding:13px 15px}.wall-order.high{border-left:5px solid #d3a34a}.wall-order.urgent{border-left:5px solid #db6d5e}.wall-order>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.wall-order strong{font-size:clamp(16px,1.7vw,24px);color:#f5f8f4}.wall-order .wall-details{font-size:12px;color:#aec4b1;margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px}.wall-order .wall-note{color:#eac78d;font-size:11px}.wall-order .wall-progress{height:5px;background:#3c5140;border-radius:4px;overflow:hidden;margin-top:10px}.wall-order .wall-progress span{height:100%;display:block;background:#8bc996}.wall-empty{color:#849b8a;padding:32px 8px;text-align:center;font-size:14px}.wall-bottom{display:flex;justify-content:space-between;color:#718d78;font-size:11px;padding-top:10px}.wall-bottom a{color:#92b49b}.live-dot.bad{background:#dd6759}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.pack-layout{grid-template-columns:1fr}.auth-wrap{grid-template-columns:1fr}.auth-side{display:none}.auth-card{padding:70px 15px}.wall-shell{padding:16px}.wall-cards{max-height:none}}@media(max-width:780px){.sidebar{position:fixed;transform:translateX(-104%);transition:transform .22s;box-shadow:0 20px 30px #0002}.sidebar.open{transform:translateX(0)}.mobile-only{display:inline-flex}.topbar{height:58px;padding:0 16px}.date-label{display:none}.content{padding:23px 14px}.metric-grid{gap:10px}.metric-card{padding:16px}.metric-value{font-size:25px}.panel{padding:17px}.two-col{grid-template-columns:1fr}.permission-list{grid-template-columns:1fr}.status-pill{font-size:10px}.wall-head{gap:10px}.wall-brand{font-size:10px;gap:3px;flex-direction:column;align-items:flex-start}.wall-logo{width:110px}.wall-summary{gap:12px;flex-wrap:wrap;font-size:11px}.wall-board{gap:7px}.wall-column>header{padding:10px 7px}.wall-column h2{font-size:11px}.wall-column header strong{font-size:15px}.wall-cards{padding:5px;gap:6px}.wall-order{padding:8px 5px}.wall-order strong{font-size:12px}.wall-order .wall-details{font-size:9px;flex-direction:column;align-items:flex-start;gap:3px}.wall-clock strong{font-size:24px}.wall-clock span{font-size:9px}.topbar-breadcrumb{gap:7px}.auth-copy h1{font-size:28px}}
/* Additional components for the compact orders workflow */
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:19px}.search-box{flex:1;min-width:240px;position:relative;display:flex;align-items:center}.search-box .icon{position:absolute;left:14px;color:#799284}.search-box input{padding:12px 14px 12px 44px;height:45px;background:#fff;border:1px solid var(--border);outline:none;border-radius:10px;width:100%}.toolbar select{width:auto;min-width:150px}.orders-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.order-card[hidden]{display:none}.order-card-top{display:flex;justify-content:space-between;align-items:start;gap:8px}.order-card-top h3{font-size:19px;margin:0 0 4px;color:#21472d}.order-tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}.tag-red{background:#ffebe7;color:#ae463a}.order-card-body{display:flex;flex-wrap:wrap;gap:13px;margin:18px 0 15px}.order-fact{display:flex;align-items:center;gap:6px;color:#7b8c7f;font-size:12px}.order-fact .icon{width:15px;height:15px}.order-fact.highlighted{color:#ae7a29}.problem-text{width:100%;font-size:12px;background:#fff5e7;padding:9px;border-radius:6px;color:#876035}.order-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);padding-top:13px}.order-actions select{width:auto;min-height:39px}.task-list{display:flex;flex-direction:column}.task-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding:14px 3px;color:#49614f}.task-row:last-child{border:none}.task-row span:nth-child(2){flex:1}.task-symbol{background:#e9f2e8;border-radius:9px;padding:8px;color:#377148;display:flex}.task-symbol.warm{background:#fff4e5;color:#be8537}.task-symbol.neutral{background:#f0f4ee;color:#607867}.text-link{font-size:12px;font-weight:700}.sync-note{font-size:11px;color:#88998c;border-top:1px solid var(--border);padding-top:15px;margin-top:10px}.chart-col{flex:1;display:flex;align-items:center;flex-direction:column;gap:8px;height:100%}.bar-track{width:65%;max-width:55px;flex:1;position:relative;display:flex;align-items:end;background:linear-gradient(to top,#f3f7f2,transparent);border-radius:6px}.bar-fill{display:block;width:100%;background:linear-gradient(180deg,#83b892,#4b9669);border-radius:7px 7px 2px 2px;min-height:2px}.bar-value{font-size:10px;font-weight:700;color:#63836b;white-space:nowrap}.bar-date{font-size:11px;color:#91a197}.chart-col .bar-fill{height:var(--height)}
@media(max-width:1000px){.orders-grid{grid-template-columns:1fr}}@media(max-width:760px){.auth-card{width:min(440px,calc(100% - 30px))}.order-card{padding:14px}.order-card-top{flex-wrap:wrap}.toolbar .search-box{width:100%;flex:auto}.toolbar select{flex:1}.order-actions .inline-form{width:100%}.wall-summary{font-size:10px}}
/* v0.2 · persoonlijke startpagina's */
.personal-preferences .dashboard-settings{display:flex;flex-wrap:wrap;align-items:center;gap:16px 25px}.personal-preferences .dashboard-settings .check-label{margin:0}.personal-preferences .dashboard-settings button{margin-left:auto}.performance-panel>.metric-grid{margin-top:10px}.performance-note{margin:20px 0 15px}.performance-period{margin:0 0 12px}.period-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}.period-tab{border-radius:9px;padding:9px 15px;text-decoration:none;background:#f1f6f0;color:#4d6856;font-size:12px;font-weight:700}.period-tab.selected{background:#24593a;color:#fff}.employee-home-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;background:#ecf4ec;border:1px solid #dce9dc;padding:20px 23px;border-radius:14px}.employee-home-intro h2{margin:0 0 6px}.employee-home-intro p{margin:0;font-size:13px;color:#677d6b}.dashboard-mini{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.dashboard-mini strong{font-size:30px;color:#24593a}.dashboard-mini span{font-size:13px;color:#667e6e}.ranking-section{min-width:0}.ranking-section h3{margin:0 0 16px}.rank-numbers{text-align:right;font-size:13px;font-weight:750;color:#325a3c}.rank-numbers small{display:block;font-weight:500;color:#748677;font-size:11px;margin-top:3px}.dev-details div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid #e9eee7;padding:12px 0}.dev-details dt{font-size:12px;color:#718273}.dev-details dd{margin:0;max-width:60%;word-break:break-word;text-align:right;font-size:13px;color:#254332;font-weight:700}.dev-details{margin-bottom:18px}
@media(max-width:780px){.employee-home-intro{flex-direction:column;align-items:flex-start}.personal-preferences .dashboard-settings{flex-direction:column;align-items:stretch}.personal-preferences .dashboard-settings button{margin-left:0}.period-tab{padding:8px 11px}}

/* v0.3 · tablet-first order picker, large touch targets */
.order-card{position:relative;transition:border-color .15s,transform .15s}
.order-card:has(.order-card-hit){cursor:pointer}
.order-card:has(.order-card-hit):active{transform:scale(.994)}
.order-card:has(.order-card-hit):hover{border-color:#91b39a}
.order-card-tap{position:static}
.order-card-hit{position:absolute;inset:0;z-index:1;display:block;border:0;background:transparent;cursor:pointer;border-radius:12px;color:transparent;width:100%;padding:0}
.order-card-hit:focus-visible{outline:3px solid #308154;outline-offset:3px}
.order-actions{position:relative;z-index:2;pointer-events:none}
.order-actions > *{pointer-events:auto}

.pack-app{max-width:1000px;margin:0 auto;padding-bottom:110px}
.pack-compact-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px}
.pack-compact-head .back-link{margin:0;min-height:44px;display:flex;align-items:center}
.pack-title{display:flex;gap:12px;align-items:center;flex:1;min-width:220px}
.pack-title h2{font-size:clamp(20px,2.3vw,29px);margin:0;color:#1d4731}
.pack-primary-actions .btn{min-height:48px}
.pack-progress-card{border:1px solid #dae8da;background:#ecf5ec;border-radius:16px;padding:16px 22px;margin:14px 0 15px}
.pack-progress-card .progress-label{margin:0 0 14px}
.pack-progress-card .progress-label strong{font-size:20px;color:#275b3a}
.pack-products{background:#fff;border:1px solid #e0e8e0;border-radius:16px;overflow:hidden;padding:0 17px}
.pack-products .pack-item{min-height:82px;padding:17px 6px;gap:13px;flex-wrap:wrap}
.pack-products .pack-item-body strong{font-size:clamp(14px,1.45vw,17px);line-height:1.4}
.pack-products .pack-item-body .muted{margin-top:4px}
.pack-products .pack-count{font-size:clamp(17px,2.2vw,23px);font-variant-numeric:tabular-nums;color:#235d3b;white-space:nowrap}
.pack-products .small-undo{min-height:42px;padding:9px 12px}
.pack-note{border:1px solid #eadabd;background:#fff9e9;border-radius:10px;margin-bottom:12px;padding:12px 15px;font-size:14px}
.pack-note summary{cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700}
.pack-note p{margin:10px 0 0}
.pack-scan-section{margin-top:16px}
.pack-scan-section .scanner-frame{max-width:700px;height:min(32vh,245px);margin:0 auto 12px}
.pack-scan-section .scanner-frame[hidden]{display:none}
.pack-scan-section .scan-feedback{margin:12px 0 15px}
.scanner-manual{max-width:720px;margin:15px auto 0;color:#778a7a;font-size:12px}
.scanner-manual label{display:block;margin-bottom:7px}
.scanner-manual-row{display:flex;gap:7px}
.scanner-manual-row input{flex:1;min-width:0;border:1px solid #d8e5d8;border-radius:10px;min-height:48px;padding:10px 12px;font-size:14px}
.packing-toolbar{position:fixed;bottom:0;left:256px;right:0;z-index:22;background:rgba(255,255,255,.96);border-top:1px solid #e1e9e2;box-shadow:0 -5px 24px #243f290d;padding:12px max(18px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:12px}
.packing-toolbar .btn{min-height:58px;font-size:16px;flex:1;max-width:360px;border-radius:13px}
.pack-dialog{padding:24px;width:min(94vw,420px);max-height:calc(100dvh - 30px);overflow:auto;border:none;border-radius:21px;box-shadow:0 24px 75px #05180c69;color:#263c2e}
.pack-dialog::backdrop{background:#0b1b1299;backdrop-filter:blur(3px)}
.pack-dialog h2{font-size:23px;margin:12px 0 9px}
.pack-dialog p{line-height:1.5}
.dialog-heading{display:flex;justify-content:space-between;align-items:center}
.dialog-close{border:0;background:#eff3ee;color:#54725a;font-size:25px;width:42px;height:42px;border-radius:12px;cursor:pointer}
.qty-value{height:67px;display:flex;align-items:center;justify-content:center;background:#eaf5ea;color:#24583a;border-radius:12px;font:bold 42px/1 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;margin:13px 0}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.keypad-button{height:59px;border-radius:12px;background:#f5f7f3;border:1px solid #dce8dc;color:#274c33;font-size:27px;font-weight:700;cursor:pointer;touch-action:manipulation}
.keypad-button:active{background:#dcebdc}
.dialog-submit{font-size:17px;min-height:58px;margin-top:16px}
.pack-dialog .check-label{align-items:center;min-height:58px;padding:12px;background:#edf5ed;border-radius:12px;font-size:15px;font-weight:700}
.pack-dialog .check-label input{width:23px;height:23px;flex-shrink:0}
.pack-dialog .stacked-form{margin-top:16px}
.update-app{position:fixed;z-index:60;bottom:calc(80px + env(safe-area-inset-bottom));right:16px;left:16px;max-width:440px;margin:auto;border-radius:13px;background:#173d2c;color:#fff;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 25px #08231344;font-size:13px}
.update-app button{border:1px solid #a2d1af;background:#eaf7ed;color:#174d30;border-radius:9px;min-height:39px;padding:8px 11px;margin-left:auto;font-weight:700;cursor:pointer}
@media(max-width:1100px){.packing-toolbar{left:256px}}
@media(max-width:780px){
 .packing-toolbar{left:0}.pack-app{padding-bottom:110px}.pack-compact-head{gap:9px}
 .pack-primary-actions{width:100%}.pack-primary-actions .btn{width:100%}
 .pack-products{padding:0 11px}.pack-products .pack-item{gap:9px}
 .pack-dialog{padding:18px}.keypad-button{height:57px}.pack-progress-card{padding:15px}
 .content:has(.pack-app)>.page-title{display:none}
 .app-footer:has(+script){font-size:10px}
}
@media(max-width:480px){.pack-products .pack-item-body{flex-basis:55%}.pack-products .inline-form{width:100%;justify-content:flex-end}.packing-toolbar{padding:9px 11px calc(9px + env(safe-area-inset-bottom))}.packing-toolbar .btn{font-size:14px;gap:5px;min-height:58px;padding:10px}}

/* v0.3: session controls are always reachable on shared tablets. */
.topbar-right{gap:10px}
.header-logout{margin:0}
.header-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;border-radius:10px;border:1px solid #d6e5d8;background:#f3f8f2;color:#285b3b;font:700 13px/1.2 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.header-action:hover{background:#e4f1e6}
.logout-action{color:#854437;background:#fff7f4;border-color:#f0e1dc}
.logout-action:hover{background:#fff0eb}
.header-action .icon{width:18px;height:18px;flex-shrink:0}
.install-dialog{border:1px solid #d6e5d8;border-radius:17px;padding:25px;width:min(92vw,440px);box-shadow:0 25px 80px #102d1f55;color:#24462e}
.install-dialog::backdrop{background:rgba(17,40,27,.48)}
.install-dialog h2{margin:0 0 13px;font-size:22px}
.install-dialog p{line-height:1.65;font-size:14px;margin-bottom:22px}
@media(max-width:780px){
 .topbar{position:sticky;top:0;z-index:11;background:#fff;min-height:60px;height:auto;padding:8px 12px;gap:6px}
 .topbar-right{margin-left:auto;gap:6px}
 .topbar-breadcrumb{min-width:0;flex:1}
 .topbar-breadcrumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .header-action{min-height:44px;padding:8px 10px;font-size:12px}
 .header-action .icon{width:17px;height:17px}
}
@media(max-width:480px){
 .topbar-breadcrumb span,.topbar-breadcrumb .crumb-sep{display:none}
 .install-action span{display:none}
 .install-action{width:44px;padding:9px}
 .logout-action{min-width:96px}
}

/* v0.3.1 · direct verdergaan met jouw order; compacte tablet-bestellijst */
.orders-grid{grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:970px){
 .orders-grid .order-card{display:grid;grid-template-columns:minmax(220px,1fr) minmax(210px,1.1fr) auto;align-items:center;column-gap:20px;padding:14px 18px}
 .orders-grid .order-card-body{margin:0;align-content:center;gap:5px 13px}
 .orders-grid .order-actions{border-top:0;border-left:1px solid var(--border);padding:0 0 0 16px;min-width:120px}
}
.dashboard-mini-active{color:inherit;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.dashboard-mini-active:hover,.dashboard-mini-active:focus-visible{background:#edf6eb;border-color:#96be9e;color:inherit}
.dashboard-mini-active span{display:flex;align-items:center;gap:7px}
.dashboard-mini-active .icon{width:18px;height:18px}
.dashboard-mini-active small{font-size:12px;color:#24593a;font-weight:650}
.my-active-orders{display:flex;flex-direction:column;gap:7px}
.my-active-order{min-height:58px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:11px;background:#f2f8f0;color:#2b5639;font-weight:750;touch-action:manipulation}
.my-active-order:hover,.my-active-order:focus-visible{background:#e3f0de}
.my-active-order span:last-child{display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
.pack-note[open],.pack-note summary{cursor:pointer;touch-action:manipulation}
.pack-note summary{min-height:32px;justify-content:space-between;list-style:none}
.pack-note summary::-webkit-details-marker{display:none}
.pack-note .note-chevron{margin-left:auto;font-size:20px;line-height:1;transition:transform .15s}
.pack-note[open] .note-chevron{transform:rotate(180deg)}
.pack-note[open] p{cursor:pointer;padding:10px 6px 9px;margin:3px 0 0;border-top:1px solid #eadabd}
.packing-release{display:flex;flex:1;max-width:360px;min-width:0}
.packing-release .btn{max-width:none;width:100%}
@media(max-width:850px){.packing-toolbar{flex-wrap:wrap;gap:7px}.packing-toolbar .btn{min-height:52px;font-size:13px}.packing-release{flex-basis:100%;max-width:none}.pack-app{padding-bottom:170px}}
@media(max-width:450px){.my-active-order{flex-wrap:wrap}.my-active-order span:last-child{margin-left:auto}}

/* v0.3.1 · belangrijke aantalfout direct onder numeriek display */
.pack-dialog .qty-value.is-invalid{color:#aa2525;background:#fff0ed;border:2px solid #d43d35;box-shadow:0 0 0 2px #f8d8d2 inset}
.pack-dialog .qty-error:not([hidden]){display:flex;align-items:flex-start;gap:10px;border:2px solid #d43d35;border-radius:12px;background:#fff0ed;color:#a62121;padding:13px 14px;margin:-4px 0 13px;line-height:1.35;font-size:15px}
.pack-dialog .qty-error>span{font-size:24px;line-height:1;flex:none}
.pack-dialog .qty-error strong{font-weight:800}