:root{
  --navy-950:#0E1830;
  --navy-900:#132244;
  --navy-800:#1B2E56;
  --navy-700:#2A4172;
  --slate-500:#5B6B8C;
  --slate-300:#AEB8CC;
  --mist-100:#EEF0F4;
  --mist-50:#F7F8FA;
  --gold-500:#C9922E;
  --gold-600:#B07E22;
  --paper-white:#FFFFFF;
  --ink-900:#141A2B;
  --ink-600:#4A5268;
  --line:#DEE2EA;
  --danger:#B4442E;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--mist-100);
  color:var(--ink-900);
  height:100vh;
  overflow:hidden;
}

.app{display:flex; flex-direction:column; height:100vh;}

/* ============ TOP BAR ============ */
.topbar{
  display:flex; align-items:center; gap:24px;
  background:var(--navy-950);
  color:#fff;
  padding:12px 20px;
  flex-wrap:wrap;
  border-bottom:3px solid var(--gold-500);
}
.brand{display:flex; align-items:center; gap:8px; margin-right:8px;}
.brand-mark{
  font-family:var(--font-display);
  font-size:22px; font-weight:600;
  color:var(--gold-500);
  border:1.5px solid var(--gold-500);
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
}
.brand-name{font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:.2px;}

.doc-type-toggle{display:flex; background:var(--navy-800); border-radius:8px; padding:3px; gap:2px;}
.toggle-btn{
  border:none; background:transparent; color:var(--slate-300);
  padding:7px 16px; border-radius:6px; font-family:var(--font-body);
  font-weight:600; font-size:13px; cursor:pointer; letter-spacing:.3px;
}
.toggle-btn.active{background:var(--gold-500); color:var(--navy-950);}

.topbar-actions{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap;}
.topbar-actions select{
  background:var(--navy-800); color:#fff; border:1px solid var(--navy-700);
  padding:7px 10px; border-radius:6px; font-size:13px; font-family:var(--font-body);
}
.export-group{display:flex; gap:6px; padding-left:10px; border-left:1px solid var(--navy-700);}

.btn{
  border:none; border-radius:6px; padding:7px 14px; font-size:13px; font-weight:600;
  font-family:var(--font-body); cursor:pointer; transition:transform .06s ease, opacity .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--gold-500); color:var(--navy-950);}
.btn-primary:hover{background:var(--gold-600);}
.btn-ghost{background:var(--navy-800); color:#fff; border:1px solid var(--navy-700);}
.btn-ghost:hover{background:var(--navy-700);}
.btn-tiny{padding:5px 10px; font-size:12px;}
.btn-danger-outline{background:transparent; color:var(--danger); border:1px solid var(--danger); padding:4px 8px; font-size:11px;}

/* ============ WORKSPACE ============ */
.workspace{display:flex; flex:1; min-height:0;}
.panel{overflow-y:auto;}

.form-panel{
  width:400px; min-width:340px; background:var(--paper-white);
  border-right:1px solid var(--line); padding:18px 20px 60px;
}
.field-group{margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.field-group:last-child{border-bottom:none;}
.group-title{
  font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--navy-900); margin:0 0 12px; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
.group-title::before{content:''; width:5px; height:5px; background:var(--gold-500); border-radius:50%; display:inline-block;}

label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-600); margin-bottom:11px;}
input[type=text], input[type=date], input[type=number], input[type=email], input[type=file], textarea, select{
  display:block; width:100%; margin-top:5px;
  font-family:var(--font-body); font-size:13.5px; color:var(--ink-900);
  border:1px solid var(--line); border-radius:6px; padding:8px 10px;
  background:var(--mist-50);
}
textarea{resize:vertical; font-family:var(--font-body);}
input:focus, textarea:focus, select:focus{outline:2px solid var(--gold-500); outline-offset:1px; background:#fff;}

.inline-check{display:flex; align-items:center; gap:7px; font-weight:600;}
.inline-check input{width:auto; margin:0;}
.totals-config{display:flex; gap:16px; align-items:center; margin-top:10px;}
.inline-num{display:flex; align-items:center; gap:6px; font-weight:600;}
.inline-num input{width:70px; margin:0;}

/* line items */
.item-row{
  background:var(--mist-50); border:1px solid var(--line); border-radius:8px;
  padding:10px; margin-bottom:10px;
}
.item-row .row-line{display:flex; gap:8px;}
.item-row .row-line + .row-line{margin-top:8px;}
.item-row input, .item-row textarea{margin-top:0;}
.item-row .qty{width:70px; flex:none;}
.item-row .price{width:110px; flex:none;}
.item-row .desc-title{flex:1;}
.item-remove{
  background:none; border:none; color:var(--danger); cursor:pointer;
  font-size:11px; font-weight:700; padding:4px 0; margin-top:6px;
}

/* payment options */
.payment-row{
  background:var(--mist-50); border:1px solid var(--line); border-radius:8px;
  padding:10px; margin-bottom:10px;
}
.payment-row .ptype-select{margin-bottom:8px;}
.payment-fields{display:flex; flex-direction:column; gap:8px;}
.payment-fields input{margin-top:0;}
.payment-fields label{margin-bottom:0; font-size:11.5px;}

.saved-docs-list{font-size:12.5px;}
.saved-doc-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px dashed var(--line);
}
.saved-doc-item a{color:var(--navy-800); font-weight:600; text-decoration:none;}
.saved-doc-item a:hover{text-decoration:underline;}
.muted{color:var(--slate-500);}
.small{font-size:12px;}

