/* InventoryServer additions layered on top of the BudgieServer base stylesheet. */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.small { font-size: .8em; color: #889; }
.muted.small { color: #889; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 1rem; }
.chip { background: #eef2f0; border-radius: 999px; padding: .15rem .6rem; font-size: .82rem; }

.badge { display: inline-block; border-radius: 6px; padding: .1rem .5rem; font-size: .82rem; font-weight: 600; }
.badge--warn { background: #fdecea; color: #b3261e; }
.badge--ok { background: #e7f4e8; color: #2e7d32; }
.badge--muted { background: #eee; color: #666; }

table.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); margin: .5rem 0 1.5rem; }
table.tbl th, table.tbl td { padding: .55rem .7rem; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
table.tbl thead th { background: #f6f8f7; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #567; }
table.tbl tbody tr:hover { background: #f9fbfa; cursor: pointer; }
table.tbl tfoot th { background: #f6f8f7; border-bottom: 0; }
table.tbl a { text-decoration: none; }

.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .1rem; border-bottom: 1px solid #f0f0f0; }
.kv:last-child { border-bottom: 0; }
.kpis { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .6rem 0 1rem; color: #456; }
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filterbar input[type=search], .filterbar select { padding: .4rem .6rem; border: 1px solid #cdd6d2; border-radius: 8px; }
.check { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
.row .num { margin-left: auto; font-weight: 600; }
/* a Lieferanten row that links to the Beleg behind its price */
.row--link { cursor: pointer; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 8px; }
.row--link:hover { background: #f4f7f5; }
.row--link .row__chevron { font-weight: 400; margin-left: .3rem; }

/* forms */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.field--wide { grid-column: 1 / -1; }
.formgrid .field label { display: block; font-size: .8rem; color: #567; margin-bottom: .2rem; }
.formgrid input, .formgrid select, .formgrid textarea { width: 100%; box-sizing: border-box; padding: .4rem .5rem; border: 1px solid #cdd6d2; border-radius: 8px; font: inherit; }
.formgrid .check { display: flex; align-items: center; }
.formgrid .check label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.formgrid .check input { width: auto; }
.inline-qty { display: inline-flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.inline-qty input { width: 4.5rem; text-align: right; padding: .25rem .4rem; border: 1px solid #cdd6d2; border-radius: 6px; font: inherit; }
@media (max-width: 560px) { .formgrid { grid-template-columns: 1fr; } }

/* Wider page shell for document-heavy screens (invoice review + compare) so the Beleg isn't crammed
   into ~430px of a 900px page. minmax(0,…) lets the columns shrink instead of overflowing. */
.content--wide { max-width: min(1600px, 96vw); }

/* invoice review (document beside the form) */
.review { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.content--wide .review__doc { position: sticky; top: 1rem; }   /* keep the Beleg in view while scrolling the form (full page only) */
.review__doc img { max-width: 100%; border: 1px solid #ddd; border-radius: 8px; }
.docframe { width: 100%; height: 78vh; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.docopen { display: inline-block; margin-bottom: .4rem; font-size: .85rem; }
.review__form table.tbl input, .review__form table.tbl select { width: 100%; box-sizing: border-box; padding: .3rem .4rem; border: 1px solid #cdd6d2; border-radius: 6px; font: inherit; }
.review__form .qcell { text-align: right; }
.newline input::placeholder { color: #9aa; }
.confirmbox { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; }
.rawwrap { margin-top: 1rem; }
.rawtext { white-space: pre-wrap; font-size: .75rem; background: #f6f8f7; padding: .6rem; border-radius: 8px; max-height: 320px; overflow: auto; }
@media (max-width: 900px) { .review { grid-template-columns: 1fr; } .docframe { height: 52vh; } }

/* invoice review MODAL (opened from the /rechnungen list — no page reload) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,25,.55); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 2.5vh 1rem; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; width: min(1400px, 97vw); max-height: 95vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,.32); padding: .9rem 1.25rem 1.4rem; }
.modal__head { display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 1;
  background: #fff; padding: .3rem 0 .6rem; border-bottom: 1px solid var(--border, #e2e8e5); margin-bottom: .8rem; }
.modal__head strong { flex: 1 1 auto; font-size: 1.05rem; }
.modal__full { text-decoration: none; font-size: 1.1rem; }
.modal__close { background: none; border: none; font-size: 1.7rem; line-height: 1; color: #889; cursor: pointer; padding: 0 .25rem; }
.modal__close:hover { color: #000; }
.modal .docframe { height: 64vh; }
.modal .review__doc .empty { min-height: 12rem; display: flex; flex-direction: column; justify-content: center; text-align: center; }
@media (max-width: 900px) { .modal .docframe { height: 44vh; } }
/* 'Teil anlegen' pop-up — layered ABOVE the invoice modal */
.modal-backdrop--top { z-index: 1100; align-items: center; }
.modal--narrow { width: min(560px, 95vw); }
.modal--mid { width: min(880px, 95vw); }   /* orders pop-up (part_orders_modal) — a compact table, not a full doc */
/* per-line part cell: dropdown + "+ Teil anlegen" button side by side */
.partcell { display: flex; gap: .35rem; align-items: center; }
.partcell select { flex: 1 1 auto; min-width: 8rem; }
.partcell .btn { flex: 0 0 auto; white-space: nowrap; }

/* inline per-row project picker on the /rechnungen list */
.tbl select.rowproj { padding: .25rem .3rem; border: 1px solid #cdd6d2; border-radius: 6px;
  font: inherit; max-width: 11rem; background: #fff; cursor: pointer; }
.notice--ok { background: #e8f5e9; color: #1b5e20; }   /* success (e.g. "Gespeichert ✓") */
/* dashboard: "Zu prüfen" alert stat + per-row badges */
.stat--alert { background: #fff8e1; box-shadow: inset 0 0 0 2px #f0c000; }
.rowbadges { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
/* cancelled/returned invoices: muted + struck-through amount (excluded from stock) */
.tbl tr.inv--cancelled { opacity: .6; }
.tbl tr.inv--cancelled td.num:last-child { text-decoration: line-through; }
/* compare two invoices side by side */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.compare__doc { width: 100%; height: 46vh; border: 1px solid #ddd; border-radius: 8px; background: #fff; margin-top: .4rem; }
.compare .kvs { display: grid; gap: .2rem; font-size: .9rem; margin-bottom: .6rem; }
.compare .kvs span { color: #6a7a72; display: inline-block; min-width: 8.5rem; }
.compare .kvs > div { word-break: break-word; }
.cmphint { background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; padding: .4rem .6rem; margin-bottom: .6rem; font-size: .92rem; }
.cmpraw { margin-top: .6rem; }
.cmpraw > summary { cursor: pointer; color: #2e7d32; font-size: .85rem; font-weight: 600; padding: .2rem 0; }
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }
/* invoice list filter bar: compact labelled dropdowns + exclude toggles */
.filterbar .fltr { display: inline-flex; flex-direction: column; gap: .1rem; font-size: .7rem; color: #5a6b63; }
.filterbar .fltr select { font-size: .9rem; padding: .3rem .4rem; }
.filterbar .check { font-size: .8rem; color: #5a6b63; }

/* inline vendor chips on the BOM page */
.vendcell { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.vchip { background: #eef2f0; border-radius: 6px; padding: .1rem .4rem; font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; }
.vchip a { text-decoration: none; }
.vchip__x { border: 0; background: none; cursor: pointer; color: #b3261e; font-size: .9rem; line-height: 1; padding: 0; }
.vendadd { display: inline; }
.vendadd > summary { cursor: pointer; list-style: none; background: #e7f4e8; color: #2e7d32; border-radius: 6px; padding: .05rem .45rem; font-size: .8rem; }
.vendadd > summary::-webkit-details-marker { display: none; }
.vendform { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.vendform input { padding: .2rem .35rem; border: 1px solid #cdd6d2; border-radius: 6px; font: inherit; font-size: .8rem; }

/* a part's actual orders (matched invoice lines), shown on the product BOM + part detail */
.orders { margin: .6rem 0 1.2rem; }
.orders__head { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: baseline; margin-bottom: .6rem; }
.orders__head .ohd { color: #5a6b63; font-size: .9rem; }
.price-diff { color: #b3261e; }   /* an order price differs from the catalogue (Excel) price */

/* Anhänge — extra documents kept beside an invoice's primary Beleg (merge keeps the dropped scan; upload) */
.attachments { margin-top: .8rem; border-top: 1px solid #e3e9e6; padding-top: .6rem; }
.attachments__head { font-size: .8rem; font-weight: 600; color: #5a6b63; margin-bottom: .4rem; }
.att { display: flex; align-items: center; gap: .5rem; background: #f4f7f5; border: 1px solid #e3e9e6;
  border-radius: 8px; padding: .35rem .5rem; margin-bottom: .35rem; }
.att__thumb { flex: 0 0 auto; line-height: 0; }
.att__thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.att__icon { flex: 0 0 auto; font-size: 1.3rem; }
.att__name { flex: 1 1 auto; text-decoration: none; color: #2e7d32; font-size: .9rem; word-break: break-word; }
.att__note { flex: 0 0 auto; }
.att__del { flex: 0 0 auto; display: inline; margin: 0; }
.att__del .iconbtn { border: 0; background: none; cursor: pointer; color: #b3261e; font-size: 1rem; line-height: 1; padding: .1rem .3rem; }
.att-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.att-upload input[type=file] { flex: 1 1 12rem; font-size: .82rem; }
.att-upload .att-note { flex: 1 1 8rem; padding: .35rem .45rem; border: 1px solid #cdd6d2; border-radius: 6px; font: inherit; font-size: .85rem; }