/* Nautic Control v0.2 */
:root{--navy:#0A1F3D;--paper:#F2EFE8;--signal:#FF8A00;--line:#D6D0C2;--line2:#E6E1D6;--mut:#5A6578;--mut2:#A9B6C8;--red:#B42318;--amber:#E8A100;--amber-t:#A15C00;--green:#12A150;--green-t:#067647;--blue:#2563EB}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--navy);font:15px/1.45 'IBM Plex Sans',system-ui,sans-serif;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
a{color:var(--navy)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600}
.sub{font-size:13px;color:var(--mut)}
.wrap{padding:0 18px;max-width:760px;margin:0 auto}
h2{font-family:'Archivo',sans-serif;font-stretch:80%;font-weight:700;font-size:19px;margin:20px 4px 8px}
.h1{font-family:'Archivo',sans-serif;font-stretch:72%;font-weight:800;font-size:34px;line-height:1;margin:18px 4px 6px;text-transform:uppercase}

/* hero */
.hero{position:relative;height:250px;background:var(--navy);overflow:hidden}
.hero.short{height:230px}
.hero>img{width:100%;height:100%;object-fit:cover;display:block}
.hero-empty{height:100%;display:flex;align-items:center;justify-content:center}
.top{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:2}
.top.solid{position:sticky;top:0;left:0;right:0;background:var(--navy);padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
.tr{display:flex;gap:6px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--paper);font:inherit;font-size:13px;padding:6px 10px;border-radius:6px;border:0;text-decoration:none;min-height:34px}
.top.solid .pill{background:#13305A}
select.pill{appearance:none;-webkit-appearance:none;max-width:140px}
.back{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--paper);display:flex;align-items:center;justify-content:center;z-index:2}
.pc{position:absolute;bottom:12px;right:12px;background:var(--navy);color:var(--paper);font-size:12px;padding:4px 8px;border-radius:6px}
.pcar{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory}
.pcar img{flex:0 0 100%;height:100%;object-fit:cover;scroll-snap-align:start}

/* band */
.band{background:var(--navy);color:var(--paper);padding:16px 22px 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.band.col{flex-direction:column;align-items:flex-start;gap:2px}
.ship{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:72%;font-size:44px;line-height:.95}
.band.col .ship{font-size:40px}
.meta{font-size:13px;color:var(--mut2);margin-top:4px}
.read{text-align:right}
.big{font-size:24px;line-height:1}
.big small{font-size:13px;color:var(--mut2)}

/* rag */
.rag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border-bottom:1px solid var(--line)}
.rag>div{padding:10px 0;text-align:center;font-size:12px;color:var(--mut);border-right:1px solid var(--line2)}
.rag>div:last-child{border-right:0}
.rag b{display:block;font-size:22px}
.c-red{color:var(--red)}.c-amber{color:var(--amber-t)}.c-green{color:var(--green-t)}

/* lists */
.list{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:11px 14px;text-decoration:none;color:inherit;min-height:52px}
.row.link:active{background:#F8F6F1}
.rt{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.rr{font-size:12px;font-weight:600;white-space:nowrap}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:0 0 auto}
.d-red{background:var(--red)}.d-amber{background:var(--amber)}.d-green{background:var(--green)}.d-blue{background:var(--blue)}.d-none{background:var(--line)}

/* specs */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.specs>div{background:#fff;padding:10px 16px;min-width:0;overflow-wrap:anywhere}
.specs .sub{font-size:12px}

/* logboek-carrousel */
.lh{display:flex;justify-content:space-between;align-items:baseline;padding-right:4px}
.car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 8px;scroll-padding:0 18px}
.card{flex:0 0 min(290px,82vw);scroll-snap-align:start;background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.ch{background:#3A5272;color:var(--paper);padding:10px 14px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:13px}
.ch.alert{background:var(--navy)}
.cb{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.kind{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mut)}
.kind .dot{width:10px;height:10px}
.ct{font-weight:600;font-size:16px;line-height:1.3}
.by{font-size:13px}
.thumbs{display:flex;gap:6px}
.thumbs img{width:56px;height:56px;object-fit:cover;border-radius:6px;display:block}
.chipdoc{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-decoration:none;min-height:44px;font-size:13px;font-weight:600}
.chipdoc.off{color:var(--mut);border-style:dashed}

/* knoppen & formulieren */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--paper);border:0;border-radius:8px;font:inherit;font-weight:600;padding:10px 16px;min-height:44px;text-decoration:none;cursor:pointer}
.rr.btn{font-size:13px;padding:6px 12px;min-height:36px}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.adds{display:flex;flex-direction:column;gap:8px;margin:22px 0 10px}
details.add{background:#fff;border-radius:10px}
details.add summary{padding:13px 14px;font-weight:600;cursor:pointer;list-style:none}
details.add summary::-webkit-details-marker{display:none}
details.add form{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
label.chk{flex-direction:row;align-items:center;gap:8px}
input,select,textarea{font:inherit;font-size:16px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px;width:100%}
input[type=checkbox]{width:20px;min-height:20px}
input[type=file]{padding:8px;font-size:14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:1px}
.qty{display:flex;gap:6px}
.qty input{width:64px;text-align:right;padding:6px 8px;min-height:38px}
.qty button{font:inherit;font-size:13px;font-weight:600;border:0;background:var(--navy);color:var(--paper);border-radius:8px;padding:0 10px}
.hrs{background:#fff;border-radius:10px;padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px}
.hrs label{color:var(--navy)}
.hin{display:flex;gap:8px}
.hin input{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:22px;text-align:right}
.hin button{background:var(--signal);color:var(--navy);border:0;border-radius:8px;font:inherit;font-weight:700;padding:0 18px;box-shadow:0 3px 0 #C25E00}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:8px 6px calc(10px + env(safe-area-inset-bottom));font-size:11px;text-align:center;z-index:10}
.tabbar a{text-decoration:none;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px;justify-content:center}
.tabbar a[aria-current]{color:var(--navy);font-weight:600}
.tabbar a.plus{justify-self:center;width:58px;height:58px;margin-top:-30px;border-radius:50%;background:var(--signal);color:var(--navy);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;box-shadow:0 4px 0 #C25E00}
.pw{text-align:center;font-size:11px;color:var(--mut);padding:24px 0 8px;display:flex;justify-content:center;align-items:center;gap:6px}
.pw b{font-family:'Archivo',sans-serif;font-stretch:80%;letter-spacing:.04em}
.flash{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));background:var(--navy);color:var(--paper);padding:10px 16px;border-radius:8px;font-weight:600;z-index:20;animation:fl 3s forwards}
@keyframes fl{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* login */
body.auth{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
.authbox{background:#fff;border-radius:14px;padding:24px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.brandrow{display:flex;gap:12px;align-items:center}
.wm,.wm2{font-family:'Archivo',sans-serif;font-weight:800;line-height:.95}
.wm{font-stretch:72%;font-size:26px}.wm2{font-stretch:125%;font-size:12px;letter-spacing:.12em}
.err{color:var(--red);font-weight:600;margin:0}
.langs{text-align:center;font-size:13px}
@media (min-width:760px){.hero{height:340px}.car{margin:0;padding:0 0 8px}}

/* v0.4 */
.tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;overflow-x:auto;background:var(--paper);padding:10px 14px;border-bottom:1px solid var(--line)}
.tabs a{flex:0 0 auto;text-decoration:none;font-size:14px;font-weight:600;color:var(--mut);padding:8px 12px;border-radius:20px;min-height:38px;display:flex;align-items:center;gap:6px}
.tabs a[aria-current]{background:var(--navy);color:var(--paper)}
.tabs a span{font-family:'IBM Plex Mono',monospace;font-size:11px;background:rgba(127,127,127,.18);border-radius:10px;padding:1px 6px}
.sysh{display:flex;align-items:center;gap:8px}
.band .meta .dot{width:9px;height:9px;vertical-align:middle}
.task{background:#fff;border-radius:10px;overflow:hidden}
.task .row{background:transparent}
.task details.add{border-top:1px solid var(--line2);border-radius:0}
.task details.add summary{font-size:13px;color:var(--mut);padding:9px 14px}
.bar{position:relative;height:8px;margin:0 14px 12px;border-radius:4px;background:linear-gradient(90deg,var(--green) 0,var(--green) var(--m),var(--amber) var(--m),var(--amber) var(--r),var(--red) var(--r))}
.bar i{position:absolute;top:-4px;width:4px;height:16px;margin-left:-2px;background:var(--navy);border-radius:2px;box-shadow:0 0 0 2px #fff}
.crit{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;font-weight:700;align-items:center;justify-content:center}
.tag{font-size:11px;font-weight:600;color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chks{display:flex;flex-wrap:wrap;gap:6px 14px}
.month{display:flex;flex-direction:column;gap:12px}
.month fieldset{background:#fff;border:0;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin:0}
.month legend{float:left;width:100%;font-weight:600;padding:0}
.mrep{background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:10px}
.mrep .mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.mrep .mh a{font-size:13px}
.mrep table{width:100%;border-collapse:collapse;font-size:14px}
.mrep th{text-align:right;font-size:12px;color:var(--mut);font-weight:600;padding:4px 0}
.mrep td{padding:5px 0;border-top:1px solid var(--line2)}
.mrep td+td,.mrep th+th{text-align:right;padding-left:8px}
.card0{border-radius:10px;overflow:hidden;margin-top:14px;border:0}
.band{flex-wrap:wrap}
.band .ship{font-size:clamp(30px,10vw,44px);overflow-wrap:anywhere}
.tabs a{padding:8px 10px;font-size:13px}

/* v0.5 pakketten */
.links{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.btn.sm{min-height:30px;padding:4px 10px;font-size:12px}
.pkgcur{background:var(--navy);color:var(--paper);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pkgcur .sub{color:var(--mut2)}
.pkgcur .btn{background:var(--signal);color:var(--navy)}
.pkgtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pkgtabs a{background:#fff;border:2px solid transparent;border-radius:12px;padding:12px 10px;text-decoration:none;display:flex;flex-direction:column;gap:2px;min-height:84px}
.pkgtabs a[aria-current]{border-color:var(--navy)}
.pkgtabs b{font-family:'Archivo',sans-serif;font-stretch:80%;font-size:17px}
.pkgtabs span{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600}
.pkgtabs small{font-size:12px;color:var(--mut)}
.note{font-size:13px;color:var(--mut);background:#fff;border-left:3px solid var(--signal);padding:10px 12px;border-radius:0 8px 8px 0;margin:14px 0}
.ptsbar{position:sticky;top:58px;z-index:4;background:var(--paper);padding:8px 0;display:flex;flex-direction:column;gap:6px}
.ptsbar i{display:block;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.ptsbar em{display:block;height:100%;width:0;background:var(--green);transition:width .2s}
.ptsbar.over em{background:var(--red)}.ptsbar.over b{color:var(--red)}
.row.pick{cursor:pointer;grid-template-columns:24px minmax(0,1fr) auto}
.row.pick input{width:22px;height:22px;min-height:22px;accent-color:var(--navy)}
.pkgform{display:flex;flex-direction:column;gap:12px}
.pkgform .btn:disabled{opacity:.4}
.mnav{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 12px}
.mnav a{font-size:20px;text-decoration:none;padding:4px 10px}
.mrep td.sec{font-weight:600;padding-top:12px;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.mrep tr.tot td{border-top:2px solid var(--navy);font-weight:700;padding-top:8px}
form.inl{display:inline}
.adm{display:flex;flex-direction:column;gap:12px}
.adm fieldset{background:#fff;border:0;border-radius:10px;padding:12px 14px;margin:0;display:flex;flex-direction:column;gap:8px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tag.on{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.chks .pk{display:flex;flex-direction:column;gap:2px;margin-right:12px}

/* v0.6 monitoring */
.alarms{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.alarm{display:flex;flex-direction:column;gap:2px;background:var(--red);color:#fff;border-radius:10px;padding:12px 14px;text-decoration:none;animation:pulse 2s infinite}
.alarm b{font-family:'Archivo',sans-serif;letter-spacing:.06em}
.alarm span{font-size:12px;opacity:.85}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(180,35,24,.5)}50%{box-shadow:0 0 0 6px rgba(180,35,24,0)}}
.live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lv{background:#fff;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;border-left:4px solid var(--green)}
.lv span{font-size:12px;color:var(--mut)}
.lv b{font-size:17px}
.lv.bad{border-left-color:var(--red)}.lv.bad b{color:var(--red)}
.lv.dev{border-left-color:var(--line)}.lv.dev b{font-size:13px;font-family:inherit}
.cam{position:relative;margin-top:8px;border-radius:10px;overflow:hidden}
.cam img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cam span{position:absolute;bottom:8px;right:8px;background:var(--navy);color:var(--paper);font-size:12px;padding:3px 8px;border-radius:6px}
.visit{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.devbox{background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:12px}
.devbox .list{gap:6px}
.devbox details.add{background:var(--paper)}
.tokbox{background:var(--navy);color:var(--paper);border-radius:12px;padding:14px;margin-bottom:14px;overflow-wrap:anywhere}
.tokbox code{display:block;font-family:'IBM Plex Mono',monospace;font-size:15px;background:#13305A;padding:10px;border-radius:8px;margin:8px 0;user-select:all}
.tokbox .sub{color:var(--mut2)}
.ok{background:var(--green);color:#fff;padding:10px 12px;border-radius:8px;margin:0}
code{overflow-wrap:anywhere}

/* v0.7 omslagfoto */
.heroedit{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;gap:6px;align-items:center}
.heroedit label{flex-direction:row;align-items:center;gap:6px;background:var(--navy);color:var(--paper);font-size:13px;font-weight:600;padding:8px 12px;border-radius:20px;cursor:pointer;min-height:40px}
.heroedit a{background:rgba(10,31,61,.75);color:var(--paper);font-size:12px;padding:8px 10px;border-radius:20px;text-decoration:none;min-height:40px;display:flex;align-items:center}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pgrid button{padding:0;border:3px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;display:block;width:100%}
.pgrid button.cur{border-color:var(--signal)}
.pgrid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}

/* v0.9 inloggen */
.codein{font-family:'IBM Plex Mono',monospace;font-size:28px;letter-spacing:.3em;text-align:center}
.linkbtn{background:none;border:0;color:var(--navy);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;padding:6px 0;width:100%}
.helpbtn{display:block;text-align:center;margin-top:6px;padding:12px;border:1px dashed var(--line);border-radius:10px;color:var(--navy);text-decoration:none;font-weight:600;font-size:14px}
.badge{display:inline-flex;min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;align-items:center;justify-content:center;padding:0 6px}
.row.help .rr{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.authbox form{display:flex;flex-direction:column;gap:12px}
.ver{background:#fff;border-radius:10px;padding:12px 14px}
.ver .vh{display:flex;justify-content:space-between;align-items:baseline}
.ver ul{margin:6px 0 0;padding-left:18px;font-size:14px}
.ver li{margin:3px 0}
.pw a{text-decoration:none}

/* v0.10 vloot */
.seg{display:flex;background:#fff;border-radius:10px;padding:4px;gap:4px;margin:8px 0 12px}
.seg a{flex:1;text-align:center;padding:8px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;color:var(--mut)}
.seg a[aria-current]{background:var(--navy);color:var(--paper)}
.row.fleet{grid-template-columns:56px minmax(0,1fr) auto;align-items:center}
.fthumb{width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--navy);display:flex;align-items:center;justify-content:center}
.fthumb img{width:100%;height:100%;object-fit:cover}
.fleet .rt .dot{width:10px;height:10px;vertical-align:middle}
.fcnt{display:flex;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:13px;margin-top:2px}

/* v0.11 controlepaneel */
.console{--bg:#071730;--tile:#0F2A4F;--ln:#1E3D66;--txt:#E8EEF7;--mut3:#8FA3C0;--r:#F04438;--a:#F5B800;--g:#32D583;background:var(--bg);color:var(--txt);padding-bottom:14px}
.console .top.solid{position:relative;background:var(--bg)}
.console .top.solid .pill{background:var(--tile)}
.chead{display:flex;align-items:center;gap:12px;padding:6px 16px 12px}
.cthumb{width:58px;height:58px;border-radius:10px;overflow:hidden;background:var(--tile);border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cthumb img{width:100%;height:100%;object-fit:cover}
.cname{min-width:0;flex:1}
.console .ship{font-size:30px}
.console .meta{color:var(--mut3);margin-top:2px}
.cstate{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border-radius:20px;border:1px solid}
.cstate.s-red{color:var(--r);border-color:var(--r);animation:pulse2 2s infinite}.cstate.s-amber{color:var(--a);border-color:var(--a)}.cstate.s-green{color:var(--g);border-color:var(--g)}
@keyframes pulse2{50%{background:rgba(240,68,56,.15)}}
.kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:6px;padding:0 12px}
.kpi{background:var(--tile);border:1px solid var(--ln);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;text-decoration:none;color:var(--txt);min-width:0}
.kpi span{font-size:11px;color:var(--mut3);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-size:22px;line-height:1.1}
.kpi b small{font-size:12px;color:var(--mut3)}
.kpi em{font-style:normal;font-size:11px;color:var(--mut3)}
.k-red{border-top:3px solid var(--r)}.k-red b{color:var(--r)}
.k-amber{border-top:3px solid var(--a)}.k-amber b{color:var(--a)}
.k-green{border-top:3px solid var(--g)}.k-green b{color:var(--g)}
.sysgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px 12px 0}
.tile{position:relative;background:var(--tile);border:1px solid var(--ln);border-radius:10px;padding:10px 12px 10px 16px;text-decoration:none;color:var(--txt);display:flex;flex-direction:column;gap:2px;min-height:60px;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--g)}
.tile.s-red::before{background:var(--r)}.tile.s-amber::before{background:var(--a)}.tile.s-none::before{background:var(--ln)}
.tile .tn{font-size:12px;color:var(--mut3);text-transform:uppercase;letter-spacing:.05em}
.tile b{font-size:16px}
.tile.s-red b{color:var(--r)}
.ctable{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.cr{display:grid;grid-template-columns:5px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 0;border-top:1px solid var(--line2);text-decoration:none;color:inherit;min-height:50px}
.ctable>.cr:first-child{border-top:0}
.cr .bar-s{align-self:stretch;background:var(--line)}
.bar-s.s-red{background:var(--red)}.bar-s.s-amber{background:var(--amber)}.bar-s.s-green{background:var(--green)}
.cr .ct{font-weight:600;font-size:14px;display:flex;flex-direction:column;min-width:0}
.cr .ct small{font-weight:400;font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr b{font-size:13px;white-space:nowrap}
.ctable details.more summary{padding:10px 14px;font-size:13px;color:var(--mut);cursor:pointer;border-top:1px solid var(--line2)}
@media (min-width:760px){.sysgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi b{white-space:nowrap;font-size:20px}
.cmon{padding:0 12px}
.console h2{color:var(--txt);font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin:16px 2px 8px;font-stretch:100%}
.console .live{gap:6px}
.console .lv{background:var(--tile);border:1px solid var(--ln);border-left:4px solid var(--g);color:var(--txt)}
.console .lv span{color:var(--mut3)}
.console .lv.bad{border-left-color:var(--r)}.console .lv.bad b{color:var(--r)}
.console .lv.dev{border-left-color:var(--ln)}
.console .cam{border:1px solid var(--ln)}
.console .visit .btn.ghost{color:var(--txt);border-color:var(--ln)}
.console .visit .sub{color:var(--a)}
.console .alarms{margin-top:10px}

/* v0.11 stuurhut: alarmtableau + journaal */
.bridge{--panel:#24282C;--bezel:#15181B;--off:#33383E;--ink:#E9ECEE;--dim:#9AA3AB;--amb:#FFB21A;--red:#E5322D;--grn:#45B26B;background:var(--panel);color:var(--ink);padding-bottom:16px;background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.08))}
.bridge .top.solid{position:relative;background:transparent}
.bridge .top.solid .pill{background:var(--bezel)}
.vhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:4px 16px 14px}
.vthumb{width:52px;height:52px;border-radius:4px;overflow:hidden;background:var(--bezel);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--bezel)}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vname{font-family:'Archivo',sans-serif;font-stretch:75%;font-weight:800;font-size:32px;line-height:1;margin:0;letter-spacing:-.01em}
.vmeta{margin:4px 0 0;font-size:13px;color:var(--dim)}
/* urenteller: zoals de mechanische teller op het instrumentenpaneel */
.hmeter{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.drums{display:flex;gap:1px;background:var(--bezel);padding:3px;border-radius:3px}
.drums i{font-style:normal;font-family:'Archivo',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:17px;width:14px;text-align:center;background:linear-gradient(#fff,#e4e6e8 50%,#fff);color:#111;border-radius:1px;line-height:22px}
.drums i:last-child{background:linear-gradient(#fff,#f3d9d8 50%,#fff);color:#9b1c18}
.hmeter small{font-size:11px;color:var(--dim)}
/* tableau */
.tableau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 12px;padding:4px;background:var(--bezel);border-radius:6px}
.lamp{position:relative;aspect-ratio:5/4;background:var(--off);border-radius:2px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;text-decoration:none;color:#C5CBD1;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.25)}
.lname{font-family:'Archivo',sans-serif;font-stretch:85%;font-weight:600;font-size:13px;line-height:1.15;overflow-wrap:anywhere}
.led{position:absolute;top:6px;left:6px;width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 4px var(--grn)}
.lamp.lit-amber{background:radial-gradient(circle at 50% 45%,#FFE08A,var(--amb) 70%);color:#3A2600;box-shadow:0 0 14px rgba(255,178,26,.35),inset 0 0 0 1px rgba(255,255,255,.4)}
.lamp.lit-red{background:radial-gradient(circle at 50% 45%,#FF8A80,var(--red) 70%);color:#fff;box-shadow:0 0 16px rgba(229,50,45,.45),inset 0 0 0 1px rgba(255,255,255,.3);animation:blink 1.6s steps(1) infinite}
.lamp[class*=lit-] .led{display:none}
.lcnt{position:absolute;bottom:4px;right:6px;font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
@keyframes blink{50%{filter:brightness(.75)}}
@media (prefers-reduced-motion:reduce){.lamp.lit-red{animation:none}}
.lamp:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* monitoring binnen het paneel: instrumentregels i.p.v. kaarten */
.bridge .cmon{padding:0 12px}
.bridge h2{font-family:'Archivo',sans-serif;font-stretch:85%;font-size:15px;color:var(--dim);font-weight:600;margin:16px 2px 6px}
.bridge .live{display:block;background:var(--bezel);border-radius:6px;padding:2px 12px}
.bridge .lv{background:none;border:0;border-bottom:1px solid #2B3035;border-radius:0;padding:8px 0;flex-direction:row;justify-content:space-between;align-items:baseline;color:var(--ink)}
.bridge .lv:last-child{border-bottom:0}
.bridge .lv span{color:var(--dim);font-size:13px}
.bridge .lv b{font-family:'Archivo',sans-serif;font-variant-numeric:tabular-nums;font-size:16px}
.bridge .lv.bad b{color:#FF6B63}
.bridge .lv.dev b{font-size:12px;color:var(--dim)}
.bridge .cam{border-radius:4px;margin-top:8px}
.bridge .visit .btn.ghost{color:var(--ink);border-color:#3B4148;background:transparent}
.bridge .visit .sub{color:var(--amb)}
.bridge .alarm{border-radius:4px;animation:none}
/* journaal */
.jh{font-family:'Archivo',sans-serif;font-stretch:85%;margin:20px 0 6px}
.journal{border-top:2px solid var(--navy)}
.jr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 2px 10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative}
.jr::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--line)}
.jr.j-red::before{background:var(--red)}.jr.j-amber::before{background:var(--amber)}.jr.j-green::before{background:var(--green)}
.jt{display:flex;flex-direction:column;font-weight:600;font-size:15px;min-width:0}
.jt small{font-weight:400;font-size:13px;color:var(--mut)}
.jv{font-family:'Archivo',sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;white-space:nowrap}
.jr.j-red .jv{color:var(--red)}.jr.j-amber .jv{color:var(--amber-t)}.jr.j-green .jv{color:var(--green-t)}
.journal details.more summary{padding:10px 2px;font-size:14px;color:var(--mut);cursor:pointer}

/* ===== v0.11 iPhone-stijl (iOS / Woning-app) ===== */
:root{--ios-bg:#F2F2F7;--ios-card:#FFFFFF;--ios-sep:rgba(60,60,67,.18);--ios-sec:rgba(60,60,67,.6);--ios-tint:#0A1F3D;--ios-red:#FF3B30;--ios-orange:#FF9500;--ios-green:#34C759}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;background:var(--ios-bg);letter-spacing:-.01em}
.h1{font-family:inherit;font-stretch:100%;text-transform:none;font-weight:700;font-size:34px;letter-spacing:.01em;margin:8px 4px 10px}
h2{font-family:inherit;font-stretch:100%;font-size:13px;font-weight:400;color:var(--ios-sec);text-transform:uppercase;letter-spacing:.02em;margin:22px 16px 6px}
.mono{font-family:inherit;font-variant-numeric:tabular-nums}
/* gegroepeerde lijsten zoals Instellingen */
.list{gap:0;background:var(--ios-card);border-radius:12px;overflow:hidden}
.row{border-radius:0;background:transparent;border-bottom:.5px solid var(--ios-sep);min-height:48px;padding:10px 16px}
.list>.row:last-child,.list>*:last-child .row{border-bottom:0}
.rt{font-weight:400;font-size:17px}
.sub{font-size:13px;color:var(--ios-sec)}
.rr{font-weight:400;font-size:15px;color:var(--ios-sec)}
.c-red{color:var(--ios-red)}.c-amber{color:var(--ios-orange)}.c-green{color:var(--ios-green)}
.d-red{background:var(--ios-red)}.d-amber{background:var(--ios-orange)}.d-green{background:var(--ios-green)}
details.add{border-radius:12px}
details.add summary{color:var(--ios-tint);font-weight:400;font-size:17px}
.btn{border-radius:12px;font-weight:600;font-size:17px;min-height:50px;background:var(--ios-tint)}
.btn.ghost{background:var(--ios-card);border:0;color:var(--ios-tint)}
input,select,textarea{border-radius:10px;border-color:var(--ios-sep);font-size:17px}
/* navigatiebalk */
.top.solid{background:rgba(242,242,247,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--ios-sep)}
.top.solid .pill{background:transparent;color:var(--ios-tint);font-size:17px;padding:6px 4px}
.top.solid .pill svg{color:var(--ios-tint)!important}
.top.solid select.pill{font-weight:600}
/* tabbalk */
.tabbar{background:rgba(249,249,249,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--ios-sep);font-size:10px;padding-top:6px}
.tabbar a{color:#999;gap:2px}
.tabbar a[aria-current]{color:var(--ios-tint);font-weight:500}
.pw{font-family:inherit}
.pw b{font-family:'Archivo',sans-serif}
/* tabbladen op componentpagina als segmented control */
.tabs{background:var(--ios-bg);border-bottom:0;padding:10px 16px}
.tabs a{border-radius:8px;font-weight:500}
.tabs a[aria-current]{background:var(--ios-card);color:#000;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---- overzicht: scheepsfoto als achtergrond ---- */
.wall{position:fixed;inset:0;z-index:-1;background:linear-gradient(160deg,#1F3B5C,#0A1F3D)}
.wall img{width:100%;height:100%;object-fit:cover;filter:blur(24px) saturate(1.2) brightness(.62);transform:scale(1.15)}
body:has(.wall){background:#0A1F3D}
.home-ios{color:#fff;padding-bottom:10px}
.home-ios .top.solid{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;position:relative}
.home-ios .top.solid .pill,.home-ios .top.solid .pill svg{color:#fff!important}
.lt{padding:2px 16px 10px}
.lt h1{margin:0;font-size:34px;font-weight:700;letter-spacing:.01em}
.lt p{margin:2px 0 0;font-size:15px;color:rgba(255,255,255,.75)}
.lt p a{color:#fff;font-weight:600;text-decoration:none;margin-left:6px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;text-decoration:none;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.chip i{width:8px;height:8px;border-radius:50%}
.chip.c-red i{background:var(--ios-red)}.chip.c-amber i{background:var(--ios-orange)}.chip.c-green i{background:var(--ios-green)}
.chip.c-red{color:#fff}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px}
.tile{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#fff;text-decoration:none;border:0;position:static}
.tile::before{display:none}
.tile .ti{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tile .tt{display:flex;flex-direction:column;min-width:0}
.tile .tt b{font-size:15px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.tile .tt small{font-size:13px;color:rgba(255,255,255,.75)}
.tile.on{background:rgba(255,255,255,.94);color:#000}
.tile.on .tt small{font-weight:500}
.tile.on.s-amber .ti{background:var(--ios-orange);color:#fff}.tile.on.s-amber small{color:#C76A00}
.tile.on.s-red .ti{background:var(--ios-red);color:#fff}.tile.on.s-red small{color:var(--ios-red)}
.tile:active{transform:scale(.97)}
.home-ios .sh{color:rgba(255,255,255,.7);margin:24px 16px 6px}
.glist{margin:0 16px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.94);color:#000}
.gi{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:.5px solid var(--ios-sep);text-decoration:none;color:inherit;min-height:52px}
.glist>.gi:last-child{border-bottom:0}
.gd{width:10px;height:10px;border-radius:50%;background:#C7C7CC}
.gd.s-red{background:var(--ios-red)}.gd.s-amber{background:var(--ios-orange)}.gd.s-green{background:var(--ios-green)}
.gt{display:flex;flex-direction:column;font-size:16px;min-width:0}
.gt small{font-size:13px;color:var(--ios-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ios-sec)}
.gv.s-red{color:var(--ios-red);font-weight:600}.gv.s-amber{color:#C76A00}
.chev{color:#C7C7CC}
.glist details.more summary{padding:12px 14px;color:var(--ios-tint);font-size:16px;cursor:pointer}
/* monitoring op de achtergrond */
.home-ios .cmon{padding:0 16px}
.home-ios .cmon h2{color:rgba(255,255,255,.7);margin:24px 0 6px}
.home-ios .live{display:block;border-radius:12px;background:rgba(255,255,255,.94);color:#000;padding:0 14px;gap:0}
.home-ios .lv{background:none;border:0;border-bottom:.5px solid var(--ios-sep);border-radius:0;padding:11px 0;flex-direction:row;justify-content:space-between;align-items:center}
.home-ios .lv:last-child{border-bottom:0}
.home-ios .lv span{font-size:16px;color:#000}
.home-ios .lv b{font-size:16px;font-weight:400;color:var(--ios-sec);font-variant-numeric:tabular-nums}
.home-ios .lv.bad b{color:var(--ios-red);font-weight:600}
.home-ios .cam{border-radius:16px;margin-top:10px}
.home-ios .visit .btn.ghost{background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.home-ios .visit .sub{color:#fff}
.home-ios .alarm{border-radius:12px;animation:none;background:var(--ios-red)}
.home-ios+main .links{margin-top:18px}
.home-ios~main .btn.ghost{background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.home-ios~main>h2,.home-ios~main .lh h2{color:rgba(255,255,255,.7)}
.home-ios~main .lh .sub{color:rgba(255,255,255,.6)}
.home-ios~main details.add{background:rgba(255,255,255,.94)}
.home-ios~.pw,.home-ios~main~.pw{color:rgba(255,255,255,.6)}
@media (prefers-reduced-transparency:reduce){.tile,.chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(40,60,90,.9)}}
.tile{flex-direction:row;text-align:left;justify-content:flex-start}
.top.solid .pill.brand .bn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top.solid .tr{gap:14px}
.top.solid select.pill{max-width:160px}
.home-ios .tile.on .tt b{color:#000}
/* merkkleur: La Capitana ultramarijn, Power Maritima een stap donkerder */
.wall{background:linear-gradient(165deg,color-mix(in srgb,var(--brand,#1E3A9E) 85%,#fff 15%),var(--brand,#1E3A9E) 45%,color-mix(in srgb,var(--brand,#1E3A9E) 60%,#000 40%))}
.wall img{filter:blur(26px) grayscale(1) contrast(1.1) brightness(.9);mix-blend-mode:soft-light;opacity:.85}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--brand,#1E3A9E) 55%,#000 45%))}
body:has(.wall){background:var(--brand,#1E3A9E)}
.btn{background:var(--brand,#1E3A9E)}
.tabbar a[aria-current]{color:var(--brand,#1E3A9E)}
/* onderste helft overzicht in iOS-stijl */
.gi.gm{grid-template-columns:minmax(0,1fr) auto auto}
.home-ios~main .lh{padding:0 2px}
.home-ios~main .car{margin:0 -18px;padding:0 18px 8px}
.card{border-radius:16px;background:rgba(255,255,255,.94)}
.ch{background:transparent;color:var(--ios-sec);font-family:inherit;font-variant-numeric:tabular-nums;border-bottom:.5px solid var(--ios-sep);padding:10px 14px 8px}
.ch.alert{background:transparent;color:var(--ios-red);font-weight:600}
.kind{color:var(--ios-sec);font-weight:500}
.chipdoc{border-radius:10px;border:.5px solid var(--ios-sep);color:var(--brand,#1E3A9E)}
.home-ios~main .adds{margin-top:18px}
.home-ios~main details.add summary{color:var(--brand,#1E3A9E)}
.badge{background:var(--ios-red)}
.home-ios~main .glist{margin:0}
.home-ios~main .sh{margin-left:16px}
.home-ios~main~.pw,.home-ios~.pw{color:rgba(255,255,255,.65)}
body:has(.wall) .pw svg{color:rgba(255,255,255,.75)!important}
body:has(.wall) .pw b,body:has(.wall) .pw a{color:rgba(255,255,255,.75)}
.home-ios~main .adds{gap:0;background:rgba(255,255,255,.94);border-radius:12px;overflow:hidden}
.home-ios~main .adds details.add{border-radius:0;border-bottom:.5px solid var(--ios-sep);background:transparent}
.home-ios~main .adds details.add:last-child{border-bottom:0}
/* v0.12 bestelknop en aanvragen */
.row:has(+details.ord){border-bottom:0}
details.ord{border-bottom:.5px solid var(--ios-sep);padding:0 16px 10px 40px}
details.ord summary{display:inline-flex;align-items:center;min-height:40px;padding:4px 16px;border-radius:20px;background:color-mix(in srgb,var(--brand,#1E3A9E) 10%,#fff);color:var(--brand,#1E3A9E);font-size:15px;font-weight:500;cursor:pointer;list-style:none}
details.ord summary::-webkit-details-marker{display:none}
details.ord[open] summary{background:var(--brand,#1E3A9E);color:#fff}
details.ord form{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.task form.inl{display:block;padding:0 16px 10px 40px}
.task form.inl .btn.sm{min-height:40px;padding:6px 16px;font-size:15px}
.row.mod-off .rt{color:var(--ios-sec)}
/* v0.12 merkkleur overal: alle vlakken volgen het schip (La Capitana #1E3A9E, Power Maritima #162C78). Tekst blijft neutraal donker. */
.hero,.band,.back,.pc,.pkgcur,.tokbox,.heroedit label,.fthumb,.cam span,.flash,.qty button,.tabs a[aria-current],.seg a[aria-current],.tag.on,.bar i{background:var(--brand,#1E3A9E)}
.tag.on{border-color:var(--brand,#1E3A9E)}
.tokbox code{background:color-mix(in srgb,var(--brand,#1E3A9E) 78%,#fff)}
.btn.ghost{color:var(--brand,#1E3A9E)}
.pkgtabs a[aria-current]{border-color:var(--brand,#1E3A9E)}
.row.pick input{accent-color:var(--brand,#1E3A9E)}
.mrep tr.tot td{border-top-color:var(--brand,#1E3A9E)}
/* v0.12 scheepsfoto zichtbaar bovenaan, loopt over in de merkkleur (tekst blijft leesbaar) */
.wall{background:var(--brand,#1E3A9E)}
.wall img{position:absolute;top:0;left:0;width:100%;height:62vh;object-fit:cover;filter:none;mix-blend-mode:normal;opacity:1;transform:none}
.wall::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.08) 18%,transparent 32%,color-mix(in srgb,var(--brand,#1E3A9E) 70%,transparent) 48%,var(--brand,#1E3A9E) 62%,color-mix(in srgb,var(--brand,#1E3A9E) 70%,#000) 100%)}
/* v0.13 taalkeuze in de kopbalk */
select.pill.lang{width:auto;min-height:34px;padding:4px 8px;border:0;-webkit-appearance:none;appearance:none;cursor:pointer}
/* v0.14 controle in de app */
.btn.wide{width:100%;margin-top:12px}
.citem{background:#fff;border-radius:12px;padding:14px;margin:10px 0;border-left:0;box-shadow:inset 4px 0 0 #C7C7CC}
.citem.r-ok{box-shadow:inset 4px 0 0 var(--ios-green)}.citem.r-attention{box-shadow:inset 4px 0 0 var(--ios-orange)}.citem.r-problem{box-shadow:inset 4px 0 0 var(--ios-red)}
.ch2{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.ch2 b{font-size:17px;font-weight:600}.ch2 small{font-size:13px;color:var(--ios-sec)}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.rb{min-height:44px;border-radius:10px;border:1px solid var(--ios-sep);background:#F2F2F7;font:inherit;font-size:15px;font-weight:600;color:#3C3C43;cursor:pointer}
.rb-ok[aria-pressed=true]{background:var(--ios-green);border-color:var(--ios-green);color:#fff}
.rb-attention[aria-pressed=true]{background:var(--ios-orange);border-color:var(--ios-orange);color:#fff}
.rb-problem[aria-pressed=true]{background:var(--ios-red);border-color:var(--ios-red);color:#fff}
.citem label.sub{display:flex;flex-direction:column;gap:4px}
.crow{display:flex;align-items:center;gap:10px;margin-top:10px}
.cmbtn{min-height:44px}
.cmed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.cmed img,.cmed video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#000;display:block}
.task .cmed{padding:0 16px 12px 40px}
.crep{margin-top:10px}
/* v0.15 wijzigen duidelijk zichtbaar */
.task details.tedit summary{font-size:15px;color:var(--brand,#1E3A9E);font-weight:500;padding:11px 16px}
.elog{display:flex;flex-direction:column;gap:6px;padding:0 14px 14px}
/* v0.16 agenda */
.tripf:not(.is-trip) .tonly{display:none}
.chks.col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tripf fieldset{border:0;padding:0;margin:0}.tripf legend{font-weight:600;margin-bottom:8px;padding:0}
.tbtn{padding:0 16px 12px 40px;display:flex;gap:8px}
.g2>label,.g3>label{min-width:0}.g2 input,.g3 input{min-width:0;max-width:100%}
/* v0.17 pakket schuift mee */
.ptier{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:#fff;border:2px solid transparent;min-width:0}
.ptier b{font-size:15px}.ptier span{font-size:13px;font-family:'IBM Plex Mono',monospace}.ptier small{font-size:12px;color:var(--ios-sec)}
.ptier.on{border-color:var(--brand,#1E3A9E)}
#priceLine{margin-top:6px}
/* v0.22 vertaalde vrije tekst: origineel uitklapbaar */
details.orig{display:inline;font-size:.85em;opacity:.75}
details.orig summary{display:inline;cursor:pointer;list-style:none;text-decoration:underline dotted}
details.orig summary::-webkit-details-marker{display:none}
details.orig[open]{display:block;margin-top:2px}
/* v0.22/0.24 levensduurbalk: kleuren lopen vloeiend over van groen via geel naar rood; knop = waar u nu staat */
.lb,.lbig{--g:linear-gradient(90deg,#0E9F4A 0,#0E9F4A calc(var(--m) - 22%),#F2A900 var(--m),#E8150C calc(var(--m) + (100% - var(--m)) * .55),#E8150C 100%);display:block;position:relative;border-radius:3px;background:var(--g)}
.lb::after,.lbig::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);right:0;background:rgba(255,255,255,.3);border-radius:0 3px 3px 0}
.lb i,.lbig i{position:absolute;top:50%;left:var(--p);width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:var(--k,#0E9F4A);box-shadow:0 0 0 2px #fff,0 1px 4px rgba(10,31,61,.35);z-index:1}
.lb.over::after,.lbig.over::after{display:none}
.gi{position:relative}
.gi:has(.lb){padding-bottom:17px}
.gi .lb{position:absolute;left:38px;right:20px;bottom:7px;height:5px}
.lbig{height:10px;margin:8px 22px 14px;border-radius:5px}
.lbig::after{border-radius:0 5px 5px 0}
.lbig i{width:20px;height:20px;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(10,31,61,.35)}
/* v0.27 opslag */
.gd.s-blue{background:var(--blue)}.gd.s-none{background:var(--mut2)}
.stit{display:flex;flex-direction:column;gap:6px}.stit .g3{grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1.6fr)}
/* v0.28 voorraad: op/bijna op valt op, genoeg = rustig */
.row.inv-green{opacity:.55}
.row.inv-green + details.ord summary{background:transparent;color:var(--mut);min-height:30px;padding:2px 8px;font-size:.85em}
details.ord.t-green{opacity:.55}
details.ord.t-red summary{background:#E8150C;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(232,21,12,.3)}
details.ord.t-amber summary{background:#F2A900;color:#0A1F3D;font-weight:700;box-shadow:0 2px 8px rgba(242,169,0,.3)}
details.ord.t-red summary::before,details.ord.t-amber summary::before{content:"＋";margin-right:6px}
form.qty .ql{display:flex;flex-direction:column;font-size:11px;color:var(--mut);gap:2px;margin:0}
form.qty .ql input{width:56px}
form.qty .ql.need input{border-color:#F2A900;background:#FFF8E5}
p.hint{margin:6px 2px 10px;font-size:14px}p.hint a{color:#A15C00}
form.lvl{margin:4px 0 14px}.lvlh{font-weight:600;margin:0 2px 6px}
.seg3.lvsel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.seg3.lvsel label{display:block;margin:0;cursor:pointer}.seg3.lvsel input{position:absolute;opacity:0;pointer-events:none}
.seg3.lvsel span{display:flex;flex-direction:column;gap:2px;padding:10px 10px;border-radius:12px;background:#fff;border:1.5px solid var(--line2);min-height:64px}
.seg3.lvsel b{font-size:15px}.seg3.lvsel small{font-size:11.5px;color:var(--mut);line-height:1.25}
.seg3.lvsel input:checked+span{border-color:var(--brand,#1E3A9E);background:color-mix(in srgb,var(--brand,#1E3A9E) 8%,#fff)}
.seg3.lvsel input:checked+span b{color:var(--brand,#1E3A9E)}
form.lvl{border:0;padding:0;background:none;box-shadow:none}
form.qty .ql input{width:46px;padding-left:6px;padding-right:6px}
form.qty button{padding-left:10px;padding-right:10px}
.row .rt{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}