/* Ichimi Expenses — plain, low-distraction UI (same house style as Ichimi Transfers). One accent color for primary actions. */
:root{--accent:#c73e1d;--bg:#fafafa;--paper:#fff;--ink:#111;--muted:#666;--line:#ddd;--ok:#2e7d32;--bad:#b3261e;--warn:#8a5a00}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0 0 .4rem;font-weight:600}
h2{font-size:1.1rem}h3{font-size:1rem}
a{color:var(--accent)}
.screen{min-height:100dvh}
.auth-card{max-width:400px;margin:10vh auto;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1.5rem}
.brand{text-align:center;margin-bottom:1rem}.brand h1{font-size:1.4rem}.brand p{margin:0;color:var(--muted)}
label{display:block;margin:.7rem 0;font-size:.9rem;color:var(--muted)}
input,select,textarea{display:block;width:100%;margin-top:.25rem;padding:.65rem .75rem;font:inherit;color:var(--ink);background:#fff;border:1px solid #bbb;border-radius:6px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0 .4rem 0 0;vertical-align:middle}
textarea{min-height:64px;resize:vertical}
.row{display:flex;gap:.6rem;align-items:flex-end}.row>*{flex:1}.row>.narrow{flex:0 0 110px}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:6px;border:1px solid #bbb;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;text-decoration:underline;font-weight:500}
.btn.small{padding:.45rem .75rem;font-size:.9rem}
.btn.block{width:100%;margin-top:.8rem}
.btn:disabled{opacity:.5;cursor:default}
.err{color:var(--bad);min-height:1.2em;font-size:.9rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.right{text-align:right}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.7rem 1rem;background:var(--paper);border-bottom:1px solid var(--line);padding-top:calc(.7rem + env(safe-area-inset-top))}
.top-left{display:flex;align-items:center;gap:.5rem}
.top strong{font-size:1.05rem}
.top-right{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end;max-width:70%}
.top-right .btn.small{min-height:36px;padding:.35rem .6rem}
main{padding:1rem 1rem 3rem;max-width:760px;margin:0 auto}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.9rem 1rem;margin-bottom:.6rem}
.card.hl{border-left:4px solid var(--ink)}
.card.dim{opacity:.6}
.card.sel{border-color:var(--ok);background:#f4faf4}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.card-title{font-weight:600;font-size:1.02rem}
.card-sub{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem;align-items:center}
.pill{display:inline-block;font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.pill.submitted{color:var(--warn)}
.pill.approved{color:var(--ink)}
.pill.paid{color:var(--ok)}
.pill.rejected{color:var(--bad)}
.pill.withdrawn,.pill.voided{color:#999;text-decoration:line-through}
.sec{margin:1.2rem 0 .5rem;display:flex;justify-content:space-between;align-items:baseline}
.sec h2{margin:0}
.empty{color:var(--muted);padding:1rem 0}
.line{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--line)}
.line:first-child{border-top:0}
.line .l{flex:1}
.line .l small{display:block;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:6px;font-size:.9rem;z-index:60;max-width:90vw}
.toast.bad{background:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.modal-card{background:var(--paper);width:100%;max-width:520px;max-height:92dvh;overflow:auto;overflow-x:hidden;border-radius:10px 10px 0 0;padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom))}
@media (min-width:640px){.modal{align-items:center}.modal-card{border-radius:8px}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
td,th{padding:.45rem .3rem;border-top:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.8rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.log-item{padding:.5rem 0;border-top:1px solid var(--line);font-size:.9rem}
.log-item time{display:block;color:var(--muted);font-size:.78rem}
.switch{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.switch button{border:1px solid #bbb;background:#fff;border-radius:6px;padding:.4rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.switch button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.foot{margin:2rem 0 1rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
/* receipt photo */
.photoBox{border:1px dashed #999;border-radius:6px;padding:1rem;text-align:center;background:#fff;margin-top:.3rem}
.photoBox img{max-width:100%;max-height:260px;border-radius:4px;display:block;margin:0 auto .5rem}
.photoFull{max-width:100%;max-height:75dvh;display:block;margin:0 auto;border-radius:4px}
.ai{font-size:.85rem;color:var(--muted);margin:.4rem 0 0}
.ai.on{color:var(--ok)}
/* pay bar */
.paybar{position:sticky;bottom:0;background:var(--paper);border-top:2px solid var(--ink);padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));margin:0 -1rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem;z-index:4}
.paybar .tot{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.check{display:flex;gap:.7rem;align-items:flex-start}
.check input[type=checkbox]{width:22px;height:22px;margin:.2rem 0 0;flex:0 0 auto}
.check .body{flex:1;min-width:0}
/* side drawer menu */
.iconbtn{border:0;background:none;font-size:1.5rem;line-height:1;padding:.2rem .4rem;cursor:pointer;color:var(--ink)}
#topTab{font-size:1.05rem}
#drawerBg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
.tabs{position:fixed;top:0;left:0;bottom:0;width:76vw;max-width:280px;display:flex;flex-direction:column;background:var(--paper);border-right:1px solid var(--line);padding:calc(.6rem + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);z-index:41;transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto}
.tabs.open{transform:translateX(0);box-shadow:2px 0 16px rgba(0,0,0,.2)}
.tabs button{position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:flex-start;width:100%;padding:.9rem 1.2rem;font:inherit;font-size:1rem;border:0;border-left:4px solid transparent;background:none;color:var(--ink);cursor:pointer;gap:.5rem;text-align:left}
.tabs button.active{color:var(--accent);font-weight:700;border-left-color:var(--accent);background:#faf6f3}
.tabs button .badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;font-size:.7rem;padding:0 .45rem;min-width:1.2rem;text-align:center}
.tabs .sep{border-top:1px solid var(--line);margin:.4rem 0}
@media (max-width:899px){
  .btn{min-height:44px}.btn.small{min-height:40px}
  .top-right>span{display:none}
  .grid2{grid-template-columns:1fr}
  .switch button{min-height:38px}
}
/* desktop sidebar */
@media (min-width:900px){
  #menuBtn{display:none}
  #drawerBg{display:none!important}
  .top{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;padding-top:0}
  .tabs{transform:none!important;top:56px;bottom:0;width:230px;box-shadow:none;padding-top:.6rem}
  main{margin-left:230px;max-width:820px;padding-top:calc(56px + 1.25rem)}
  .paybar{margin:0}
}
/* upload progress */
.prog{margin:.5rem 0 0;text-align:left}
.prog .bar{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-bottom:.25rem}
.prog .bar span{display:block;height:100%;width:0;background:var(--ok);transition:width .15s linear}
.prog .bar.indet span{width:35%!important;animation:indet 1.2s ease-in-out infinite}
@keyframes indet{0%{margin-left:-35%}100%{margin-left:100%}}
.ai.warn{color:var(--warn);font-weight:600}
.fieldlabel{display:block;margin:.7rem 0;font-size:.9rem;color:var(--muted)}
.ai.bad{color:var(--bad);font-weight:600}
/* quick tabs: Submit / My expenses always reachable on phones without the menu */
.quick{position:sticky;top:calc(3.1rem + env(safe-area-inset-top));z-index:4;display:flex;background:var(--paper);border-bottom:1px solid var(--line)}
.quick button{flex:1;padding:.7rem .3rem;border:0;border-bottom:3px solid transparent;background:none;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.quick button.active{color:var(--accent);border-bottom-color:var(--accent)}
@media (min-width:900px){.quick{display:none}}
.switch button .cnt{display:inline-block;min-width:1.3em;padding:0 .35em;margin-left:.2em;border-radius:999px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;text-align:center;vertical-align:1px}
.switch button.on .cnt{background:#fff;color:var(--accent)}
.prog{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem}
.prog .bar{flex:1 1 100%}
.prog .btn.small{min-height:0;padding:.1rem .5rem;font-size:.8rem}
.priv{margin:.3rem 0 .2rem;padding-left:1.1rem;font-size:.85rem;color:var(--muted)}
.priv li{margin:.15rem 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
@media (max-width:899px){.grid3{grid-template-columns:1fr}}
details.card summary{cursor:pointer;font-weight:600}
/* employees: top bar is the whole menu */
body.emp #menuBtn{display:none}
body.emp .tabs{display:none!important}
body.emp .quick{display:flex}
@media (min-width:900px){body.emp main{margin-left:auto;margin-right:auto;padding-top:calc(56px + 3.2rem + 1.25rem)} body.emp .quick{position:fixed;top:56px;left:0;right:0;z-index:45;justify-content:center} body.emp .quick button{flex:0 0 auto;padding:.7rem 1.4rem}}
/* status: filled badge + coloured edge so the state is obvious at a glance */
.card .pill{padding:.2rem .6rem;border-radius:4px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;background:#888}
.card .pill.submitted{background:#b7791f}
.card .pill.approved{background:#1d4ed8}
.card .pill.paid{background:var(--ok)}
.card .pill.rejected{background:var(--bad)}
.card .pill.withdrawn,.card .pill.voided{background:#999;text-decoration:none}
.card.st-submitted{border-left:5px solid #b7791f}
.card.st-approved{border-left:5px solid #1d4ed8}
.card.st-paid{border-left:5px solid var(--ok)}
.card.st-rejected{border-left:5px solid var(--bad)}
.card.st-withdrawn{border-left:5px solid #bbb}
.quick button .cnt{display:inline-block;min-width:1.4em;padding:0 .4em;margin-left:.35em;border-radius:999px;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;line-height:1.4em;text-align:center;vertical-align:1px}
.tl b{font-weight:700}
.tl .t-sub{color:#b7791f}
.tl .t-app{color:#1d4ed8}
.tl .t-paid{color:var(--ok)}
.tl .t-rej{color:var(--bad)}
/* top bar: single line, never wraps; shrinks the font to fit five items on a phone */
.quick{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick button{white-space:nowrap;padding:.7rem .4rem;font-size:clamp(.72rem,3.4vw,.95rem);min-width:0}
.quick button .cnt{font-size:.68rem;margin-left:.25em;padding:0 .35em}
@media (max-width:380px){.quick button{font-size:.7rem;padding:.65rem .3rem}}