/* ===== Mint polish — typography, alignment and no-overflow rules. Loaded last on every page. ===== */
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-display:swap; font-weight:200 800; src:url('fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations'),url('fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-display:swap; font-weight:200 800; src:url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Roboto','Tajawal',sans-serif}

/* ---------- typography ---------- */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{font-feature-settings:normal; font-optical-sizing:auto; text-rendering:optimizeLegibility; overflow-wrap:break-word}
h1,h2,h3,h4{letter-spacing:-.01em; text-wrap:balance}
p,.sub,.sub2{text-wrap:pretty}
.sheet,.sheet td,.sheet th,.kpi,.tile b,.money,.num,td.r,th.r,.r,.fx-n,input[type=number],input[type=date],input[type=time]{font-variant-numeric:tabular-nums lining-nums}
.sheet{font-weight:400; letter-spacing:0}
.sheet th{font-weight:600; letter-spacing:.02em}

/* ---------- nothing may spill out of its frame ---------- */
.panel,.tile,.kpi,.cardx,.brcard,.card,.cd,dialog,.kb-card,.fx-card{min-width:0; overflow-wrap:anywhere}
.panel *,.tile *,.kpi *{min-width:0}
.btn,button,.pill,.chip,.badge,.act,.sbtn,.mini{white-space:nowrap}
.btn,.pill,.chip,.badge{flex:0 0 auto; max-width:100%}
.pill,.chip,.badge{overflow:visible}
.btn.sm{min-width:max-content}
:is(div,section,header,p,span):has(> .btn){flex-wrap:wrap; row-gap:10px}
.dlg-actions{flex-wrap:wrap}

/* ---------- form fields: label always fits, value never wraps over it ---------- */
.field{min-width:0}
dialog .field label,.field label{padding:0 14px; font-size:var(--lf,14.5px); line-height:1.2}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field input[type=date] + label,.field input[type=time] + label,.field select + label{font-size:min(11.5px,var(--lf,11.5px)); letter-spacing:.01em}
.field select + label{padding:0 44px}
.field select.empty + label{font-size:var(--lf,14.5px)}
.field input,.field select,.field textarea{text-overflow:ellipsis}
.field select{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.field select selectedcontent{display:block; flex:0 1 auto!important; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3}
.input,select.input{text-overflow:ellipsis; white-space:nowrap; min-width:0}
.field input[type=date],.field input[type=time]{padding-left:14px; padding-right:14px}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .mt{font-size:10px; letter-spacing:0}
  .mt span{max-width:100%}
  .cbar>.input.grow,.cbar>.grow{flex:1 1 100%}
  #tools{overflow:visible; flex-wrap:wrap; padding-bottom:0} #tools .input{min-width:0; flex:1 1 100%}
  .seg{flex-wrap:wrap; overflow:visible; border-radius:22px} .seg button{flex:1 1 auto}
}

.field select{font-size:var(--sf,15px)}

/* bar charts: label column shrinks instead of pushing the amount out of the card */
.bar-chart .r{grid-template-columns:minmax(80px,140px) minmax(0,1fr) minmax(70px,auto)}
.bar-chart .r span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:760px){.bar-chart .r{grid-template-columns:minmax(70px,100px) minmax(0,1fr) minmax(64px,auto); gap:8px}}

