/* ===== INVOICE MAKER =====
   Invoice-specific rules; the shared shell lives in maker.css. */

/* ── Logo ── */
.logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-box {
  width: 92px; height: 60px; border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bg); flex-shrink: 0;
}
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-btn {
  font-size: 13px; font-weight: 500; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.file-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Line items ── */
.items-head, .item-row {
  display: grid; grid-template-columns: minmax(0,1fr) 74px 104px 96px 32px; gap: 8px; align-items: center;
}
body.per-line-tax .items-head, body.per-line-tax .item-row {
  grid-template-columns: minmax(0,1fr) 66px 92px 66px 92px 32px;
}
.i-tax { display: none; }
body.per-line-tax .i-tax, body.per-line-tax .col-tax { display: block; }
.col-tax { display: none; }

.items-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-light); padding: 0 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.items-head .num { text-align: right; }
#items-body { display: flex; flex-direction: column; gap: 8px; }
.item-row input {
  font-family: var(--font); font-size: 13.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; width: 100%;
}
.item-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.item-row .i-qty, .item-row .i-price, .item-row .i-tax { text-align: right; }
.item-row .i-amt {
  font-size: 13.5px; font-weight: 600; text-align: right; color: var(--text);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
}
.item-row .i-del {
  background: none; border: none; color: var(--text-light); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 4px; border-radius: 6px;
}
.item-row .i-del:hover { color: #DC2626; background: rgba(220,38,38,0.08); }

.add-item {
  margin-top: 12px; background: none; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text-muted); font-family: var(--font); font-size: 13.5px; font-weight: 500;
  padding: 9px 14px; cursor: pointer; width: 100%;
}
.add-item:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* ── Totals summary ── */
#totals { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.tot-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13.5px; color: var(--text-muted); padding: 4px 0; font-variant-numeric: tabular-nums;
}
.tot-row.tot-strong { font-size: 15px; font-weight: 700; color: var(--text); }

@media (max-width: 620px) {
  .items-head { display: none; }
  .item-row, body.per-line-tax .item-row {
    grid-template-columns: 1fr 1fr 32px; gap: 7px;
    padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  }
  .item-row .i-desc { grid-column: 1 / -1; }
  .item-row .i-amt { grid-column: 1 / 3; text-align: left; }
  .item-row .i-del { grid-row: 3; }
  body.per-line-tax .i-tax { display: block; }
}