:root{font-family:Inter,"Segoe UI",sans-serif;color:#172840;background:#f2f6fa;line-height:1.5}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.045em}
h2{font-size:1.15rem;letter-spacing:-.02em}
h3{font-size:.95rem}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:1px solid #cbd8e4;border-radius:8px;background:white;color:#17344c;padding:.52rem .8rem;font-weight:600}
button:disabled{opacity:.45;cursor:default}
button:hover:not(:disabled){border-color:#08766e}
button.primary{background:#08766e;border-color:#08766e;color:white}
button.primary:hover{background:#065a55}
input,select,textarea{display:block;width:100%;min-width:0;padding:.55rem .65rem;border:1px solid #cbd8e4;border-radius:8px;background:white;color:#172840}
.line textarea{resize:vertical}
.account-form{display:grid;gap:.7rem;justify-items:start}
.account-form label{width:100%;max-width:28rem}
.identifier-field{display:grid;gap:.25rem;width:100%;max-width:28rem}
.identifier-control{position:relative}
.identifier-control input:disabled{padding-inline-end:5.4rem;background:#f1f5f8;color:#526779;opacity:1;cursor:default}
#change-identifier{position:absolute;inset-inline-end:.3rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#526779;font-size:.8rem;padding:.28rem .45rem}
#change-identifier:hover,#change-identifier:focus-visible{color:#075c55;background:#edf6f5}
.account-form p:empty,#users-message:empty{display:none}
:focus-visible{outline:3px solid #19a99e;outline-offset:2px}
label{display:grid;gap:.25rem;font-weight:600;font-size:.85rem;min-width:0}
.access{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding:clamp(1.2rem,8vw,8rem);background:linear-gradient(135deg,#101b31,#0f2742 55%,#123b5a);color:white}
.access-brand strong{color:#5eead4;font-size:1.4rem}
.access-brand h1{font-size:clamp(2rem,5vw,4rem);line-height:1.06;margin-top:1rem}
.access-card{background:white;color:#172840;border-radius:18px;padding:2rem;max-width:28rem;box-shadow:0 24px 65px #07152655}
.access-card p{margin:.6rem 0 1.2rem;color:#4e6175}
.workspace{height:100vh;height:100dvh;display:grid;grid-template-columns:clamp(10rem,18vw,14rem) minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.sidebar{background:#101e35;color:white;padding:clamp(.6rem,3vh,1.6rem) 1.05rem;display:flex;flex-direction:column;gap:clamp(.45rem,2.6vh,1.4rem);min-width:0}
.sidebar-links{display:grid;gap:inherit;min-height:0}
.brand{font-size:1.25rem;font-weight:750;padding:0 .5rem}
.brand small,.sidebar nav span{display:block;color:#a4bacd;font-size:.78rem}
.sidebar nav{display:grid;gap:.25rem;border-top:1px solid #314358;padding-top:.85rem}
.sidebar nav span{padding:0 .5rem}
.sidebar a{color:white;text-decoration:none;padding:.45rem .5rem;border-radius:7px}
.sidebar a:hover{background:#243950}
.sidebar-footer{display:grid;justify-items:center;gap:.55rem;flex-shrink:0;margin-top:auto;margin-bottom:clamp(.3rem,2.5vh,1.2rem)}
.sidebar button{background:transparent;color:white;border-color:#536780}
.sidebar-rate{display:grid;justify-self:stretch;container-type:inline-size;gap:.15rem;margin-inline:-.65rem;color:#a4bacd;font-size:.68rem;line-height:1.25;text-align:center}
.sidebar-rate span{font-size:clamp(.58rem,4.7cqi,.68rem)}
.sidebar-rate strong{color:#d1dce6;font-weight:800}
.content-scroll{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain}
.content{padding:clamp(1rem,3vw,2.6rem);max-width:1550px;width:100%}
.top,.items-heading,.summary{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.top{margin-bottom:1.25rem}
.top span{border-radius:20px;background:#d9f3ef;color:#075b55;padding:.3rem .75rem;font-weight:650;font-size:.8rem}
.panels{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.card{background:white;border:1px solid #dbe5ee;border-radius:14px;padding:1.15rem;box-shadow:0 3px 12px #11284108;scroll-margin-top:1rem}
.card h2{margin-bottom:.85rem}
.fields{display:grid;gap:.55rem;align-items:end}
.customer{grid-template-columns:1.15fr .8fr 1.25fr;margin-bottom:1rem}
.line{grid-template-columns:minmax(0,2fr) minmax(70px,.6fr) minmax(90px,.85fr) auto;margin-top:.65rem}
.summary{border-top:1px solid #dbe5ee;margin-top:1rem;padding-top:.85rem}
.invoice-totals{display:grid;grid-template-columns:auto auto;gap:.2rem .9rem;margin:0;align-items:baseline}
.invoice-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.invoice-totals :is(dt,dd):nth-last-child(-n+2){font-weight:750}
.invoice-totals dd:last-child{font-size:1.4rem}
.summary small,#notice{color:#4e6175}
#notice:not(:empty){margin-top:.65rem}
.history h2{margin:0}
.history #search{width:min(100%,16rem);padding:.35rem .6rem}
.table-scroll{overflow:auto;margin-top:.65rem}
table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}
th,td{border-bottom:1px solid #e4edf4;padding:.55rem .45rem}
.history th,.history td{padding:.32rem .55rem;vertical-align:middle}
.history th:not(:nth-child(3)),.history td:not(:nth-child(3)){width:1%;white-space:nowrap}
.history td[colspan]{width:auto;white-space:normal}
.history th:nth-child(5),.history td:nth-child(5){text-align:right}
.history button{padding:.25rem .55rem;white-space:nowrap}
th{background:#f2f6fa}
#receipt{display:none}
#sending-indicator{display:flex;align-items:center;gap:.6rem;margin:.8rem 0;color:#075c55;font-weight:650}
.sending-spinner{width:1.1rem;height:1.1rem;flex:none;border:2px solid #b8ded8;border-top-color:#075c55;border-radius:50%;animation:invoice-spin .8s linear infinite}
#submit-invoice:disabled{opacity:.65;cursor:wait}
@keyframes invoice-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sending-spinner{animation:none}}
@media(max-height:510px){
  .sidebar nav span,.brand small{display:none}
  .sidebar nav{padding-top:.25rem}
  .sidebar a,.sidebar button{padding-block:.3rem}
}
@media(max-width:670px){
  .workspace,.access,.customer{grid-template-columns:1fr}
  .workspace{grid-template-rows:auto minmax(0,1fr)}
  .access{gap:1.2rem;align-content:center}
  .sidebar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3rem .6rem;padding:.6rem}
  .sidebar .brand{grid-area:1/1;padding:0}
  .sidebar-footer{grid-area:1/2;align-self:center;margin:0;max-width:9rem}
  .sidebar-rate{margin-inline:0}
  .sidebar-rate span{font-size:inherit}
  .sidebar button{padding:.28rem .55rem}
  .sidebar-links{grid-area:2/1/3/-1;display:flex;flex-wrap:wrap;gap:.2rem .45rem}
  .sidebar nav{display:block;border:0;padding:0}
  .sidebar nav span,.brand small{display:none}
  .sidebar a{display:block;padding:.28rem .15rem;font-size:.85rem}
  .line{grid-template-columns:1fr 1fr}
  .line label:first-child{grid-column:1/-1}
  .remove{justify-self:start}
}
@media print{
  @page{size:8.5in 11in;margin:0}
  html,body{margin:0;padding:0;background:white;color:black}
  #workspace,#access{display:none!important}
  #receipt{display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-height:calc(100vh - 1px);margin-inline:auto;padding:2.6vh 4.2% 6.5vh;font:8.5pt/1.25 Arial,sans-serif;overflow-wrap:anywhere}
  #receipt>*{flex-shrink:0}
  .receipt-header,.receipt-boxes{display:grid;grid-template-columns:1fr 1fr;gap:.4in;break-inside:avoid}
  .receipt-header{min-height:.93in;grid-template-columns:1.2fr 1fr}
  .receipt-issuer-block{display:grid;grid-template-columns:.88in 1fr;gap:.2in;align-items:start}
  .receipt-issuer-block>div{grid-column:2}
  .receipt-monogram{display:grid;place-items:center;width:.58in;height:.58in;margin:.11in auto 0;border-radius:.13in;background:#0d6efd;color:white;font:bold 18pt Arial;print-color-adjust:exact}
  #receipt h2{font-size:11pt;letter-spacing:normal;text-transform:uppercase}
  .receipt-header p,.receipt-header dl{font-size:8pt}
  #receipt-address{white-space:pre-line}
  #receipt .receipt-header dl{grid-template-columns:.8in 1fr;margin-top:.075in}
  .receipt-header dt{font-weight:bold}
  #receipt h3{font-size:9pt}
  #receipt dl{display:grid;grid-template-columns:max-content 1fr;gap:.04in .15in;margin:.05in 0}
  #receipt dd{margin:0}
  .receipt-warning{font-size:8pt;font-weight:bold;margin-top:.06in}
  .receipt-date{margin:.02in 0 .19in;font-size:8pt}
  .receipt-date strong{display:inline-block;min-width:.65in}
  .receipt-boxes section{border:1px solid #000;min-height:.9in;padding:.09in}
  .receipt-boxes p{margin-top:.03in}
  #receipt table{width:100%;table-layout:fixed;font-size:9pt;margin-top:.045in}
  #receipt th,#receipt td{padding:.035in .05in;border-bottom:1px solid #000}
  #receipt th{border:1px solid #000;background:#e8e8e8;print-color-adjust:exact;text-align:center;font-size:8pt}
  .receipt-meta td{border:1px solid #000;text-align:center}
  #receipt .receipt-meta{margin-top:.1in}
  .receipt-meta :is(th,td):first-child{width:16%}
  #receipt .receipt-meta :is(th,td){font-size:7pt;padding:.018in .03in}
  .receipt-qty{width:6%}
  .receipt-code{width:11%}
  .receipt-discount{width:8%}
  .receipt-price{width:12%}
  .receipt-items td:first-child{text-align:center}
  .receipt-items td:nth-child(n+4){text-align:right}
  #receipt .receipt-items td{border-bottom-color:#aaa}
  #receipt tr,.receipt-footer{break-inside:avoid}
  .receipt-footer{display:flex;justify-content:space-between;align-items:start;gap:.2in;margin-top:auto;padding-top:.15in}
  .receipt-footer p{font-size:8pt}
  #receipt-qr{display:block;width:1.24in;height:1.24in;margin-bottom:.045in}
  #receipt .receipt-footer dl{grid-template-columns:max-content .9in;text-align:right;font-size:10pt;gap:.06in .15in;margin:.35in .43in 0 0}
  .receipt-footer dt{font-weight:bold}
  .receipt-total{font-weight:bold}
}