/* ============================================================
 * doc-builder.css — Shared styles for line-item document tools
 *   (Quotation Generator + Purchase Order Generator + Receipt)
 * ============================================================ */

.db-wrap{max-width:1180px; margin:24px auto; padding:0 16px}
.db-toolbar{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.db-toolbar h1{margin:0 0 4px; font-size:1.4rem; letter-spacing:-.01em}
.db-toolbar p{margin:0; color:var(--ink-2); font-size:.9rem}
.db-actions{display:flex; gap:8px; flex-wrap:wrap}
.db-btn{padding:10px 16px; border:1.5px solid var(--line); border-radius:10px; background:#fff; font-weight:600; font-size:.9rem; cursor:pointer; color:var(--ink); transition:.15s; display:inline-flex; align-items:center; gap:8px}
.db-btn:hover{border-color:var(--green); color:var(--green-700)}
.db-btn.primary{background:var(--green); border-color:var(--green); color:#fff}
.db-btn.primary:hover{background:var(--green-700); color:#fff}
.db-btn.danger:hover{border-color:#e74c3c; color:#e74c3c}

.db-grid{display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start}
.db-paper{background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; box-shadow:0 20px 40px -30px rgba(0,0,0,.15)}
.db-side{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; position:sticky; top:80px}
.db-side h4{margin:0 0 12px; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2)}
.db-chip{display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:#fff}
.db-chip label{font-size:.85rem; color:var(--ink-2); flex-shrink:0}
.db-chip select, .db-chip input[type="color"]{background:transparent; border:0; outline:none; font-weight:600; color:var(--ink); cursor:pointer; width:100%; font-family:inherit}
.db-chip input[type="color"]{width:36px; height:24px; padding:0; border-radius:6px}
.db-supply{display:flex; gap:6px; margin-top:8px}
.db-supply button{flex:1; padding:8px 6px; border:1.5px solid var(--line); border-radius:8px; background:#fff; font-weight:600; font-size:.8rem; cursor:pointer; color:var(--ink-2)}
.db-supply button.active{background:var(--green-50); border-color:var(--green); color:var(--green-700)}

.db-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.db-logo{width:120px; height:80px; border:2px dashed var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; background:#fafbfc}
.db-logo:hover{border-color:var(--green); background:var(--green-50)}
.db-logo img{max-width:100%; max-height:100%; object-fit:contain}
.db-logo .db-logo-empty{color:var(--ink-2); font-size:.85rem; text-align:center}
.db-logo .db-logo-empty i{display:block; font-size:1.4rem; margin-bottom:4px}
.db-logo-remove{position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; align-items:center; justify-content:center; font-size:.75rem; cursor:pointer; color:#e74c3c}
.db-logo.has-img .db-logo-remove{display:flex}
.db-title{text-align:right; flex:1}
.db-title h2{margin:0; font-size:2rem; letter-spacing:-.02em; color:var(--ink)}
.db-docno{display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:4px 12px; border:1px solid var(--line); border-radius:8px; background:#fafbfc}
.db-docno span{color:var(--ink-2); font-weight:600}
.db-docno input{background:transparent; border:0; outline:none; font-weight:700; color:var(--ink); font-family:inherit; width:150px}

.db-meta{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:24px}
.db-field{display:flex; flex-direction:column; gap:6px}
.db-field label{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); font-weight:700}
.db-field input, .db-field textarea, .db-field select{padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:.95rem; font-family:inherit; color:var(--ink); background:#fff}
.db-field input:focus, .db-field textarea:focus, .db-field select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(39,174,96,.12)}
.db-field textarea{resize:vertical; min-height:70px}

.db-parties{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:26px}

.db-items-wrap{overflow-x:auto; margin-bottom:20px}
.db-items{width:100%; border-collapse:collapse; min-width:640px}
.db-items thead th{background:var(--green-50); color:var(--green-700); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding:10px 8px; text-align:left; font-weight:700; border-bottom:2px solid var(--green-100)}
.db-items thead th.num{text-align:right}
.db-items tbody td{padding:6px 4px; border-bottom:1px solid var(--line)}
.db-items input{width:100%; padding:8px; border:1px solid transparent; border-radius:6px; font-size:.9rem; font-family:inherit; background:transparent}
.db-items input:focus{outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(39,174,96,.1)}
.db-items input[type="number"]{text-align:right; font-variant-numeric:tabular-nums}
.db-items select{padding:8px; border:1px solid transparent; border-radius:6px; font-size:.9rem; font-family:inherit; background:transparent; cursor:pointer}
.db-items select:focus{outline:none; border-color:var(--green); background:#fff}
.db-items .col-amt{text-align:right; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; padding-right:12px; font-size:.95rem; white-space:nowrap}
.db-items .col-rm{width:36px}
.db-items .col-rm button{width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center}
.db-items .col-rm button:hover{background:#fef2f2; border-color:#fca5a5; color:#e74c3c}

.db-add-row{padding:10px 16px; border:1.5px dashed var(--line); border-radius:10px; background:transparent; color:var(--green-700); font-weight:600; cursor:pointer; width:100%; margin-bottom:20px; font-size:.9rem}
.db-add-row:hover{border-color:var(--green); background:var(--green-50)}

.db-bottom{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; margin-top:20px}
.db-notes-terms{display:flex; flex-direction:column; gap:16px}
.db-totals{background:var(--bg-3, #fafbfc); border:1px solid var(--line); border-radius:12px; padding:18px}
.db-totals .row{display:flex; justify-content:space-between; padding:8px 0; font-size:.95rem}
.db-totals .row.total{border-top:2px solid var(--green); padding-top:12px; margin-top:6px; font-size:1.1rem; font-weight:700}
.db-totals .row.total .val{color:var(--green-700); font-size:1.3rem}
.db-totals .row .lab{color:var(--ink-2)}
.db-totals .row .val{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.db-amt-words{margin-top:12px; padding:12px; background:#fff; border:1px dashed var(--green-100); border-radius:8px; font-size:.82rem; color:var(--ink-2); font-style:italic}
.db-amt-words strong{color:var(--ink); font-style:normal}

.db-sig{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end}
.db-sig-box{width:200px; text-align:center}
.db-sig-drop{border:2px dashed var(--line); border-radius:10px; height:80px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-bottom:8px; background:#fafbfc; overflow:hidden; position:relative}
.db-sig-drop:hover{border-color:var(--green); background:var(--green-50)}
.db-sig-drop img{max-width:100%; max-height:100%; object-fit:contain}
.db-sig-drop span{color:var(--ink-2); font-size:.82rem}
.db-sig-label{font-size:.72rem; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700; border-top:1px solid var(--ink-2); padding-top:6px}
.db-sig-remove{position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid var(--line); display:none; align-items:center; justify-content:center; font-size:.7rem; cursor:pointer; color:#e74c3c}
.db-sig-drop.has-img .db-sig-remove{display:flex}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width:960px){
  .db-grid{grid-template-columns:1fr}
  .db-side{position:static}
  .db-bottom{grid-template-columns:1fr}
  .db-meta{grid-template-columns:1fr 1fr}
  .db-parties{grid-template-columns:1fr}
}
@media (max-width:640px){
  .db-paper{padding:20px}
  .db-head{flex-direction:column; align-items:flex-start; gap:14px}
  .db-title{text-align:left; width:100%}
  .db-docno input{width:120px}
  .db-meta{grid-template-columns:1fr}
  .db-toolbar h1{font-size:1.2rem}
}