/* ---------- alerts are always red so they cannot be missed ---------- */
:root{--danger:#d92d3f; --danger-rgb:217,45,63}
html[data-theme="dark"]{--danger:#ff6f7d; --danger-rgb:255,111,125}
.msg{color:var(--danger)!important; font-weight:500}
.msg.ok{color:var(--mute)!important; font-weight:400}
.alert:not(.good),.rules-warn,.ac-flag.warn{background:rgba(var(--danger-rgb),.1)!important; border:1px solid rgba(var(--danger-rgb),.55)!important; color:var(--danger)!important}
.alert:not(.good) b,.rules-warn b,.ac-flag.warn b{color:inherit}
.pill.bad,.pill.p-unpaid{--c:var(--danger)!important}
.kpi.bad{border-color:var(--danger)!important}
.kpi.bad b{color:var(--danger)}
.toast.err{background:var(--danger)!important; color:#fff!important; border-color:var(--danger)!important; font-weight:500; box-shadow:0 14px 34px -10px rgba(var(--danger-rgb),.6)}
.ac-bad{color:var(--danger)!important}
.btn:disabled,.btn[disabled]{opacity:.42; cursor:not-allowed; box-shadow:none!important; transform:none!important; filter:grayscale(.25)}

.bgx{overflow:hidden!important; max-width:100vw}
html,body{overflow-x:clip}

/* tabs / category switches look like real buttons */
.tabsx{gap:8px!important; border-bottom:0!important; padding-bottom:4px!important}
.tabsx button{height:40px!important; padding:0 18px!important; border-radius:14px!important; background:rgba(var(--sf),.95)!important; color:var(--ink)!important; border:1px solid rgba(var(--fg),.16)!important; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 14px -10px rgba(var(--fg),.45)!important; font-weight:500!important; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s}
.tabsx button:hover{border-color:rgba(var(--ac),.7)!important; color:var(--accent-ink)!important; transform:translateY(-1px)}
.tabsx button:active{transform:translateY(0)}
.tabsx button.on{background:linear-gradient(180deg,var(--accent),var(--accent2))!important; color:#fff!important; border-color:transparent!important; font-weight:600!important; box-shadow:0 8px 18px -8px rgba(var(--ac),.8)!important}
.tabsx button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* cards: nothing may leave its card */
.cc{white-space:normal!important; min-width:0; max-width:100%; overflow:hidden; justify-content:flex-start}
.cc b,.cc small,.cc .n{display:block; max-width:100%; white-space:normal!important; overflow-wrap:anywhere; word-break:normal; text-wrap:balance; text-align:center}
.cc b{line-height:1.3} .cc small{line-height:1.4}
.cgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))!important}
.cgrid>*{min-width:0}

/* ===== no green mouse glow; neutral hovers ===== */
.tile::after,.panel::after,.card::after,.cardx::after{display:none!important}
.tile:hover,.card:hover,.cardx:hover,.panel:hover{border-color:rgba(var(--fg),.2)}
.sbtn:hover:not(:disabled),.slots button:hover,.tagadd:hover,.cpres button:hover,.sheet button.act:hover,.ck:hover i,.cc:hover{border-color:rgba(var(--fg),.32)!important}
.tabsx button:hover{border-color:rgba(var(--fg),.34)!important; color:var(--ink)!important}
.appt .who:hover{color:inherit; text-decoration:underline}
.pick .list button:hover,.pick .list button.hi{background:rgba(var(--fg),.07)}
body.home.app .hg .tile:hover{border-color:rgba(var(--fg),.22)!important; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(var(--fg),.1), 0 14px 22px -14px rgba(var(--fg),.45)!important}
body.home.app .hg .tile:hover svg{background:color-mix(in srgb,var(--gc,var(--accent)) 14%,transparent)!important; color:var(--gc,var(--accent-ink))!important; transform:scale(1.05)}

/* ===== slightly 3D cards and buttons ===== */
:root{--b3-hi:rgba(255,255,255,.75); --b3-lo:rgba(var(--fg),.07); --b3-drop:rgba(var(--fg),.34)}
html[data-theme="dark"]{--b3-hi:rgba(255,255,255,.09); --b3-lo:rgba(0,0,0,.35); --b3-drop:rgba(0,0,0,.6)}
.panel,.card,.cardx,.card2,.kpi,.brcard,.cc,.kb-card,.tbr{box-shadow:inset 0 1px 0 var(--b3-hi), inset 0 -1px 0 var(--b3-lo), 0 1px 1px rgba(var(--fg),.07), 0 10px 20px -12px var(--b3-drop)!important}
body.app .tile,body.home.app .hg .tile{box-shadow:inset 0 1px 0 var(--b3-hi), inset 0 -2px 0 var(--b3-lo), 0 1px 1px rgba(var(--fg),.08), 0 10px 18px -12px var(--b3-drop)}
.btn:not(.ghost):not(:disabled),.btn[style*="background"]:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.15), 0 8px 14px -8px rgba(var(--ac),.65)!important}
.btn.ghost,.sbtn,.tabsx button:not(.on),.seg button:not(.on){box-shadow:inset 0 1px 0 var(--b3-hi), inset 0 -2px 0 var(--b3-lo), 0 1px 1px rgba(var(--fg),.1), 0 6px 10px -8px var(--b3-drop)!important}
.tabsx button.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.18), 0 8px 14px -8px rgba(var(--ac),.7)!important}
.btn:not(:disabled):hover,.sbtn:not(:disabled):hover{transform:translateY(-1px)}
.btn:not(:disabled):active,.sbtn:not(:disabled):active,.tabsx button:active{transform:translateY(1px)!important; box-shadow:inset 0 2px 3px rgba(0,0,0,.22)!important}

/* ===== no green tint inside cards (neutral glass only) ===== */
html body .tile,html body .card,html body .panel,html body .cardx,html body .sheet-wrap,html body .kb-card,html body .kpi,html body .tbr,html body .mtabs,html body .cc,html body .card2,html body .table-wrap,html body .colpanel,html body .brcard,html body .kb-fact,html body .kb-feed a,html body .kb-res a,html body .kb-list li, html body.home.app .tile, html body.app .tile{background-image:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) + .10)), rgba(var(--sf),var(--ga)) 55%, rgba(var(--sf),calc(var(--ga) - .08)))!important}
html[data-theme="dark"] body .tile,html[data-theme="dark"] body .card,html[data-theme="dark"] body .panel,html[data-theme="dark"] body .cardx,html[data-theme="dark"] body .sheet-wrap,html[data-theme="dark"] body .kb-card,html[data-theme="dark"] body .kpi,html[data-theme="dark"] body .tbr,html[data-theme="dark"] body .mtabs,html[data-theme="dark"] body .cc,html[data-theme="dark"] body .card2,html[data-theme="dark"] body .table-wrap,html[data-theme="dark"] body .colpanel,html[data-theme="dark"] body .brcard,html[data-theme="dark"] body .kb-fact,html[data-theme="dark"] body .kb-feed a,html[data-theme="dark"] body .kb-res a,html[data-theme="dark"] body .kb-list li, html[data-theme="dark"] body.home.app .tile{background-image:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) + .10)), rgba(var(--sf),var(--ga)) 55%, rgba(var(--sf),calc(var(--ga) - .08)))!important}
.kpi::after,.tile::before,.panel::before,.card::before,.cardx::before{background:none!important; display:none!important}
body.home .who::before{display:none!important}