/* ============ PREVIEW ============ */
.preview-panel{flex:1; background:var(--mist-100); display:flex; justify-content:center;}
.preview-scroller{padding:36px 24px; width:100%; display:flex; justify-content:center;}

.paper{
  background:var(--paper-white);
  box-shadow:0 10px 30px rgba(14,24,48,.15), 0 1px 3px rgba(14,24,48,.1);
  color:var(--ink-900);
  font-family:var(--font-body);
  position:relative;
}
.paper.size-a4{width:794px; min-height:1123px; padding:52px 56px;}
.paper.size-dl{width:530px; min-height:1000px; padding:40px 42px;}
.paper.size-receipt{width:302px; min-height:auto; padding:22px 18px; font-size:12px;}

/* --- Invoice/quotation document styling (Crestdigico-inspired) --- */
.doc-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:34px;}
.doc-logo-wrap{display:flex; align-items:center; gap:10px;}
.doc-logo-img{max-height:56px; max-width:150px; object-fit:contain;}
.doc-logo-fallback{
  font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--navy-900);
}
.doc-company-tagline{font-size:10.5px; color:var(--slate-500); letter-spacing:.4px; margin-top:2px;}
.doc-title{
  font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--ink-900);
  text-align:right;
}
.doc-title .stamp{
  display:inline-block; margin-top:4px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:1.5px; color:var(--gold-600); border:1px solid var(--gold-500);
  border-radius:20px; padding:3px 10px;
}

.doc-meta-row{display:flex; justify-content:space-between; gap:30px; margin-bottom:26px; flex-wrap:wrap;}
.meta-col h4{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--slate-500);
  margin:0 0 4px;
}
.meta-col p, .meta-col div{margin:0; font-size:13px; line-height:1.55; white-space:pre-line;}
.meta-col.right{text-align:right;}

.pay-box{background:var(--mist-50); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-top:10px;}
.pay-box h5{margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--navy-800);}
.pay-entry{font-size:12px; line-height:1.6; margin-bottom:6px;}
.pay-entry:last-child{margin-bottom:0;}
.pay-entry b{color:var(--ink-900);}

.doc-for{margin:22px 0 8px;}
.doc-for h4{font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--slate-500); margin:0 0 3px;}
.doc-for p{margin:0; font-size:14px; font-weight:600;}

table.items-table{width:100%; border-collapse:collapse; margin-top:22px;}
table.items-table thead th{
  text-align:left; background:var(--mist-100); color:var(--navy-900);
  font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  padding:11px 12px; border-bottom:2px solid var(--line);
}
table.items-table thead th.num{text-align:right;}
table.items-table tbody td{
  padding:14px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top;
}
table.items-table tbody td.num{text-align:right; font-family:var(--font-mono); white-space:nowrap;}
.item-title{font-weight:700; margin:0 0 2px;}
.item-desc{color:var(--ink-600); font-size:12.3px; white-space:pre-line;}

.totals-block{display:flex; justify-content:flex-end; margin-top:6px;}
.totals-table{width:280px; font-size:13px;}
.totals-table .trow{display:flex; justify-content:space-between; padding:7px 0;}
.totals-table .trow.grand{
  border-top:2px solid var(--navy-900); margin-top:4px; padding-top:12px;
  font-weight:700; font-size:16px; font-family:var(--font-mono);
}

.doc-notes{margin-top:26px; font-size:12px; color:var(--ink-600); line-height:1.6;}

.doc-footer{margin-top:44px; padding-top:16px; border-top:1px solid var(--line);}
.closing-line{font-family:var(--font-display); font-style:italic; color:var(--slate-300); font-size:16px;}
.footer-services{margin-top:14px; text-align:center; font-size:10.5px; color:var(--navy-800); line-height:1.7;}
.footer-services .label{color:var(--gold-600); font-weight:700; letter-spacing:.6px; text-transform:uppercase; display:block; margin-bottom:3px;}

/* Receipt-specific compact overrides */
.paper.size-receipt .doc-title{font-size:18px;}
.paper.size-receipt .doc-header{margin-bottom:14px;}
.paper.size-receipt .doc-meta-row{flex-direction:column; gap:10px; margin-bottom:14px;}
.paper.size-receipt .meta-col.right{text-align:left;}
.paper.size-receipt table.items-table thead{display:none;}
.paper.size-receipt table.items-table tbody td{display:block; border-bottom:none; padding:2px 0;}
.paper.size-receipt table.items-table tr{display:block; padding:8px 0; border-bottom:1px dashed var(--line);}
.paper.size-receipt table.items-table td.num{text-align:left; font-weight:700;}
.paper.size-receipt .totals-table{width:100%;}
.paper.size-receipt .footer-services{font-size:9px;}
.paper.size-receipt .closing-line{font-size:12px;}

/* Toast */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-950); color:#fff; padding:11px 20px; border-radius:8px;
  font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:999; border-left:3px solid var(--gold-500);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:900px){
  .workspace{flex-direction:column; overflow-y:auto;}
  .form-panel{width:100%; border-right:none; border-bottom:1px solid var(--line);}
  .preview-scroller{padding:20px 10px;}
  .paper.size-a4{width:100%; max-width:794px;}
}