/* KoKo Invoicing: app components layered on ki.css (the approved design tokens). */
:focus-visible{outline:2px solid #2fc3c9;outline-offset:2px;border-radius:4px}
.abar :focus-visible,.side :focus-visible,.auth :focus-visible,.sum .grand :focus-visible{outline-color:#fff}
::selection{background:#bfe3e4;color:var(--ink)}
input,select,textarea,button{font-family:var(--font);font-size:inherit;color:inherit}
button{cursor:pointer}
button:disabled,.btn:disabled,.btn.dis{opacity:.5;cursor:not-allowed}
.small{font-size:12.5px}.mut{color:var(--ink-3)}.nowrap{white-space:nowrap}
[hidden]{display:none!important}
.loading{display:grid;place-items:center;min-height:40vh}
.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* buttons */
.btn{text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--ink-3)}.btn.pri:hover{background:var(--accent-hover)}
.btn.sm{min-height:32px;padding:5px 11px;font-size:12.5px}
.btn.danger{background:var(--over);border-color:var(--over);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)}
.btn.wide{width:100%;justify-content:center}
.btn.ok{background:#1f9a62;border-color:#1f9a62;color:#fff}

/* shell additions */
.nav a span{min-width:0}.nav a:hover{background:rgba(255,255,255,.06)}
.nav .cnt[hidden]{display:none}
.who{display:block}.who>span{display:block;margin-top:1px}
.who-a{display:flex;gap:14px;margin-top:10px;align-items:center}.who-a a,.who-a button{color:#9fc0d2;font-size:12px;background:none;border:0;padding:0;display:inline-flex;gap:5px;align-items:center}
.who-a a:hover,.who-a button:hover{color:#fff}.who-a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.gsearch{margin:0}.gsearch input{background:var(--surface-2);border:1px solid transparent;border-radius:8px;padding:9px 12px;width:300px;font-size:13px}
.gsearch input:focus{border-color:var(--accent);outline:0;background:#fff}
.top .btn.pri{min-height:40px}
.page.wide{max-width:none}
.head .acts{display:flex;gap:8px;flex-wrap:wrap}
.head h1{overflow-wrap:anywhere}
.sub{color:var(--ink-3)}

/* sign in */
.auth{min-height:100vh;display:grid;place-items:center;background:var(--navy);padding:24px 16px}
.auth-card{width:100%;max-width:400px;background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:30px 28px 26px;color:#e6eef3}
.auth-card img{display:block;margin-bottom:14px}.auth-card h1{font-size:21px;font-weight:600;margin-bottom:18px;color:#fff}
.auth-f{display:flex;flex-direction:column;gap:14px}.auth-f a{color:#8fd6da}
.note{margin:0;color:#c2d4de;font-size:13.5px;line-height:1.5}
.err{margin:0;color:var(--over);font-size:13.5px;background:var(--over-bg);border-radius:7px;padding:8px 11px}
.auth .err{background:#4a1f1d;color:#ffb4ad}.ok{margin:0;color:var(--paid);font-size:13.5px}.auth .ok{color:#8be0b4}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}.f>span{font-size:12.5px;color:var(--ink-3);font-weight:500}
.f input,.f select,.f textarea{border:1px solid var(--line-strong);border-radius:8px;padding:9px 11px;background:#fff;min-height:40px;width:100%;min-width:0}
.f textarea{resize:vertical;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.f.dark>span{color:#a9c1cf}.f.dark input{background:#0B2A3C;border-color:#2c5a75;color:#fff}
.f .hint{font-size:12px;color:var(--ink-3)}
.chk{display:flex;gap:8px;align-items:center;font-size:14px}.chk input{width:18px;height:18px;accent-color:var(--accent)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.span2{grid-column:1/-1}
.form{display:flex;flex-direction:column;gap:14px}
.panel .pad{padding:18px}
.panel .form{padding:18px}
.fbar{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}

/* toasts, dialogs, menus */
.toasts{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 36px))}
.toast{background:var(--navy);color:#fff;padding:11px 15px;border-radius:9px;box-shadow:0 6px 20px rgba(8,24,38,.28);font-size:13.5px;line-height:1.4;transition:opacity .4s,transform .4s}
.toast.err{background:#8e1d17}.toast.out{opacity:0;transform:translateY(6px)}
dialog.dlg{border:0;border-radius:12px;padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 18px 50px rgba(8,24,38,.35);color:var(--ink);background:#fff}
dialog.dlg.wide{width:min(960px,calc(100vw - 24px))}
dialog.dlg::backdrop{background:rgba(8,24,38,.55)}
.dlg-f{display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.dlg-f header{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}.dlg-f h2{font-size:17px;font-weight:650;flex:1}
.dlg-f .x{border:0;background:none;padding:6px;border-radius:6px;display:grid}.dlg-f .x svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round}
.dlg-b{padding:18px 20px;overflow:auto;display:flex;flex-direction:column;gap:14px}.dlg-b p{margin:0;line-height:1.5}
.dlg-f footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 12px 12px}
.pdfv{width:100%;height:72vh;border:1px solid var(--line);border-radius:8px}
.pophost{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(8,24,38,.22);min-width:210px;padding:6px;display:flex;flex-direction:column}
.pop button{display:flex;gap:10px;align-items:center;border:0;background:none;text-align:left;padding:9px 11px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--ink)}
.pop button:hover,.pop button:focus-visible{background:var(--surface-2)}.pop button.bad{color:var(--over)}
.pop svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pop hr{border:0;border-top:1px solid var(--line);margin:5px 0;width:100%}
.only-m{display:none!important}
.sgw{position:relative}
.sg{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line-strong);border-radius:9px;box-shadow:0 10px 28px rgba(8,24,38,.2);margin:4px 0 0;padding:4px;list-style:none;max-height:280px;overflow:auto;min-width:260px}
.sg li{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:1px}.sg li b{font-weight:600;font-size:13.5px}.sg li small{color:var(--ink-3);font-size:12px}
.sg li.on,.sg li:hover{background:var(--accent-soft)}.sg li.ft{color:var(--accent);font-weight:600;border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:3px}

/* lists */
.empty{background:#fff;border:1px dashed var(--line-strong);border-radius:10px;padding:34px 20px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.empty b{font-size:16px}.empty p{margin:0;color:var(--ink-3);max-width:44ch}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px;color:var(--ink-3);font-size:13px}
.panel{overflow:hidden}
.panel>.tw{overflow-x:auto}
tbody tr[data-href]{cursor:pointer}tbody tr[data-href]:hover{background:#f6fafa}tbody tr[data-href]:focus-visible{outline-offset:-2px}
td.r,th.r{text-align:right}.num,td.r{font-variant-numeric:tabular-nums}
.pill{font-weight:600}
tr.arch td{opacity:.6}
.filters .sp{flex:1}
.filters select,.filters input[type=search],.filters input[type=date]{border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;background:#fff;min-height:36px}
.chip{cursor:pointer;font-family:var(--font)}.chip:hover{border-color:var(--ink-3)}
.sumline{display:flex;gap:18px;flex-wrap:wrap;margin:-4px 0 14px;color:var(--ink-2);font-size:13.5px}.sumline b{color:var(--ink)}
.bulk{display:flex;gap:8px;align-items:center;margin-bottom:12px;padding:10px 14px;background:var(--accent-soft);border-radius:9px;color:var(--accent-hover);font-weight:600}
td.ck,th.ck{width:36px;padding-right:0}td.ck input,th.ck input{width:17px;height:17px;accent-color:var(--accent)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;color:var(--ink-2);font-weight:500;white-space:nowrap}.tabs button.on{color:var(--accent);border-color:var(--accent);font-weight:600}.tabs button i{font-style:normal;color:var(--ink-3);font-weight:400;margin-left:4px}
.tabs a:hover,.tabs button:hover{color:var(--ink)}

/* dashboard */
.ledger .seg-a{background:#2fc3c9}.ledger .seg-b{background:#C69A4B}.ledger .seg-c{background:#ff8f84}
.ledger .big{background:#0f3550}
.ledger.multi{grid-template-columns:1fr}
.curblock+.curblock{margin-top:18px}.curblock h2{font-size:14px;color:var(--ink-3);font-weight:600;margin-bottom:8px}
.due a.row{display:contents}
.due:hover{background:#f6fafa}
.chart svg text{font-family:var(--font);font-size:11px;fill:var(--ink-3)}.chart svg .v{font-weight:600;fill:var(--ink)}
.chart .bar-a{fill:var(--accent)}.chart .bar-b{fill:var(--gold)}.chart .grid{stroke:var(--line);stroke-width:1}

/* client page */
.cl-head .panel>h2{display:flex}
.kv dd{overflow-wrap:anywhere}.kv .mono{font-size:13px}
.bal-card .l b{font-weight:600}.bal-card .l span{color:#6b5320}
.avatar{margin-right:2px}
.head.cl{align-items:center;flex-wrap:nowrap}
.head.cl>div:nth-child(2){min-width:0}
.contacts-edit .crow{display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr auto;gap:10px;align-items:end;padding:12px;background:var(--surface-2);border-radius:9px;margin-bottom:10px}
.crow .chk{padding-bottom:10px}

/* editor */
.abar .menu{flex:none}
.abar h1{white-space:nowrap}
.abar a.ab,.abar button.ab{text-decoration:none;cursor:pointer}
.abar .ab:hover{background:rgba(255,255,255,.16)}
.abar .ab.save:hover{background:#188653}
.abar .ab[aria-disabled=true],.abar .ab:disabled{opacity:.5}
.abar .pop{right:12px;top:100%}
.abar .ab{flex:none}
.cards .card{min-width:0}
.card .fld{border-bottom:1px solid var(--line-strong);padding:6px 0 5px;margin-top:10px;display:block}
.card .fld:focus-within{border-color:var(--accent)}
.bare{border:0;background:transparent;width:100%;font:500 15px var(--font);color:var(--ink);padding:2px 0;min-height:24px;min-width:0}
.bare:focus{outline:0}
.bare:disabled{color:var(--ink-2);opacity:1}
select.bare{padding-right:4px}
.card .fld.inline{display:flex;gap:10px;align-items:flex-end}.card .fld.inline>*{flex:1}.card .fld.inline select.bare{flex:0 0 auto;width:auto;text-align:right}
.pick{display:flex;flex-direction:column;gap:8px}
.pick .lnk{color:var(--accent);font-weight:600;background:none;border:0;padding:0;text-align:left;font-size:14px}
.pick .cname{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.pick .cname h3{margin:0}
.contact{cursor:pointer;margin-top:10px}.contact input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
.contact i{background:#fff;border-color:var(--line-strong)}.contact i:after{display:none}
.contact input:checked+i{background:var(--accent);border-color:var(--accent)}.contact input:checked+i:after{display:block}
.contact input:focus-visible+i{outline:2px solid #2fc3c9;outline-offset:2px}
.contact span{display:block}.contact span.off{color:var(--ink-3)}
.contact{position:relative}
.items{table-layout:auto}
.items th{white-space:nowrap}
.items th.r,.items td.r{text-align:right}
.items td{vertical-align:top;padding:10px 12px}
.items .bare{border-bottom:1px solid var(--line-strong);font-weight:400;font-size:14.5px}
.items .bare:focus{border-color:var(--accent)}
.items td.title .bare{font-weight:500}
.items td.r .bare{text-align:right}
.items textarea.bare{resize:none;overflow:hidden;line-height:1.4;display:block}
.items .tot{white-space:nowrap;padding-top:14px}
.items td.acts{white-space:nowrap;padding-top:8px;text-align:right}
.items td .tax{max-width:128px}
.items .ld{display:flex;gap:4px;align-items:flex-end}.items .ld select{width:auto;flex:none;border-bottom:1px solid var(--line-strong);font-size:12.5px;color:var(--ink-3)}
.ibtn{border:1px solid transparent;background:none;border-radius:7px;width:32px;height:32px;display:inline-grid;place-items:center;color:var(--ink-2)}
.ibtn:hover{background:var(--surface-2);border-color:var(--line)}.ibtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn.bad:hover{color:var(--over)}
.addrow{padding:12px 14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)}
.notes .tabs{margin-bottom:10px}
.notes textarea.box{display:block;width:100%;font:inherit;resize:vertical;min-height:150px;color:var(--ink);white-space:pre-wrap}
.notes textarea.box:focus{outline:2px solid var(--accent);outline-offset:-1px}
.sum .row.neg{color:var(--paid)}.sum .row b{color:var(--ink);font-weight:600}
.sum .grand.paid{background:#0e4d36}
.sum .row.sub{border-top:1px solid var(--line);color:var(--ink)}
.sum .row.sub b{font-weight:700}
.block{margin-top:24px}
.block h2{font-size:16px;font-weight:650;margin-bottom:10px}
.lock-note{background:var(--part-bg);color:var(--part);border-radius:9px;padding:10px 14px;margin-bottom:16px;font-size:13.5px}
.hist{list-style:none;margin:0;padding:0}.hist li{padding:10px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}.hist li:last-child{border:0}.hist time{color:var(--ink-3);min-width:150px;font-size:13px}.hist .c{color:var(--ink-2)}
.sched{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}

/* settings */
.sets{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
.sets .snav{display:flex;flex-direction:column;gap:2px;position:sticky;top:76px}
.sets .snav a{padding:9px 12px;border-radius:8px;color:var(--ink-2);font-weight:500}.sets .snav a.on{background:var(--accent-soft);color:var(--accent-hover);font-weight:600}.sets .snav a:hover{background:var(--surface-2)}
.sets h2.t{font-size:17px;margin-bottom:12px}
.logo-prev{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.logo-prev img{max-height:70px;max-width:200px}
.token{font-family:var(--mono);background:var(--surface-2);border:1px dashed var(--line-strong);padding:10px 12px;border-radius:8px;font-size:15px;word-break:break-all}

/* import, reports */
.drop{border:2px dashed var(--line-strong);border-radius:12px;padding:26px;text-align:center;background:#fff}
.stat{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 14px}.stat div b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em}.stat div span{color:var(--ink-3);font-size:13px}
.rep-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.rep-tools .f{min-width:140px}
tfoot td{font-weight:700;background:var(--surface-2)}
.gt td.r{text-align:right}

/* generic stacked tables on phones */
@media (max-width:860px){
.gsearch{display:none}
.g2,.g3,.g4,.sched{grid-template-columns:1fr}
.contacts-edit .crow{grid-template-columns:1fr 1fr}
.sets{grid-template-columns:1fr}.sets .snav{flex-direction:row;overflow:auto;position:static;border-bottom:1px solid var(--line)}.sets .snav a{white-space:nowrap;border-radius:8px 8px 0 0}
.gt thead{display:none}.gt,.gt tbody,.gt tr,.gt td{display:block;width:100%}
.gt tr{padding:12px 16px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.gt tr:last-child{border:0}.gt td{border:0;padding:0;min-width:0;overflow-wrap:anywhere}.gt td.r{text-align:left}
.gt td[data-l]:before{content:attr(data-l);display:block;font-size:11.5px;color:var(--ink-3)}
.gt td.hm,.stack td.hm{display:none}
.gt td.wide{grid-column:1/-1}
.gt td.ck{display:none}
.panel>.tw{overflow-x:visible}
.items.stack td.acts{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:8px;display:flex;justify-content:flex-end;gap:4px}
.items.stack td.r .bare{text-align:left}
.items.stack td.tot:before{display:none}
.items.stack td[data-l]:before{content:attr(data-l);display:block;font-size:11.5px;color:var(--ink-3)}
.items.stack td.tot{padding-top:8px}
.items.stack td.title:before{display:none}
.items td .tax{max-width:none}
.abar .ab{flex:1}.abar .ab.opt{display:none}
.only-m{display:flex!important}
.pop{min-width:230px}
.abar .st{margin-left:0}
.head .acts{width:100%}.head .acts .btn{flex:1;justify-content:center}
.head.cl{flex-wrap:wrap}
dialog.dlg{width:calc(100vw - 16px)}
.hist time{min-width:0;width:100%}
.stat div b{font-size:20px}
.page .filters{gap:6px}
.filters select,.filters input[type=search]{flex:1;min-width:130px}
.notes .tabs{margin-left:0;margin-right:0;padding:0}
.cl-head{display:flex;flex-direction:column}
.tabs{margin-left:-16px;margin-right:-16px;padding:0 16px}
}
@media print{.side,.top,.abar,.toasts{display:none!important}}

.toast.warn{background:#7a4b08}
.two.eq{grid-template-columns:1fr 1fr}
@media (max-width:860px){.two.eq{grid-template-columns:1fr}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rcpt{max-width:100%;max-height:70vh;display:block;margin:0 auto;border-radius:8px}
fieldset.numrow{border:1px solid var(--line);border-radius:9px;padding:6px 14px 14px;margin:0}fieldset.numrow legend{font-weight:600;padding:0 6px}
.numrow .g3{margin-top:4px}
.note.mut{color:var(--ink-3)}
.sc-auto{margin-top:12px}
.cname .lnk{margin-left:4px}
a.due{color:var(--ink)}a.due small{color:var(--ink-3)}
.chart svg text{font-size:13px}.chart svg .v{font-size:13px}
.items .ld select{border:0;border-bottom:1px solid var(--line-strong);background:transparent;border-radius:0;padding:2px 0;min-height:24px}
.bal-card .l b{font-size:inherit;display:inline;margin:0;letter-spacing:0;font-weight:600;color:#3d2e0e}
.filters input[type=search]{min-width:250px}
@media (max-width:860px){.filters input[type=search]{min-width:130px}}
.items .tax{min-width:110px}
@media (max-width:860px){.items .tax{min-width:0}}
@media (max-width:860px){.due{flex-wrap:wrap;row-gap:4px}.due>div{flex-basis:100%}.due>b{margin-left:auto}}
td.nw,tfoot td:first-child{white-space:nowrap}
@media (min-width:861px){.items th:nth-child(3){width:135px}.items th:nth-child(4){width:70px}.items th:nth-child(5){width:112px}.items th:nth-child(6){width:128px}.items th:nth-child(7){width:128px}.items td:nth-child(1){min-width:150px}.items td:nth-child(2){min-width:190px}}
.head .acts .btn{white-space:nowrap}

[hidden]{display:none!important}
.dfmt{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.dfmt:empty{display:none}
@media(min-width:861px){.shell{background:linear-gradient(to right,var(--navy) 232px,transparent 232px)}}
.side{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.side .nav{overflow:visible;flex:1 0 auto}
@media(max-width:860px){
.gt tfoot{display:block}.gt tfoot tr{background:var(--surface-2);border-top:2px solid var(--line-strong)}
.gt tfoot td:empty{display:none}.gt tfoot td{background:none}
.gt tfoot td:first-child{grid-column:1/-1;font-size:14px}.gt tfoot td:first-child:before{display:none}
}