/* The app's own styles (overrides the framework's empty css/app.css).
   Prefer plain semantic HTML (base.css styles it) and the tokens in theme.css; add classes only when needed. */

/* BigBiznis green (dark mode derives its lighter tone from it). */
:root {
  --app-accent: #14854f;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.muted { color: var(--app-muted); }

/* The invoice form: a wide dialog with a table of lines. */
dialog.wide > article { width: min(72rem, 96vw); max-width: none; }
.invoice-lines { margin-bottom: var(--app-space); }
.invoice-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.invoice-add select { flex: 1 1 14rem; margin: 0; }
.invoice-add button { width: auto; margin: 0; }
.invoice-lines-table td { vertical-align: top; }
.invoice-lines-table :is(input, select) { margin: 0 0 0.25rem; min-width: 5rem; }
.invoice-lines-table td:first-child { min-width: 14rem; }
.invoice-lines-table [data-invoice-line-total] { white-space: nowrap; padding-top: 0.75rem; }

/* The invoice's page: room above its lines. */
.invoice-items { margin-top: 1.5rem; }

/* The remove button of a line in the invoice form: a square with the icon whole. */
.invoice-lines-table td:last-child { width: 3rem; }
.invoice-lines-table [data-invoice-remove] { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; padding: 0; margin: 0.15rem 0 0; }
.invoice-lines-table [data-invoice-remove] svg { width: 1.15rem; height: 1.15rem; flex: none; }