:root{
  --navy:#020c29; --navy2:#0b2550; --blue:#1a62a1; --sky:#63a4d5; --sky-light:#9acae8;
  --silver:#989fac; --bg:#020c29; --surface:#0b2550; --surface2:#123064; --text:#ffffff; --muted:#9acae8;
  --border:#243f6e; --green:#7dd8a8; --amber:#ffd97a; --red:#ff9a9a;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
header{background:var(--navy);color:#fff;padding:20px 16px 16px;border-bottom:1px solid var(--border)}
header .wrap,main,footer .wrap{max-width:1060px;margin:0 auto;padding:0 16px}
h1{margin:0 0 4px;font-size:28px;color:#fff}
.logo{width:72px;height:72px;object-fit:cover;border-radius:12px}
.invoice-logo{width:72px;height:72px;object-fit:cover;border-radius:12px}
.inv-line{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}
.inv-line label{margin:0}
.inv-table{width:100%;border-collapse:collapse;margin:10px 0}
.inv-table th,.inv-table td{padding:6px 4px;border-bottom:1px solid var(--border);text-align:left}
.inv-table th{color:#fff}
h2{margin:28px 0 10px;color:#fff}
h3{margin:14px 0 6px;color:#fff}
.tag{color:var(--sky-light)}
.demo-banner{background:#123064;border:1px solid var(--border);color:#cfe0ee;padding:10px 12px;border-radius:10px;margin:16px 0}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
button,select,input,textarea{font:inherit;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:#071a3d;color:#fff}
button{background:var(--blue);color:#fff;border-color:var(--blue);cursor:pointer;font-weight:650}
button.secondary{background:var(--surface2);color:#fff;border-color:var(--border)}
button.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.card{background:var(--surface);color:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;margin:12px 0;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--sky-light);color:var(--navy)}
.pill.confirmed{background:#1f5c3d;color:#d8efe2}
.pill.pending{background:#5a4300;color:#fff0c2}
.pill.reschedule{background:#6e1f1f;color:#fde2e2}
label{display:block;font-weight:650;margin:10px 0 4px;color:#fff}
label input,label select,label textarea{width:100%;font-weight:400;margin-top:4px}
.muted{color:var(--muted)}
.small{font-size:13px}
.summary{font-size:19px;font-weight:800;color:#fff}
.summary-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--border)}
.total{font-size:20px}
footer{padding:24px 0 40px;color:var(--muted)}
details{margin:8px 0}
a{color:var(--sky-light)}
@media(max-width:600px){h1{font-size:24px}.controls button{flex:1}}
/* Print: only the generated Invoice / Receipt prints, never the whole page. */
@media print{
  body{background:#fff;color:#000}
  header,footer,.demo-banner,#authCard,#clientView,main>section:not(#ownerView){display:none !important}
  #ownerView>h2,#ownerView>h3,#ownerView>p,#board,#schedule,#approvals,#invoiceForm{display:none !important}
  #ownerView .card{box-shadow:none}
  #invoiceOut,#invoiceOut .card{display:block !important;background:#fff !important;color:#000 !important;border:1px solid #000 !important;box-shadow:none !important}
  #invoiceOut h3,#invoiceOut p,#invoiceOut span,#invoiceOut div,#invoiceOut th,#invoiceOut td{color:#000 !important}
  #invoiceOut .inv-table th,#invoiceOut .inv-table td{border-bottom:1px solid #999 !important}
  #invoiceOut .muted{color:#333 !important}
  #invoiceOut .summary-line{border-bottom:1px solid #999 !important}
}