/* ===========================================================
   invoice.css — styles for GSInvoice (Tax Invoice modal +
   Retail cashier bill modal). Add this file alongside your
   existing styles.css — it reuses the same CSS variables
   (--teal, --gold, --cream, --border, --ink, etc.) already
   defined in :root there, so link it AFTER styles.css.
   =========================================================== */

.gs-inv-toprow{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:6px;
}

.gs-inv-vatrow{
  display:flex;
  align-items:flex-end;
  gap:20px;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:14px;
}
.gs-inv-vatrow .gs-radio-row{ margin-top:4px; }

.gs-inv-parties{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:16px;
}
.gs-inv-party-head{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--gold);
  margin-bottom:8px;
}

table.gs-inv-items th{ font-size:10.5px; }
table.gs-inv-items td{ padding:6px 8px; }
table.gs-inv-items input{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  font-size:12.5px;
  font-family:'Inter',sans-serif;
  padding:4px 6px;
  border-radius:5px;
  color:var(--ink);
}
table.gs-inv-items input:hover,
table.gs-inv-items input:focus{
  border-color:var(--border);
  background:var(--cream);
  outline:none;
}
table.gs-inv-items input[type="number"]{ text-align:right; }

.gs-inv-totals{
  margin-top:14px;
  margin-left:auto;
  width:320px;
  border-top:1px solid var(--border);
  padding-top:10px;
}
.gs-inv-total-line{
  display:flex;
  justify-content:space-between;
  padding:4px 0;
  font-size:13px;
  color:var(--ink);
}
.gs-inv-total-line.grand{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:16px;
  border-top:1px solid var(--border);
  margin-top:4px;
  padding-top:8px;
}

/* Retail cashier bill modal re-uses .gs-receipt from styles.css,
   these extras just tighten spacing around the VAT toggle row. */
.gs-inv-vatrow label{ font-size:12px; }