:root{
  --bg:#f4f6fb;--card:#fff;--muted:#666;--accent:#2b6df6;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);margin:0;color:#222}
.container{max-width:1100px;margin:28px auto;padding:20px}
header h1{margin:0 0 12px}
main{display:grid;grid-template-columns:1fr 420px;gap:24px}
.form-section{background:var(--card);padding:16px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.preview-section{background:var(--card);padding:16px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.row{display:flex;gap:12px}
.row.small{align-items:center}
.col{flex:1;display:flex;flex-direction:column;gap:8px}
label{font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=tel]{padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;box-sizing:border-box}
h3{margin:16px 0 8px}
table{width:100%;border-collapse:collapse;margin-bottom:8px}
th,td{padding:8px;border-bottom:1px solid #f0f0f0;text-align:left}
td:nth-child(4){text-align:right}
.actions{margin-bottom:12px}
button{background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;border:0;cursor:pointer}
button#addItem{background:#4caf50}
.buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

.logo-preview{display:flex;gap:8px;align-items:center;margin-top:6px}
.logo-preview img{max-height:56px;border:1px solid #e6e9f2;border-radius:6px;padding:4px;background:#fff}
.small{background:#efefef;color:#333;padding:6px 8px;border-radius:6px;border:0;cursor:pointer}
.logo input[type=file]{padding:6px}

#invoicePreviewWrapper{overflow:auto;padding:12px;background:#f8f9fc;border-radius:6px;border:1px dashed #e6e9f2}
/* Disabled button style */
button:disabled{background:#ccc;color:#888;cursor:not-allowed}

/* Improved Invoice Design */
.invoice{width:100%;max-width:700px;margin:0 auto;background:#fff;padding:32px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.08);font-size:14px;color:#333}
.invoice-logo{max-height:56px;max-width:160px;object-fit:contain}

.inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid #2b6df6}
.inv-brand{display:flex;flex-direction:column;gap:10px}
.inv-title{font-size:28px;font-weight:700;color:#2b6df6;letter-spacing:1px}
.inv-info{text-align:right}
.inv-detail{display:flex;justify-content:flex-end;gap:10px;margin-bottom:4px;font-size:13px}
.inv-detail span:first-child{color:#888}
.inv-detail span:last-child{font-weight:500;color:#333}

.inv-parties{margin-bottom:24px}
.inv-party-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:4px}
.inv-party-name{font-size:16px;font-weight:600;color:#222;margin-bottom:2px}
.inv-party-detail{font-size:13px;color:#555;line-height:1.5}

.inv-items{width:100%;border-collapse:collapse;margin-bottom:20px}
.inv-items th{background:#f7f9fc;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#555;border-bottom:2px solid #e6e9f2;text-align:left}
.inv-items td{padding:12px;border-bottom:1px solid #f0f2f5;vertical-align:top}
.inv-items .desc-col{width:50%}
.inv-items .qty-col{width:12%;text-align:center}
.inv-items .price-col,.inv-items .amt-col{width:19%;text-align:right}
.inv-items th.qty-col{text-align:center}
.inv-items th.price-col,.inv-items th.amt-col{text-align:right}
.inv-items tbody .text-center{text-align:center}
.inv-items tbody .text-right{text-align:right}
.inv-items .empty-msg{text-align:center;color:#aaa;font-style:italic;padding:20px}

.inv-summary{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:20px}
.inv-summary-row{display:flex;justify-content:space-between;width:220px;font-size:14px;padding:6px 0;border-bottom:1px solid #f0f2f5}
.inv-summary-row span:first-child{color:#666}
.inv-summary-row span:last-child{font-weight:500}
.inv-summary-row.inv-total{border-bottom:none;border-top:2px solid #2b6df6;padding-top:10px;margin-top:4px}
.inv-summary-row.inv-total span{font-size:16px;font-weight:700;color:#2b6df6}

.inv-notes{background:#f9fafb;padding:12px 16px;border-radius:6px;font-size:13px;color:#555;margin-bottom:16px}
.inv-footer{text-align:center;font-size:13px;color:#888;padding-top:16px;border-top:1px solid #eee}

.hidden{display:none}

.preview-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.preview-toolbar .small{background:#efefef;color:#333}

/* When preview is open, make preview occupy full width and hide the form */
body.preview-open main{grid-template-columns:1fr}
body.preview-open .form-section{display:none}
body.preview-open .preview-section{display:block;grid-column:1/-1}

@media (max-width:1000px){main{grid-template-columns:1fr;}}

/* Mobile / Tablet improvements */
@media (max-width:700px){
  .container{padding:12px}
  .row{flex-direction:column}
  .row.small{gap:6px}
  .col{width:100%}
  .buttons{flex-direction:column;align-items:stretch}
  .buttons button{width:100%}
  button{padding:10px 12px}
  .logo-preview{gap:10px}
  .logo-preview img{max-height:48px}
  #invoicePreviewWrapper{padding:8px}
  .invoice{padding:14px}
  #itemsTable{display:block;overflow:auto;width:100%}
}

@media (max-width:480px){
  body{font-size:14px}
  header h1{font-size:20px}
  label{font-size:13px}
  input[type=text],input[type=email],input[type=date],input[type=number]{padding:10px}
  .invoice{padding:12px}
  .invoice .items th,.invoice .items td{font-size:13px}
  .logo-preview img{max-height:40px}
  .small{padding:6px}
  .actions button, #addItem{width:100%}
}