:root{--navy:#071d33;--blue:#0a3559;--sky:#0a5a8c;--orange:#f7941d;--bg:#f3f6f9;--panel:#fff;--text:#0f2236;--muted:#66788a;--border:#dbe3eb;--shadow:0 10px 30px rgba(7,29,51,.08);color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html.dark{--bg:#07131f;--panel:#0c2033;--text:#eef6fc;--muted:#91a4b6;--border:rgba(255,255,255,.11);--shadow:0 12px 34px rgba(0,0,0,.25);color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font-size:16px}button,input,select,textarea{font:inherit}.dark-logo{display:none}html.dark .dark-logo{display:block}html.dark .light-logo{display:none}
.login-page{min-height:100vh;background:linear-gradient(135deg,#edf4f8,#d7e7f0)}html.dark .login-page{background:radial-gradient(circle at 20% 10%,#124269 0,#071d33 38%,#040d16 100%)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative}.login-card{width:min(440px,100%);background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:40px;box-shadow:var(--shadow)}.login-logo{height:70px;width:auto;margin-bottom:30px}.login-card h1{font-size:1.65rem;margin:0 0 8px}.login-card>p{color:var(--muted);margin:0 0 28px}.login-card form{display:grid;gap:18px}.login-card label,.form-grid label{display:grid;gap:8px;font-size:.9rem;font-weight:650}.login-card input,.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:12px 13px;outline:none}.login-card input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,29,.18)}button{border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.primary{background:var(--orange);color:#071d33;font-weight:750;border-radius:10px;padding:12px 16px}.primary:hover{background:#e88612}.wide{width:100%}.login-card small{display:block;text-align:center;color:var(--muted);margin-top:24px}.alert{padding:11px 13px;border-radius:9px;margin-bottom:18px;font-size:.9rem}.alert.error{background:#fff0f0;color:#a12626;border:1px solid #ffcaca}.theme-toggle{display:grid;place-items:center;width:44px;height:44px;min-width:44px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:11px}.login-theme{position:absolute;right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top))}
#app{min-height:100vh;display:grid;grid-template-columns:228px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:white;display:flex;flex-direction:column;padding:16px 12px}.brand{height:65px;padding:5px 9px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.brand img{height:40px;max-width:170px}.sidebar nav{display:grid;grid-auto-rows:min-content;align-content:start;gap:4px;padding:14px 0;flex:1}.nav-btn{display:flex;align-items:center;gap:10px;border-radius:9px;padding:9px 10px;color:#bcd0df;background:transparent;text-align:left;font-size:.9rem;line-height:1.3}.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.1);color:white}.nav-icon{width:20px;text-align:center}.sidebar-footer{display:grid;grid-template-columns:34px 1fr 30px;align-items:center;gap:8px;padding:12px 6px 0;border-top:1px solid rgba(255,255,255,.1)}.sidebar-footer strong,.sidebar-footer span{display:block}.sidebar-footer strong{font-size:.9rem}.sidebar-footer span{font-size:.75rem;color:#8fa9bc}.sidebar-footer button{background:transparent;color:#9db4c5;font-size:1.15rem}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:var(--navy);font-weight:800;font-size:.9rem}.main{min-width:0}.topbar{height:68px;display:flex;align-items:center;gap:14px;padding:0 28px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 92%,transparent);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}#menu-toggle{display:none;background:transparent;color:var(--text);font-size:1.4rem}.search{display:flex;align-items:center;gap:8px;flex:1;max-width:520px;border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:0 12px}.search input{width:100%;height:42px;border:0;outline:0;background:transparent;color:var(--text)}.topbar .theme-toggle{margin-left:auto}.view{padding:28px;max-width:1540px;margin:0 auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head h1{font-size:1.7rem;margin:0 0 6px}.page-head p{color:var(--muted);margin:0}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.metric,.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.metric{padding:18px 20px;color:var(--text);text-align:left;width:100%;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--muted) 45%,var(--border));box-shadow:0 14px 34px rgba(7,29,51,.14)}.metric:focus-visible{outline:3px solid rgba(247,148,29,.45);outline-offset:2px}.metric span{display:block;color:var(--muted);font-size:.85rem}.metric strong{display:block;margin-top:8px;font-size:1.65rem}.metric small{display:block;margin-top:10px;color:var(--muted);font-size:.76rem;font-weight:700}.metric:hover small{color:var(--text)}.metric.orange{border-top:3px solid var(--orange)}.metric.blue{border-top:3px solid #2f91c4}.metric.red{border-top:3px solid #e05252}.metric.green{border-top:3px solid #2fa36b}.panel{overflow:hidden;margin-bottom:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid var(--border)}.panel-head h2{font-size:1rem;margin:0}.panel-head p{font-size:.84rem;color:var(--muted);margin:4px 0 0}.badge{display:inline-flex;align-items:center;border-radius:99px;padding:4px 9px;font-size:.75rem;font-weight:700;border:1px solid var(--border);background:var(--bg)}.status-Beschikbaar,.status-Actief,.status-Akkoord,.status-Afgerond{color:#16804b;background:rgba(47,163,107,.1);border-color:rgba(47,163,107,.28)}.status-Verzonden,.status-Gepland,.status-Nog-plannen,.status-In-behandeling{color:#b66300;background:rgba(247,148,29,.12);border-color:rgba(247,148,29,.3)}.status-Open,.status-Hoog,.status-Onderhoud,.status-Defect{color:#b93636;background:rgba(224,82,82,.1);border-color:rgba(224,82,82,.25)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:middle}th{font-size:.75rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);font-weight:700}td{font-size:.9rem}.click-row{cursor:pointer}.click-row:hover{background:rgba(10,90,140,.06)}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;font-weight:700}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.empty,.loading{text-align:center;color:var(--muted);padding:56px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.category{padding:17px;background:var(--panel);border:1px solid var(--border);border-radius:13px}.category strong{font-size:1.4rem}.category span{display:block;color:var(--muted);font-size:.82rem;margin-top:4px}.filters{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border)}.compact-filters{padding:11px 18px}.filter{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:99px;padding:7px 11px;font-size:.8rem}.filter.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(3,12,20,.58);display:flex;justify-content:flex-end}.overlay[hidden]{display:none}.drawer{width:min(700px,100%);height:100%;background:var(--panel);overflow:auto;box-shadow:-20px 0 50px rgba(0,0,0,.2)}.drawer-head{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--border);padding:20px 24px;display:flex;justify-content:space-between;z-index:2}.drawer-head h2{margin:0;font-size:1.35rem}.drawer-head p{margin:4px 0 0;color:var(--muted);font-size:.85rem}.close{width:38px;height:38px;border-radius:9px;background:var(--bg);color:var(--text)}.drawer-body{padding:22px 24px 40px}.detail-hero{background:var(--blue);color:#fff;border-radius:13px;padding:20px;margin-bottom:18px}.detail-hero small{color:#b9d7ea}.detail-hero strong{display:block;font-size:1.8rem;margin-top:4px}.detail-section{border:1px solid var(--border);border-radius:12px;margin-bottom:16px;overflow:hidden}.detail-section h3{font-size:.9rem;margin:0;padding:13px 15px;border-bottom:1px solid var(--border)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.detail-grid dt{font-size:.74rem;color:var(--muted)}.detail-grid dd{margin:4px 0 0;font-size:.9rem}.calc td:last-child,.calc th:last-child{text-align:right}.calc .total{background:var(--bg);font-weight:800}.drawer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.secondary{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .full{grid-column:1/-1}.form-grid textarea{min-height:90px;resize:vertical}.form-grid label>small{color:var(--muted);font-size:.75rem;font-weight:500}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;justify-content:start}.check input{width:18px!important}.quote-drawer{width:min(1120px,100%)}.quote-form{padding-top:18px}.quote-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.quote-fields{display:grid;gap:16px}.form-section{border:1px solid var(--border);border-radius:13px;padding:18px;background:color-mix(in srgb,var(--panel) 96%,var(--bg))}.form-section h3{font-size:.95rem;margin:0 0 16px}.currency-input,.meter-input{display:flex;align-items:center;border:1px solid var(--border);background:var(--panel);border-radius:10px;overflow:hidden}.currency-input>span,.meter-input>span{color:var(--muted);padding:0 0 0 12px}.meter-input>span{padding:0 12px 0 0}.currency-input input,.meter-input input{border:0!important;border-radius:0!important;box-shadow:none!important}.cable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}.cable-grid label{font-size:.78rem!important}.cable-grid small{color:var(--muted);font-weight:500}.live-calculation{position:sticky;top:90px;border:1px solid var(--border);border-radius:15px;background:var(--bg);overflow:hidden}.calc-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:20px;background:var(--blue);color:white}.calc-title small,.calc-title span{display:block;color:#bcd4e6}.calc-title strong{display:block;font-size:1.85rem;margin:3px 0}.live-dot{border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:4px 8px!important;color:#dff8eb!important;font-size:.72rem;font-weight:750}.live-lines{margin:0;padding:14px 18px}.live-lines>div,.live-total>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0}.live-lines dt{color:var(--muted);font-size:.8rem}.live-lines dd{margin:0;font-size:.82rem;font-weight:750}.live-lines .discount dd{color:#16804b}.live-total{border-top:1px solid var(--border);padding:10px 18px 16px}.live-total span{font-size:.82rem;color:var(--muted)}.live-total strong{font-size:.88rem}.live-total .grand-total{border-top:1px solid var(--border);margin-top:5px;padding-top:13px}.live-total .grand-total span,.live-total .grand-total strong{color:var(--text);font-size:1rem}.live-calculation>p{margin:0;padding:0 18px 18px;color:var(--muted);font-size:.72rem}.quote-actions{padding-top:18px;border-top:1px solid var(--border)}.toast{position:fixed;right:24px;bottom:24px;z-index:90;background:var(--navy);color:white;border-left:4px solid var(--orange);padding:13px 16px;border-radius:9px;box-shadow:var(--shadow)}
@media(max-width:1050px){.cards,.category-grid{grid-template-columns:repeat(2,1fr)}.quote-form-layout{grid-template-columns:1fr}.live-calculation{position:static}}@media(max-width:760px){#app{display:block}.sidebar{position:fixed;z-index:30;left:-244px;width:228px;transition:left .2s}.sidebar.open{left:0}#menu-toggle{display:block}.topbar{padding:0 16px}.view{padding:20px 14px}.cards,.category-grid,.two-col,.location-choices{grid-template-columns:1fr}.page-head{align-items:stretch}.page-head .primary{white-space:nowrap}.table-wrap{overflow:auto}th,td{white-space:nowrap;padding:12px 14px}.detail-grid,.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.cable-grid{grid-template-columns:1fr 1fr}.quote-form{padding:16px 14px 28px}.form-section{padding:15px}.login-card{padding:30px 24px}}

/* Offertebeheer en iPhone-webapp */
.sidebar{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.nav-btn{min-height:44px}.topbar{height:calc(68px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}#menu-toggle{width:44px;height:44px;min-width:44px}.search,.search input{min-width:0}.status-Gearchiveerd{color:var(--muted)}.drawer-actions{flex-wrap:wrap}.secondary,.danger{border:1px solid var(--border);border-radius:10px;padding:11px 15px}.danger{background:rgba(224,82,82,.1);color:#c43e3e;border-color:rgba(224,82,82,.3)}button:disabled{opacity:.5;cursor:not-allowed}.small-button{padding:8px 11px;font-size:.78rem}.version-list{display:grid}.version-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-bottom:1px solid var(--border)}.version-row:last-child{border-bottom:0}.version-row.current{background:var(--bg)}.version-row strong,.version-row span,.version-row small{display:block}.version-row span,.version-row small,.version-empty{color:var(--muted);font-size:.78rem;margin:3px 0 0}.version-empty{padding:15px}.toast{right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom))}
.location-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px}.location-choice{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:10px!important;border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:var(--bg)}.location-choice input{width:18px!important;margin-top:2px}.location-choice span,.location-choice strong,.location-choice small{display:block}.location-choice small,.field-help{color:var(--muted);font-size:.76rem;font-weight:500}.field-help{display:block;margin-top:8px}
@media(max-width:760px){body.menu-open{overflow:hidden}body.menu-open::after{content:"";position:fixed;inset:0;z-index:20;background:rgba(3,12,20,.55)}#menu-toggle{display:grid;place-items:center}.topbar{padding-top:env(safe-area-inset-top);padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left));gap:8px}.view{padding-bottom:calc(20px + env(safe-area-inset-bottom))}.quote-form{padding-bottom:calc(28px + env(safe-area-inset-bottom))}.quote-manage-actions>*{flex:1;min-width:120px}}