/* Kaiso app, v2.7 refresh. Brand: navy #00132f, teal #0293b4, aqua #51cae3. Type: Instrument Sans (text), Bricolage Grotesque (page titles). */
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
  --font:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Bricolage Grotesque",var(--font);
  --ink:#0f1f35;--ink2:#34465c;--muted:#5a6a7d;--faint:#8492a3;--line:#e3e8ee;--line2:#d2dae4;
  --bg:#f2f4f7;--card:#fff;--brand:#00132f;--brand2:#0a2246;--accent:#0293b4;--accent2:#026f88;--aqua:#51cae3;--mint:#00b6a6;--wash:#e7f5f9;
  --ok:#0b7a52;--okbg:#e5f5ee;--warn:#8f5600;--warnbg:#fff3df;--err:#b42318;--errbg:#fdeceb;--info:#075f7a;--infobg:#e5f4f9;
  --r:14px;--r-sm:9px;--shadow-hover:0 10px 28px -12px rgba(0,19,47,.22);
  --side:252px;--top:58px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;font:15px/1.55 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--accent2);text-underline-offset:2px}
h1{font:700 1.75rem/1.15 var(--display);letter-spacing:-.02em;margin:.1rem 0 .9rem;color:var(--brand)}
h2{font-size:1.02rem;line-height:1.3;margin:.1rem 0 .8rem;font-weight:700;color:var(--brand)}
h3{font-size:.95rem;margin:.1rem 0 .5rem;color:var(--brand)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}
kbd{font:700 .72rem/1 var(--font);color:var(--faint);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:.2rem .35rem;background:#fff}

/* ---------- app shell ---------- */
.shell{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:var(--side);flex:none;background:var(--brand);color:#c3d1e3;display:flex;flex-direction:column;padding:1rem .75rem .8rem;overflow-y:auto;z-index:30;scrollbar-width:thin;scrollbar-color:#24406a transparent}
.sidetop{padding:.15rem .45rem 1rem}
.sidebrand img{height:38px;width:auto;display:block}
.switcher{margin:0 0 .7rem}
.switcher select{width:100%;margin:0;background:#0a2246;color:#fff;border:1px solid #1d3a66;border-radius:var(--r-sm);padding:.55rem .6rem;font-weight:700}
.switcher select option{color:var(--ink);background:#fff}
.companyname{color:#fff;font-weight:700;padding:.55rem .65rem;margin-bottom:.7rem;background:#0a2246;border-radius:var(--r-sm);border:1px solid #1d3a66;line-height:1.3}
.companyname small{display:block;font-weight:400;color:var(--aqua);font-size:.78rem}
.sidenav{display:flex;flex-direction:column;gap:2px;flex:1}
.navlink{display:flex;align-items:center;gap:.65rem;color:#c3d1e3;text-decoration:none;padding:.44rem .6rem;border-radius:var(--r-sm);font-size:.92rem}
.navlink .ic{width:17px;height:17px;opacity:.8}
.navlink:hover{background:#0a2246;color:#fff}
.navlink.on{background:#0d2a54;color:#fff;box-shadow:inset 3px 0 0 var(--aqua);font-weight:700}
.navlink.on .ic{color:var(--aqua);opacity:1}
.navsec{margin-top:.35rem}
.navsec>summary{list-style:none;display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:var(--r-sm);cursor:pointer;color:#e6eef8;font-weight:700;font-size:.92rem;user-select:none}
.navsec>summary::-webkit-details-marker{display:none}
.navsec>summary:hover{background:#0a2246}
.navdot{width:24px;height:24px;border-radius:7px;background:var(--c);display:grid;place-items:center;color:#fff;flex:none}
.navdot .ic{width:14px;height:14px}
.navsec .chev{margin-left:auto;width:15px;height:15px;opacity:.55;transition:transform .15s}
.navsec[open]>summary .chev{transform:rotate(90deg)}
.navlinks{display:flex;flex-direction:column;gap:1px;padding:.15rem 0 .35rem .55rem;margin-left:.75rem;border-left:1px solid #1b365f}
.sideuser{display:flex;align-items:center;gap:.4rem;border-top:1px solid #1b365f;padding-top:.75rem;margin-top:1rem}
.userchip{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;text-decoration:none;color:#fff;padding:.35rem .4rem;border-radius:var(--r-sm)}
.userchip:hover,.userchip.on{background:#0a2246}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.who{min-width:0}.who b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who small{color:#8ea3be;font-size:.76rem}
.iconbtn{background:none;border:0;color:inherit;cursor:pointer;padding:.45rem;border-radius:var(--r-sm);display:grid;place-items:center}
.side .iconbtn:hover{background:#0a2246;color:#fff}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:1rem;padding:0 2rem;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.topbar .menubtn,.topbar .mobilelogo{display:none}
.crumbs{display:flex;align-items:center;gap:.4rem;min-width:0;flex:1;font-size:.92rem;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);text-decoration:none;font-weight:700;white-space:nowrap}
.crumbs a:hover{color:var(--brand)}
.crumbdot{width:9px;height:9px;border-radius:3px;background:var(--c)}
.crumbs .sep{width:14px;height:14px;color:var(--faint)}
.crumbs [aria-current]{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topsearch{position:relative;display:flex;align-items:center;width:min(340px,34vw)}
.topsearch .ic{position:absolute;left:.7rem;width:16px;height:16px;color:var(--faint);pointer-events:none}
.topsearch input{margin:0;padding:.5rem 2.2rem .5rem 2.2rem;border-radius:99px;background:var(--bg);border-color:transparent}
.topsearch input:focus{background:#fff}
.topsearch kbd{position:absolute;right:.6rem}
.topsearch input:focus~kbd{display:none}
.dropdown{position:relative}
.dropdown>summary{list-style:none}.dropdown>summary::-webkit-details-marker{display:none}
.newmenu>summary.btn{padding:.5rem .85rem .5rem .7rem}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(0,19,47,.3);padding:.4rem;z-index:40}
.menu a{display:block;padding:.45rem .7rem;border-radius:7px;color:var(--ink);text-decoration:none}
.menu a:hover,.menu a:focus{background:var(--wash);color:var(--brand)}
.menugrp{font-size:.76rem;color:var(--faint);padding:.55rem .7rem .2rem;font-weight:700}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:1.7rem 2rem 1rem;flex:1}
.foot{color:var(--faint);font-size:.8rem;padding:1.5rem 2rem 2rem;text-align:center}.foot a{color:var(--faint)}
.banner{padding:.55rem 2rem;font-size:.88rem;border-bottom:1px solid transparent}
.banner.info{background:var(--infobg);color:var(--info);border-color:#c5e8f2}.banner.info a{color:inherit}
.banner.err{background:var(--errbg);color:var(--err);border-color:#f6cfcb}
.banner.support{background:#2b2100;color:#ffe7a3;display:flex;gap:1rem;align-items:center}

/* ---------- building blocks ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.4rem;margin-bottom:1.1rem}
.card.flush{padding:0;overflow:hidden}.card.narrow{max-width:540px}.pad{padding:1.1rem 1.4rem}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.4rem}
.cardhead h2{margin:0}.cardhead.pad{margin:0;border-bottom:1px solid var(--line)}
.cardhead a.small{font-weight:700;text-decoration:none}
.cardtitle{margin:0;border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:1.1rem}
.grid2>*,.grid3>*,.tiles>*{min-width:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.1rem}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem 1.1rem}
.span2{grid-column:span 2}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.pagehead h1{margin-bottom:.25rem}.pagehead p.muted{margin:0}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.actions.bar{margin:1.1rem 0}.grow{flex:1}
label{display:block;font-size:.86rem;color:var(--ink2);margin-bottom:.85rem}
label small{display:block;color:var(--muted);font-size:.79rem;margin-top:.2rem}
input,select,textarea{font:inherit;font-size:.95rem;width:100%;padding:.55rem .7rem;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fff;margin-top:.3rem;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:#b9c5d3}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(2,147,180,.18)}
input[type=checkbox],input[type=radio]{width:1.05rem;height:1.05rem;margin:0 .5rem 0 0;vertical-align:middle;accent-color:var(--accent)}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
fieldset{border:0;padding:0;margin:0}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{background:#f4f6f9;color:var(--muted)}
.chk{display:flex;align-items:center;font-size:.92rem}.checks{padding-top:1.2rem}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand);color:#fff;border:1px solid var(--brand);padding:.55rem 1rem;border-radius:var(--r-sm);font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2;transition:background .12s,border-color .12s}
.btn .ic{width:16px;height:16px}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:#fff;color:var(--brand);border-color:var(--line2)}.btn.ghost:hover,.btn.ghost.on{background:#f3f6f9;border-color:#b9c5d3}
.btn.ok{background:var(--accent);border-color:var(--accent)}.btn.ok:hover{background:var(--accent2)}
.btn.danger,.btn.ghost.danger{color:var(--err);border-color:#f2c9c4;background:#fff}.btn.danger:hover{background:var(--errbg)}
.btn.light{background:#fff;color:var(--brand);border-color:#fff}
.btn.sm{padding:.32rem .7rem;font-size:.84rem}.btn.wide{width:100%;justify-content:center;padding:.75rem}
.linkbtn{background:none;border:0;color:var(--accent2);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-underline-offset:2px}
.linkbtn.danger{color:var(--err)}
form.inline{display:inline}
.inlineform{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}.inlineform label{margin-bottom:0}.inlineform input,.inlineform select{width:auto}
.stack>*{margin-bottom:.6rem}
.filters{display:flex;gap:.5rem;margin-bottom:1rem;align-items:center;flex-wrap:wrap}.filters input,.filters select{margin:0}.filters input{max-width:340px}.filters select{width:auto}

.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:700;color:var(--muted);font-size:.79rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);background:#f8fafc;white-space:nowrap}
.tbl td{padding:.62rem .9rem;border-bottom:1px solid #edf1f5;vertical-align:top}
.tbl tbody tr:hover td,.tbl tr:hover td{background:#f9fbfd}
.tbl th.r{text-align:right}.tbl th.c{text-align:center}
.tbl tr:last-child td{border-bottom:0}.tbl tr.tot td{font-weight:700;background:#f8fafc;border-top:1px solid var(--line2)}
.tbl input{margin:0}.r{text-align:right}.nowrap{white-space:nowrap}.neg{color:var(--err)}
.tbl td a{font-weight:700;text-decoration:none}.tbl td a:hover{text-decoration:underline}
.numin{width:5.5rem!important;text-align:right;padding:.35rem .45rem}
.scrollx{overflow-x:auto}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.2rem}
.tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;min-height:104px}
.tile .k{font-size:.82rem;color:var(--muted)}
.tile .v{font-size:1.6rem;font-weight:700;color:var(--brand);font-variant-numeric:proportional-nums;letter-spacing:-.015em;margin-top:.2rem;line-height:1.15}
.tile .v.small{font-size:1rem;line-height:1.5}.tile .s{font-size:.8rem;color:var(--muted);margin-top:auto;padding-top:.3rem}
.tile .v small{font-size:.82rem;color:var(--muted);font-weight:400}
.tile .spark{width:100%;height:26px;margin-top:.45rem}
.tile .s.up{color:var(--ok)}.tile .s.down{color:var(--err)}
a.tile{color:inherit;text-decoration:none;transition:box-shadow .15s,border-color .15s}a.tile:hover{border-color:#bcd9e3;box-shadow:var(--shadow-hover)}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.75rem;font-weight:700;vertical-align:middle;line-height:1.5}
.pill.ok{background:var(--okbg);color:var(--ok)}.pill.warn{background:var(--warnbg);color:var(--warn)}.pill.err{background:var(--errbg);color:var(--err)}.pill.info{background:var(--infobg);color:var(--info)}.pill.muted{background:#eef2f6;color:var(--muted)}
.flash{padding:.75rem 1rem;border-radius:var(--r-sm);margin-bottom:1rem;border:1px solid}
.flash.ok{background:var(--okbg);color:var(--ok);border-color:#bfe6d8}.flash.err{background:var(--errbg);color:var(--err);border-color:#f6cfcb}.flash.warn{background:var(--warnbg);color:var(--warn);border-color:#f3d9a6}
.warnline{font-size:.78rem;color:var(--warn);margin-top:.15rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}
code.big{font-size:1.2rem;background:#fff;padding:.1rem .45rem;border-radius:6px;border:1px solid var(--line)}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem;flex-wrap:wrap}
.tabs a{padding:.6rem .9rem;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--brand)}.tabs a.on{color:var(--brand);border-color:var(--accent);font-weight:700}
.checklist{padding-left:1.2rem}.checklist li{margin:.4rem 0}.checklist li.done a{color:var(--ok);text-decoration:line-through}
.todo{list-style:none;margin:0;padding:0}
.todo li{display:grid;grid-template-columns:8px 1fr;column-gap:.75rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid #edf1f5}.todo li:last-child{border-bottom:0}
.todo li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.todo li>*{grid-column:2}
.todo li.warn::before{background:#e39b16}.todo li.late::before{background:var(--err)}
.todo small{color:var(--muted);display:block;font-size:.8rem}
.empty{display:flex;gap:.9rem;align-items:flex-start;padding:1.2rem 1.3rem;border:1px dashed var(--line2);border-radius:var(--r);background:#fafbfd;color:var(--muted);margin-bottom:1.1rem}
.empty .ic{width:22px;height:22px;color:var(--faint);margin-top:.15rem}.empty p{margin:0}.empty b{color:var(--ink)}
.hp{position:absolute;left:-9999px}
.dangerzone{margin-top:1rem}
.count{display:inline-block;min-width:1.5rem;text-align:center;font-size:.75rem;color:var(--muted);background:#eef2f6;border-radius:99px;padding:.05rem .45rem;margin-left:.3rem;vertical-align:2px}
.results{list-style:none;margin:0;padding:0}
.results a{display:flex;flex-direction:column;padding:.7rem 1.4rem;border-bottom:1px solid #edf1f5;text-decoration:none;color:var(--ink)}
.results li:last-child a{border-bottom:0}.results a:hover{background:var(--wash)}
.results b{color:var(--brand)}.results small{color:var(--muted)}
.searchbig input{font-size:1.05rem;padding:.7rem .9rem;min-width:min(520px,100%);flex:1}.searchbig .inlineform input{width:auto}

/* ---------- charts (palette checked for colour-blind separation; values also in each chart's table) ---------- */
.chartcard h2{margin-bottom:.15rem}.chartcard .sub{color:var(--muted);font-size:.85rem;margin:0 0 .6rem}
.chartbox{margin:0}.chartscroll{overflow-x:auto;overscroll-behavior-x:contain}
svg.chart{display:block;width:100%;height:auto;min-width:calc(var(--vw,720) * .75px);overflow:visible}
svg.chart text{font-family:var(--font)}
svg.chart .grid{stroke:#e8ecf1;stroke-width:1;shape-rendering:crispEdges}
svg.chart .grid.base{stroke:#bcc7d3}
svg.chart .tick{fill:#76849a;font-size:11.5px}
svg.chart .vlabel{fill:var(--ink);font-size:12px;font-weight:700}
svg.chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg.chart .area{opacity:.1}
svg.chart .dot,svg.chart .xdot{stroke:#fff;stroke-width:2}
svg.chart .xdot{opacity:0}
svg.chart .xh{stroke:#94a3b4;stroke-width:1;opacity:0;shape-rendering:crispEdges}
svg.chart .hit{fill:transparent;cursor:default;outline:none}
svg.chart .col:hover path,svg.chart .col:focus-within path{filter:brightness(1.12) saturate(1.05)}
svg.chart .col .hit:focus-visible,svg.chart .xcol .hit:focus-visible{fill:rgba(2,147,180,.06)}
svg.chart .xcol:hover .xh,svg.chart .xcol:focus-within .xh,svg.chart .xcol:hover .xdot,svg.chart .xcol:focus-within .xdot{opacity:1}
.clegend,.seglegend{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.84rem;color:var(--ink2)}
.key{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--c);margin-right:.4rem;vertical-align:-1px}
.key.line{height:3px;width:14px;border-radius:2px;vertical-align:3px}
.chartdata{margin-top:.4rem;font-size:.84rem}
.chartdata summary{cursor:pointer;color:var(--muted);display:inline-block;padding:.15rem 0}.chartdata summary:hover{color:var(--accent2)}
.chartdata table{margin-top:.4rem}
.hbars{display:flex;flex-direction:column;gap:.55rem}
.hbar{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;gap:.8rem;align-items:center;font-size:.88rem}
.hlab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}.hlab a{color:inherit;text-decoration:none}.hlab a:hover{color:var(--accent2);text-decoration:underline}
.htrack{height:12px;display:block}
.htrack i{display:block;height:12px;background:var(--c);border-radius:0 4px 4px 0;min-width:2px}
.hval{font-weight:700;white-space:nowrap}.hval small{font-weight:400;color:var(--muted);margin-left:.3rem}
.segbar{display:flex;gap:2px;height:30px;margin:.3rem 0 .8rem}
.segbar i{display:block;background:var(--c);min-width:3px;outline:none}
.segbar i:first-child{border-radius:6px 0 0 6px}.segbar i:last-child{border-radius:0 6px 6px 0}.segbar i:only-child{border-radius:6px}
.segbar i:hover,.segbar i:focus-visible{filter:brightness(1.12)}
.segbar i:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.seglegend{flex-direction:column;gap:.35rem;margin:0;max-width:560px}
.seglegend li{display:grid;grid-template-columns:auto 1fr auto 3.2rem;gap:.5rem;align-items:center}
.seglegend li .key{margin:0}.seglegend b{text-align:right}.seglegend small{color:var(--muted);text-align:right}
.seglegend.compact{flex-direction:row;gap:.2rem 1rem;font-size:.82rem}.seglegend.compact li{display:flex;gap:.35rem;align-items:center}.seglegend.compact small{display:none}
.occ{margin-bottom:1.1rem}.occ .segbar{height:22px;margin:.35rem 0 .45rem}
.occhead{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--muted)}.occhead a{font-weight:700;color:var(--brand);text-decoration:none}.occhead a:hover{text-decoration:underline}
svg.spark{display:block;overflow:visible}svg.spark path{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}svg.spark line{stroke:#d5dde6;stroke-width:1;vector-effect:non-scaling-stroke}
.ktip{position:fixed;z-index:100;display:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px -14px rgba(0,19,47,.35);padding:.5rem .7rem;font-size:.84rem;pointer-events:none;max-width:280px}
.ktt{color:var(--muted);font-size:.78rem;margin-bottom:.25rem}
.ktr{display:flex;align-items:center;gap:.5rem;line-height:1.5}
.ktr i{width:12px;height:3px;border-radius:2px;flex:none}.ktr i.none{background:transparent}
.ktr b{color:var(--ink)}.ktr span{color:var(--muted)}

/* ---------- Kaiso home ---------- */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;margin-bottom:1.4rem}
.app{position:relative;display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.3rem;text-decoration:none;color:var(--ink);transition:box-shadow .15s,border-color .15s;overflow:hidden}
.app::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c)}
a.app:hover{box-shadow:var(--shadow-hover);border-color:var(--line2)}
.app.off{background:#fafbfc}.app.off::before{background:var(--line2)}
.appicon{width:42px;height:42px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center}
.appicon .ic{width:22px;height:22px}
.app.off .appicon{background:#e5ebf1;color:var(--faint)}
.apptop{display:flex;align-items:center;gap:.75rem}
.appname{font-weight:700;font-size:1.05rem;color:var(--brand)}.appblurb{color:var(--muted);font-size:.88rem;flex:1}
.appfig{display:block;margin:.35rem 0 .1rem;padding-top:.75rem;border-top:1px solid #edf1f5}
.appfig .k{display:block;font-size:.8rem;color:var(--muted)}.appfig .v{display:block;font-size:1.3rem;font-weight:700;color:var(--brand);font-variant-numeric:proportional-nums;line-height:1.25;white-space:nowrap}
.appfig .spark{width:100%;height:28px;margin-top:.5rem}
.appstate{font-size:.84rem;font-weight:700;color:var(--accent2)}.app.off .appstate{color:var(--faint)}

/* ---------- signed-out pages ---------- */
.auth{display:grid;grid-template-columns:minmax(320px,44%) 1fr;min-height:100vh;background:#fff}
.authside{background:var(--brand);background-image:radial-gradient(120% 80% at 0% 100%,rgba(2,147,180,.35),transparent 60%);color:#d3dfee;padding:2.6rem 3rem;display:flex;flex-direction:column}
.authlogo{height:56px;width:auto}
.authcopy{margin:auto 0}
.authlead{font:700 2.1rem/1.15 var(--display);color:#fff;letter-spacing:-.02em;max-width:17ch;margin:0 0 1.6rem}
.authlist{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.authlist li{padding-left:1.6rem;position:relative}
.authlist li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;border-radius:3px;background:var(--aqua)}
.authfoot{font-size:.8rem;color:#7f93ad;margin:0}
.authmain{display:flex;flex-direction:column;justify-content:center;padding:2.5rem;max-width:560px;width:100%;margin:0 auto}
.authmain .card{border:0;padding:0}
.authmain h1{font-size:1.9rem}
.authbox{width:100%}
.kind{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
.kindopt{display:flex;gap:.5rem;align-items:flex-start;border:1px solid var(--line2);border-radius:var(--r-sm);padding:.8rem;cursor:pointer;margin:0}
.kindopt:has(input:checked){border-color:var(--accent);background:#effafd;box-shadow:0 0 0 3px rgba(2,147,180,.12)}
.kindopt strong{display:block;color:var(--brand)}.kindopt small{color:var(--muted)}
.brandbig{display:flex;justify-content:center;margin-bottom:1.2rem}.brandbig .logofull{height:72px;width:auto}

/* ---------- payroll timesheet ---------- */
.ts th.c,.ts td.c{text-align:center;padding:.35rem .15rem;min-width:56px}
.ts .we{background:#f6f8fb}.ts tr.grp td{background:#f1f6fb;font-weight:700;color:var(--brand);font-size:.82rem}
.dsel{width:100%;min-width:58px;padding:.25rem;font-size:.78rem;margin:0;border-radius:6px}
.code-N .dsel{background:#fff}.code-V .dsel{background:#e3f7f4}.code-H .dsel{background:#fff6dc}.code-S .dsel{background:#fdeee6}
.code-O .dsel,.code-D .dsel{background:#efeafd}.code-X .dsel{background:#eef1f4}
.chip{display:inline-block;min-width:4.2rem;padding:.2rem .4rem;border-radius:6px;font-size:.76rem;font-weight:700;line-height:1.3}
.chip.c-N{background:#e8eef6;color:var(--brand)}.chip.c-V{background:#e0f6f3;color:#00786d}.chip.c-H{background:#fff3d6;color:#8a6100}
.chip.c-S{background:#fdeee6;color:#b2501f}.chip.c-O,.chip.c-D{background:#efeafd;color:#5a3fb0}.chip.c-X{background:#eef1f4;color:var(--faint)}

@media (max-width:1100px){.grid3{grid-template-columns:1fr}.topsearch kbd{display:none}}
@media (max-width:980px){
  .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .topbar{padding:0 .8rem;gap:.6rem}
  .topbar .menubtn{display:grid}.topbar .mobilelogo{display:block}.topbar .mobilelogo img{display:block}
  .topsearch{width:auto;flex:1;max-width:340px}
  .crumbs{display:none}
  .newmenu>summary span{display:none}
  .wrap{padding:1.2rem 1rem}
  .banner{padding:.6rem 1rem}
  .auth{grid-template-columns:1fr}
  .authside{padding:1.4rem 1.5rem}.authcopy{display:none}.authfoot{display:none}
  .authmain{padding:1.6rem 1.2rem}
}
@media (max-width:720px){
  .grid2,.row2,.row3{grid-template-columns:1fr}.tile .spark{display:none}.span2{grid-column:auto}
  .inlineform input,.inlineform select{width:100%}.inlineform label{width:100%}
  .kind{grid-template-columns:1fr}
  h1{font-size:1.5rem}
  .tiles{grid-template-columns:1fr 1fr}.tile .v{font-size:1.3rem}
  .card>.tbl,.card.flush>.tbl{display:block;overflow-x:auto}
  .card{padding:1rem}.card.flush{padding:0}.pad{padding:1rem}
  .hbar{grid-template-columns:minmax(0,45%) 1fr;}.hbar .hval{grid-column:2;text-align:right;margin-top:-.4rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Kaiso Marina: yard and berth map */
.spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:.6rem}
.spot{display:flex;flex-direction:column;gap:.1rem;border-radius:10px;padding:.6rem .7rem;text-decoration:none;min-height:78px;border:1.5px solid var(--line);background:#fff;color:var(--ink,#13243b)}
.spot b{font-size:.78rem;letter-spacing:.02em}
.spot span{font-weight:650;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot small{font-size:.75rem;opacity:.8}
.spot.free{border-style:dashed;color:var(--muted)}
.spot.free span{font-weight:500}
.spot.taken{background:var(--brand);border-color:var(--brand);color:#fff}
.spot.taken.multi{background:#1f6fb2;border-color:#1f6fb2}
.spot.booked{background:#fff6e0;border-color:#e9b23a;color:#5c4300}
a.spot:hover{filter:brightness(1.08)}
.spotkey{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin:0 .2rem 0 .8rem;border:1.5px solid var(--line)}
.spotkey.taken{background:var(--brand);border-color:var(--brand)}.spotkey.booked{background:#fff6e0;border-color:#e9b23a}.spotkey.free{border-style:dashed}
a.tile{color:inherit;text-decoration:none}a.tile:hover{border-color:var(--accent)}
.tile .v small{font-size:.8rem;color:var(--muted);font-weight:500}

/* customer portal */
body.portal{background:var(--bg);margin:0}
.pwrap{max-width:860px;margin:0 auto;padding:1.5rem 1rem 3rem}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:var(--r);padding:1.3rem 1.4rem;margin-bottom:1rem}
.phead h1{color:#fff;margin:.2rem 0 0}.pco{color:var(--aqua);font-weight:650;font-size:.9rem}
.powed{text-align:right}.powed span{display:block;font-size:.8rem;color:#b9c9dc}.powed b{font-size:1.3rem}
.estimate{border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem;margin-bottom:.8rem}
.paybox{margin-top:1rem;background:#f0f9fb;border-left:4px solid var(--accent);border-radius:var(--r-sm);padding:.8rem 1rem}
.paybox p{margin:.3rem 0}
.pfoot{text-align:center;margin-top:1.5rem}
/* marina rate card */
h2.sect{font-size:1rem;margin:1.6rem 0 .6rem}
.ratecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:.9rem;align-items:start}
.ratecard{padding:.9rem 1rem;margin:0}.ratehead{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;margin-bottom:.5rem}
.ratecard .tbl{margin:0 -.2rem}.tbl.compact td,.tbl.compact th{padding:.32rem .5rem;font-size:.86rem}
.bigprice{font-size:1.25rem;font-weight:700;margin:.2rem 0 0}
p.warn,.small.warn{color:var(--warn)}tr.warnrow td{background:var(--warnbg)}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem 1.1rem}
.chkrow{display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:center;flex-basis:100%}
.numin.xs{width:3.2rem!important}
.ratetbl input{min-width:0}.ratetbl td{vertical-align:middle}
@media (max-width:760px){.row4{grid-template-columns:1fr 1fr}.ratecards{grid-template-columns:1fr}}
.ratecard.wide{grid-column:1/-1}.ratecard.wide .tbl{max-width:760px}
.tbl tr.grpstart td{border-top:2px solid var(--line2)}
.tbl.compact td.num,.tbl.compact th.num{text-align:right}
/* bookkeeping */
.txn{padding:.8rem 1rem;margin-bottom:.6rem}.txnhead{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.txnamt{font-weight:700;white-space:nowrap}.txnamt.in{color:var(--ok)}.txnamt.out{color:var(--ink,#0f172a)}
.sugs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}.txn details{margin-top:.3rem}.txn details form{margin:.5rem 0}
.lineedit td{padding:.25rem .3rem}.lineedit input.wide{min-width:14rem;width:100%}.lineedit select{max-width:14rem}
.totals{font-weight:600;margin-left:.6rem}.okc{color:var(--ok)}.warnc{color:var(--warn)}
.steps{margin:.2rem 0 .6rem 1.2rem}.steps li{margin:.25rem 0}
.rpt td.ind{padding-left:1.6rem}.rpt tr.sec td{font-weight:700;background:#f8fafc}.rpt tr.grand td{font-weight:800;border-top:2px solid var(--line2)}
.rpt td.num,.rpt th.num{text-align:right;white-space:nowrap}
.boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.6rem}.box{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.box .k{font-size:.8rem;color:var(--muted)}.box .v{font-size:1.15rem;font-weight:700}
@media print{.side,.topbar,.chartdata,.filters,.actions,.tabs,.banner,.foot{display:none!important}.mainwrap{margin:0!important}.card{box-shadow:none;border:0}}
/* ---------- Kaiso POS register ---------- */
.posbody{margin:0;height:100vh;display:flex;flex-direction:column;background:#eef2f6;overflow:hidden;-webkit-user-select:none;user-select:none}
.posbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.45rem .8rem;background:#00132f;color:#fff}
.posbrand{display:flex;align-items:center;gap:.55rem}.posbrand img{width:26px;height:26px}.posbrand .small{opacity:.75}
.posnav{display:flex;gap:.35rem;flex-wrap:wrap}
.pbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.4rem .9rem;border-radius:10px;border:1px solid #cfd8e3;background:#fff;color:#0f1d33;
  font:700 .95rem/1.1 var(--font);cursor:pointer;text-decoration:none;touch-action:manipulation}
.posbar .pbtn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;min-height:38px}.posbar .pbtn:hover{background:rgba(255,255,255,.2)}
.pbtn:active{transform:translateY(1px)}.pbtn.pay{background:#0293b4;border-color:#0293b4;color:#fff}.pbtn.danger{color:#b42318;border-color:#f2c4c0}
.pbtn.warn{background:#fff4e0;border-color:#f3c76b}.pbtn.on{background:#00132f;color:#fff;border-color:#00132f}.pbtn[disabled]{opacity:.5;cursor:default}
.posmain{flex:1;display:grid;grid-template-columns:1fr minmax(340px,32%);gap:.7rem;padding:.7rem;min-height:0}
.poscatalog{display:flex;flex-direction:column;min-height:0}
.posfind{display:flex;gap:.5rem;margin-bottom:.5rem}.posfind input{flex:1;font-size:1.05rem;padding:.65rem .8rem;border-radius:10px;border:1px solid #cfd8e3}
.poscats{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.4rem}
.poscats .chip{flex:none;border:1px solid #cfd8e3;background:#fff;border-radius:999px;padding:.45rem .9rem;font:700 .9rem/1.2 var(--font);cursor:pointer;min-height:38px;min-width:0;color:var(--ink)}.poscats .chip.on{background:#00132f;color:#fff;border-color:#00132f}
.positems{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.5rem;align-content:start;padding:.2rem .1rem}
.itembtn{min-height:86px;border-radius:12px;border:1px solid #d5dde8;background:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  padding:.6rem .65rem;text-align:left;cursor:pointer;font:inherit;touch-action:manipulation}
.itembtn:active{filter:brightness(.95)}.iname{font-weight:650;font-size:.95rem;line-height:1.2}.iprice{font-weight:700;color:#0f1d33}.istock{font-size:.72rem;color:#b42318}
.posorder{background:#fff;border-radius:14px;border:1px solid #d5dde8;display:flex;flex-direction:column;min-height:0}
.posorderhead{padding:.7rem .9rem;border-bottom:1px solid #e6ebf1}.ordtitle{font-weight:800;font-size:1.05rem}.ordwhere{font-weight:600;color:#476}
.ordwho{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.25rem}
.linkish{background:none;border:0;padding:.2rem 0;color:#0b74a8;font:700 .9rem var(--font);cursor:pointer;text-decoration:underline}
.poslines{flex:1;overflow-y:auto}.poslines .pad{padding:1rem}
.ordline{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.4rem;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #eef2f6;padding:.6rem .9rem;
  font:inherit;cursor:pointer;align-items:start}
.ordline:hover{background:#f6f9fc}.ordline .lq{color:#476;font-weight:600}.ordline .ld small{display:block;color:#6b7a8c;font-size:.78rem}.ordline .ld small.unsent{color:#b26b00}
.ordline .lt{font-weight:650}.ordline.sent .lq::before{content:'✓ ';color:#0a7d52}
.postotals{border-top:1px solid #e6ebf1;padding:.55rem .9rem}.trow{display:flex;justify-content:space-between;padding:.12rem 0;color:#3b4a5c}.trow.big{font-weight:800;font-size:1.25rem;color:#0f1d33}
.posactions{display:flex;flex-wrap:wrap;gap:.35rem;padding:.6rem .9rem .9rem}.posactions .pbtn{padding:.4rem .7rem}.posactions .pay{flex:1 1 100%;min-height:58px;font-size:1.2rem}
.posmodal{position:fixed;inset:0;background:rgba(0,19,47,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.posmodal[hidden]{display:none}
.posdialog{background:#fff;border-radius:16px;width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.25);-webkit-user-select:text;user-select:text}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1rem;border-bottom:1px solid #e6ebf1}.mclose{border:0;background:none;font-size:1.6rem;cursor:pointer;line-height:1}
.mbody{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem}.mbody label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.9rem}
.mbody input,.mbody select{font-size:1rem;padding:.6rem .7rem;border-radius:10px;border:1px solid #cfd8e3}.mbody label.chk{flex-direction:row;align-items:center;font-weight:500}
.bigin{font-size:1.4rem!important;font-weight:700;text-align:right}
.mfoot{display:flex;gap:.5rem;justify-content:flex-end;padding:.8rem 1rem;border-top:1px solid #e6ebf1}.mfoot .pay{min-width:10rem}
.methods,.quick{display:flex;flex-wrap:wrap;gap:.4rem}.qtyrow{display:flex;gap:.5rem;align-items:center}.qtyrow input{width:7rem}
.change{font-size:2.6rem;font-weight:800;text-align:center;padding:1rem 0}.change small{display:block;font-size:.95rem;font-weight:600;color:#6b7a8c}
.picklist{display:flex;flex-direction:column;max-height:50vh;overflow-y:auto}
.pickrow{text-align:left;background:none;border:0;border-bottom:1px solid #eef2f6;padding:.75rem .5rem;font:inherit;cursor:pointer}.pickrow:hover{background:#f6f9fc}.pickrow small{color:#6b7a8c}
.tablegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}
.tablebtn{min-height:76px;border-radius:12px;border:2px solid #cfe9d9;background:#f2fbf6;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem}
.tablebtn.busy{border-color:#f3c76b;background:#fff8e8}.tablebtn small{font-size:.75rem;color:#5b6b7d}.areahead{font-weight:700;margin:.3rem 0 .4rem}
.postoast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:#00132f;color:#fff;padding:.7rem 1.1rem;border-radius:10px;z-index:60;font-weight:600;max-width:90vw}
.postoast.bad{background:#b42318}
@media (max-width:860px){.posmain{grid-template-columns:1fr;grid-template-rows:1fr auto}.posorder{max-height:52vh}.positems{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
.tbl td .btn+form.inline{margin-left:.6rem}

/* ---------- the installed app ---------- */
.installbtn{display:flex;align-items:center;gap:.6rem;width:100%;margin-top:.8rem;padding:.55rem .65rem;border-radius:var(--r-sm);border:1px dashed #2b4a78;background:none;color:#cfe3f2;font:700 .88rem/1.2 var(--font);cursor:pointer;text-align:left}
.installbtn:hover{background:#0a2246;color:#fff;border-style:solid}.installbtn .ic{color:var(--aqua)}
.installbtn[hidden]{display:none}
.portal .installbtn{border-color:var(--line2);color:var(--brand);width:auto;margin:1rem auto 0}.portal .installbtn:hover{background:var(--wash);color:var(--brand)}
html.in-app .topbar{padding-top:env(safe-area-inset-top)}
html.in-app .side{padding-top:calc(1rem + env(safe-area-inset-top))}
body.offline{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--brand);color:#d3dfee;padding:1.5rem}
.offbox{max-width:420px;text-align:center}.offbox h1{color:#fff;margin:1.4rem 0 .6rem}.offbox p{margin:.4rem 0 1rem}.offbox .small{color:#9fb3cc}
@media (display-mode: standalone){.foot{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}}

/* register on a phone: Items and Bill as two views, switched from the bar at the bottom */
.posmain>*{min-width:0}
.posphone{display:none}
@media (max-width:640px){
  .posbody{height:100dvh}
  .posbar{flex-wrap:nowrap;padding:.4rem .5rem;padding-top:calc(.4rem + env(safe-area-inset-top))}
  .posbrand{flex:none}.posbrand .small{display:none}.posbrand strong{white-space:nowrap;max-width:28vw;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
  .posnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.posnav::-webkit-scrollbar{display:none}
  .posbar .pbtn{min-height:36px;padding:.3rem .65rem;font-size:.85rem;white-space:nowrap;flex:none}
  .posmain{display:flex;flex-direction:column;padding:.5rem;gap:.5rem;min-height:0}
  .poscatalog{flex:1}.posorder{flex:1;max-height:none;display:none}
  body.show-bill .poscatalog{display:none}body.show-bill .posorder{display:flex}
  .posfind input{font-size:1rem;padding:.55rem .7rem}.posfind .pbtn{padding:.3rem .6rem;font-size:.85rem}
  .positems{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.4rem}.itembtn{min-height:76px;padding:.5rem}
  .posphone{display:grid;grid-template-columns:1fr 1.6fr;gap:.4rem;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #d5dde8}
  .posphone button{min-height:48px;border-radius:12px;border:1px solid #cfd8e3;background:#fff;font:700 .95rem/1.1 var(--font);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer}
  .posphone button.on{background:#00132f;color:#fff;border-color:#00132f}
  .posphone b{font-size:1.05rem}
  .posactions .pbtn{flex:1 1 auto}
  .posdialog{max-height:96dvh}
}

/* ---------- PDF and email ---------- */
.emailbox{display:inline-block}
.emailpanel{width:min(460px,92vw);padding:1rem 1.1rem;text-align:left}
.emailpanel h3{margin:.1rem 0 .7rem}
.emailpanel label{margin-bottom:.6rem}.emailpanel textarea{font-size:.9rem;line-height:1.45}
.emailpanel .actions{justify-content:flex-end;margin-top:.4rem}
.btn.is-off{opacity:.5;cursor:not-allowed}
.sentlog ul{list-style:none;margin:0;padding:0}.sentlog li{padding:.45rem 0;border-bottom:1px solid #edf1f5}.sentlog li:last-child{border-bottom:0}
.doclogo{max-height:64px;max-width:200px;display:block;margin-bottom:.4rem}
.logobox{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}.logobox img{max-height:70px;max-width:220px;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}
@media (max-width:720px){.emailpanel{position:fixed;left:4vw;right:4vw;top:70px;width:auto;max-height:80vh;overflow:auto}}