:root{font:16px Arial,Helvetica,sans-serif;color:#171b24;background:#f3f4f6;--ink:#111827;--red:#b72d22;--blue:#183d68;--paper:#fff;--muted:#5c6471;--line:#c9ced6}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button,.file{background:var(--paper);border:1px solid #a7aeb9;color:var(--ink);padding:11px 14px;border-radius:0;font-weight:700;cursor:pointer}
button:hover,.file:hover{background:#edf1f5}
.primary{background:var(--red);border-color:var(--red);color:white}
.primary:hover{background:#b32f22}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,.file:focus-within{outline:3px solid #f2a51a;outline-offset:3px}
header{background:var(--blue);color:white;display:flex;align-items:center;padding:21px 4%;gap:27px;border-bottom:5px solid var(--red)}
.brand{color:white;text-decoration:none;font-size:24px;font-weight:900;letter-spacing:-.7px}
.brand span{font-weight:400;margin-left:4px;color:#ffb0a7}
.tag{font-size:11px;letter-spacing:1.5px;color:#cddaea}
header button{margin-left:auto;background:transparent;border-color:#9aadc4;color:white}
header button:hover{background:#244f7f}
main{max-width:1500px;margin:auto;padding:34px 4%}
.mast{display:flex;justify-content:space-between;gap:28px;align-items:start}
.mast h1{font-size:39px;line-height:1.1;letter-spacing:-1.5px;margin:0}
.kicker{font-size:11px;letter-spacing:1.5px;font-weight:800;color:var(--red);margin:0 0 12px}
.mast-actions,.actions{display:flex;gap:9px;flex-wrap:wrap}
.mast-actions{justify-content:flex-end}
#workspace-notes{color:var(--muted);max-width:740px;white-space:pre-wrap}
#details{padding:7px 10px;font-size:13px}
#notice{min-height:42px;margin:20px 0;padding:10px 0;font-size:14px}
.error{color:#8c2119!important;background:#fff0ed!important;border-left:4px solid var(--red);padding:12px!important}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:white;margin:0 0 28px}
.metrics div{padding:24px;border-right:1px solid #455064}
.metrics div:last-child{border:0}
.metrics span{font-size:33px;font-weight:800;font-variant-numeric:tabular-nums}
.metrics p{font-size:13px;color:#cbd1db;margin:7px 0 0}
.toolbar{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}
.filters{display:flex;gap:10px;flex:1}
.filters label:first-child{flex:1;max-width:390px}
.filters label:last-child{width:190px}
label{display:block;font-size:14px;font-weight:700}
input,select,textarea{display:block;width:100%;min-width:0;background:white;border:1px solid #a7aeb9;color:var(--ink);padding:11px;margin-top:7px;border-radius:0}
textarea{resize:vertical}
.file{position:relative;display:inline-flex;align-items:center;overflow:hidden}
.file input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.column-head,.booking-row{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,110px) 125px 105px;gap:18px;align-items:center}
.column-head{font-size:11px;letter-spacing:1px;font-weight:800;color:var(--muted);padding:13px 18px}
.booking-row{background:white;border-top:1px solid var(--line);padding:19px 18px}
.booking-row:last-child{border-bottom:1px solid var(--line)}
.identity{min-width:0}
.identity .client{font-size:12px;color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.identity h2{font-size:18px;margin:6px 0;overflow-wrap:anywhere}
.identity p{font-size:13px;color:var(--muted);margin:4px 0;overflow-wrap:anywhere}
.money{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.due{font-size:13px;font-weight:800}
.due small{display:block;margin-top:4px;color:var(--muted);font-weight:400}
.due.overdue{color:#b0281d}
.due.due14{color:#a35b00}
.due.paid{color:#285f50}
.due.void{color:#777}
.manage{display:flex;flex-direction:column;gap:7px}
.manage button{font-size:12px;padding:6px 8px}
.mobile-label{display:none}
.foot{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-top:20px}
.foot p,.privacy{color:var(--muted);font-size:13px;line-height:1.55;max-width:860px}
.privacy{border-top:1px solid var(--line);padding-top:18px;max-width:none}
#empty{text-align:center;background:white;border:1px dashed #a7aeb9;padding:64px 20px}
#empty h2{font-size:27px;margin:0 0 14px}
#empty p{color:var(--muted)}
dialog{border:0;border-top:6px solid var(--red);width:calc(100% - 32px);max-width:620px;max-height:90vh;overflow:auto;padding:26px;color:var(--ink)}
dialog::backdrop{background:#111827aa}
dialog h2{font-size:24px;margin:0 0 20px}
.dialog-top{display:flex;justify-content:space-between;gap:15px}
.dialog-top button{align-self:start;padding:6px 9px;font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.two>*{min-width:0}
dialog label{margin-bottom:17px}
.small{color:var(--muted);font-size:13px;line-height:1.5}
#booking-error,#payment-error{color:#98291f;font-size:14px}
.balance-strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:white;margin:0 0 22px}
.balance-strip div{padding:15px;border-right:1px solid #455064}
.balance-strip div:last-child{border:0}
.balance-strip span{display:block;color:#cbd1db;font-size:12px}
.balance-strip b{display:block;margin-top:6px;font-size:20px}
.payment-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-top:1px solid var(--line);padding:14px 0}
.payment-card p{margin:3px 0;color:var(--muted);font-size:13px}
.payment-card b{font-size:16px}
.payment-card .actions button{font-size:12px;padding:6px 8px}
[hidden]{display:none!important}
#print-label{display:none}
@media(max-width:1100px){.toolbar{align-items:stretch;flex-direction:column}
.column-head,.booking-row{grid-template-columns:minmax(180px,1.7fr) repeat(3,90px) 105px 80px;gap:12px}
.metrics div{padding:20px 13px}
.tag{display:none}
}
@media(max-width:760px){header{padding:18px 16px}
.brand{font-size:20px}
header button{font-size:12px}
main{padding:25px 16px}
.mast{display:block}
.mast h1{font-size:31px}
.mast-actions{justify-content:start;margin-top:20px}
.mast-actions button,.file{font-size:13px}
.metrics{grid-template-columns:1fr 1fr}
.metrics div{border-bottom:1px solid #455064}
.metrics span{font-size:28px}
.filters{flex-wrap:wrap}
.filters label,.filters label:first-child,.filters label:last-child{width:100%;max-width:none}
.column-head{display:none}
.booking-row{grid-template-columns:1fr 1fr;gap:17px;padding:18px 16px}
.identity{grid-column:1/-1}
.manage{grid-column:1/-1;flex-direction:row}
.mobile-label{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-bottom:4px}
.foot{flex-direction:column}
.two{grid-template-columns:1fr}
.balance-strip b{font-size:17px}
}
@media(max-width:360px){header{gap:10px;padding:16px 10px}
.brand{font-size:18px}
header button{padding:9px 8px}
main{padding-left:10px;padding-right:10px}
.metrics span{font-size:23px}
.metrics div{min-width:0;padding:18px 9px}
}
@media print{@page{margin:13mm}
:root,html,body{background:white!important}
header,.mast-actions,#details,#notice,.toolbar,.manage,.foot button,dialog,.privacy{display:none!important}
main{padding:0;max-width:none}
.mast{display:block}
.mast h1{font-size:23pt}
#print-label{display:block;font-weight:bold}
.metrics{padding:0}
.metrics div{padding:10px}
.metrics span{font-size:17pt}
.column-head,.booking-row{display:grid;grid-template-columns:2fr 75px 75px 75px 90px;gap:10px;padding:10px 0}
.column-head span:last-child{display:none}
.booking-row{break-inside:avoid}
.identity h2{font-size:11pt}
.identity p,.metrics p{font-size:8pt}
.money{font-size:11pt}
.due{font-size:9pt}
.foot{display:block}
.foot p{font-size:8pt;max-width:none}
}