/* =============================================================
   INVOICE / ENTRY SCREENS  ·  opt-in via .inv-form
   -------------------------------------------------------------
   Applies to the data-entry screens (فواتير المبيعات، الحجز،
   المرتجعات …): tighter rhythm, readable field hierarchy, real
   responsiveness for the dense karat rows, and polished payment
   sections. Purely presentational — no markup or field is
   required to change; add `inv-form` to the page's outer card:

       <div class="card card-info inv-form">

   Everything keys off the design tokens, so light/dark themes and
   the accent picker keep working with no extra rules.
   ============================================================= */

/* -------------------------------------------------------------
   1 · RHYTHM — these screens nest .card-body inside .card-body
   three levels deep, which triples the padding. Collapse the
   wrappers and let the cards' own margin do the spacing.
   ------------------------------------------------------------- */
/* the outer body sits inside the <form> on these screens */
.inv-form > .card-body,
.inv-form > form > .card-body {
  padding: var(--space-4);
}

.inv-form .card-body > .card-body {
  padding: 0;
}

.inv-form .card-body > .card-body > .card,
.inv-form .card-body > .card {
  margin-bottom: var(--space-4);
}

.inv-form .card-body > .card-body:last-child > .card:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------
   2 · SECTION CARDS — lighter than the page card so the hierarchy
   reads: page card → section → fields.
   ------------------------------------------------------------- */
.inv-form .card-secondary {
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-small);
}

.inv-form .card-secondary:hover {
  box-shadow: var(--shadow-small);
}

.inv-form .card-secondary > .card-header {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

.inv-form .card-secondary > .card-header .card-title {
  font-size: var(--fs-md);
}

.inv-form .card-secondary > .card-body {
  padding: var(--space-4);
}

/* A few sections carry a header with no title at all — that renders as a bare
   coloured band. `:empty` only catches the truly empty ones, so also drop the
   ones holding nothing but whitespace (no element child). */
.inv-form .card-secondary > .card-header:empty {
  display: none;
}

.inv-form .card-secondary > .card-header:not(:has(*)) {
  display: none;
}

/* -------------------------------------------------------------
   3 · FIELDS — label above control, computed fields visibly inert
   ------------------------------------------------------------- */
.inv-form label:not(.custom-file-upload),
.inv-form .control-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  line-height: var(--lh-tight);
}

.inv-form .form-control {
  border-radius: var(--radius-small);
}

/* readonly / calculated values read as output, not input */
.inv-form .form-control[readonly],
.inv-form .form-control[disabled] {
  background-color: var(--surface-2);
  color: var(--text-secondary);
  border-style: dashed;
  cursor: default;
}

.inv-form .form-control[readonly]:focus,
.inv-form .form-control[disabled]:focus {
  box-shadow: none;
}

/* the running totals are the numbers people actually look for */
.inv-form #tot_wg,
.inv-form #tot_w1,
.inv-form #tot_paid,
.inv-form #remainder {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-size: var(--fs-md);
}

/* file pickers: the fixed 90px side padding blows past narrow screens */
.inv-form .custom-file-upload {
  padding: 6px 24px;
  border-radius: var(--radius-small);
  background-color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.inv-form .custom-file-upload:hover {
  background-color: var(--accent-hover);
}

.inv-form input[type="file"] {
  max-width: 100%;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
}

/* -------------------------------------------------------------
   4 · LAYOUT TABLES — the header/total blocks use bare <table>
   for label/field pairs. Give them width and let them stack on
   phones instead of squeezing into two columns.
   ------------------------------------------------------------- */
.inv-form table:not(.table) {
  width: 100%;
}

.inv-form table:not(.table) td {
  padding: 5px 0;
  vertical-align: middle;
}

.inv-form table:not(.table) td:first-child {
  width: 190px;
  padding-inline-end: var(--space-3);
}

.inv-form table:not(.table) td:first-child label {
  margin-bottom: 0;
}

/* On wide screens a label/field block laid out with a bare <table> becomes one
   long stack with absurdly wide inputs. Above 1200px, lay those pairs out in
   two columns instead. Two cases: the table sits straight in the card body, or
   it sits alone in a .col-7 (GHC12's invoice header, where the other half of
   the row only appears once there's a receipt thumbnail). */
@media (min-width: 1200px) {
  .inv-form .row > .col-7:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .inv-form .card-body > table:not(.table),
  .inv-form .inv-fields > table:not(.table),
  .inv-form .row > .col-7:only-child > table:not(.table) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .inv-form .card-body > table:not(.table) > tbody,
  .inv-form .inv-fields > table:not(.table) > tbody,
  .inv-form .row > .col-7:only-child > table:not(.table) > tbody {
    display: contents;
  }

  .inv-form .card-body > table:not(.table) tr,
  .inv-form .inv-fields > table:not(.table) tr,
  .inv-form .row > .col-7:only-child > table:not(.table) tr {
    display: flex;
    align-items: center;
  }

  .inv-form .card-body > table:not(.table) td,
  .inv-form .inv-fields > table:not(.table) td,
  .inv-form .row > .col-7:only-child > table:not(.table) td {
    display: block;
  }

  .inv-form .card-body > table:not(.table) td:first-child,
  .inv-form .inv-fields > table:not(.table) td:first-child,
  .inv-form .row > .col-7:only-child > table:not(.table) td:first-child {
    flex: 0 0 150px;
    width: auto;
  }

  .inv-form .card-body > table:not(.table) td:last-child,
  .inv-form .inv-fields > table:not(.table) td:last-child,
  .inv-form .row > .col-7:only-child > table:not(.table) td:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Receipt thumbnail sits beside the fields without squeezing them — and it is
   the fields column that flexes, so opening an existing invoice looks the same
   as creating one. */
.inv-form .inv-fields {
  min-width: 0;
}

.inv-form .inv-thumb img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
}

@media (max-width: 767.98px) {
  .inv-form .inv-thumb {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .inv-form table:not(.table),
  .inv-form table:not(.table) tbody,
  .inv-form table:not(.table) tr,
  .inv-form table:not(.table) td {
    display: block;
    width: 100%;
  }

  .inv-form table:not(.table) tr {
    margin-bottom: var(--space-3);
  }

  .inv-form table:not(.table) td:first-child {
    width: auto;
    padding: 0 0 4px;
  }
}

/* -------------------------------------------------------------
   5 · RESPONSIVE COLUMNS — the karat rows are 7 × .col-2 (= 14
   Bootstrap columns), so they wrap badly on every screen and are
   unusable below a desktop. Bare .col-N carries no breakpoint of
   its own, so re-map it per width. (.col-md-*/.col-sm-* untouched.)
   ------------------------------------------------------------- */
.inv-form .row > .col,
.inv-form .row > [class*="col-"] {
  margin-bottom: var(--space-2);
}

/* Plain `.col` (used by the customer block) carries no breakpoint at all and
   is missed by the global `[class*="col-"]` rules — stack it like the rest. */
@media (max-width: 767.98px) {
  .inv-form .row > .col,
  .inv-form .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ≥1400px — the full 7-across karat row fits on one line */
@media (min-width: 1400px) {
  .inv-form .row > .col-2 {
    flex: 0 0 14.2857%;
    max-width: 14.2857%;
  }
}

/* 992–1399px — four per line */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .inv-form .row > .col-1,
  .inv-form .row > .col-2 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* 576–991px (tablet) — three, then two per line */
@media (min-width: 576px) and (max-width: 991.98px) {
  .inv-form .row > .col-1,
  .inv-form .row > .col-2 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  .inv-form .row > .col-3,
  .inv-form .row > .col-4,
  .inv-form .row > .col-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .inv-form .row > .col-6,
  .inv-form .row > .col-7,
  .inv-form .row > .col-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* separators between karat rows shouldn't eat the screen */
.inv-form .pay-body hr {
  margin: var(--space-3) 0;
  border-top-color: var(--border-color);
}

/* -------------------------------------------------------------
   6 · ITEMS TABLE — dense, scrollable, inputs that stay usable
   (the design system already wraps it in a scroll container and
   makes the head sticky).
   ------------------------------------------------------------- */
.inv-form .table thead th {
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.inv-form .table td,
.inv-form .table th {
  padding: 0.45rem 0.5rem;
  vertical-align: middle;
  font-size: var(--fs-sm);
}

.inv-form .table .form-control {
  min-width: 108px;
  height: 32px;
  padding: 2px 8px;
  font-size: var(--fs-sm);
}

.inv-form .table img {
  border-radius: var(--radius-small);
  object-fit: cover;
}

/* -------------------------------------------------------------
   7 · PAYMENT SECTIONS — collapsible headers (see
   partials/pay_sections.html) get the polished treatment here.
   ------------------------------------------------------------- */
.inv-form .pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.inv-form .pay-head .card-title {
  float: none !important;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inv-form .pay-head:hover {
  background-color: rgba(0, 0, 0, 0.12);
}

.inv-form .pay-caret {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.9;
}

.inv-form .pay-badge {
  float: none !important;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

/* a section holding real money reads green even while collapsed */
.inv-form .pay-badge.badge-success {
  background-color: var(--success);
  border-color: transparent;
}

/* the placeholder shown before the first piece is added */
.inv-form #pay-hint {
  border: 1px dashed var(--border-strong);
  background-color: var(--surface-2);
  color: var(--text-secondary);
  border-radius: var(--radius-medium);
  font-size: var(--fs-sm);
}

/* -------------------------------------------------------------
   8 · ACTION BAR — keep حفظ / طباعه reachable on long invoices
   ------------------------------------------------------------- */
.inv-form .card-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background-color: var(--surface);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
}

.inv-form .card-footer .btn {
  margin-bottom: 4px;
}

@media (max-width: 767.98px) {
  .inv-form .card-footer {
    position: static;
    box-shadow: none;
  }
}

/* -------------------------------------------------------------
   9 · SCANNER — the barcode box shouldn't overflow small screens
   ------------------------------------------------------------- */
.inv-form #scanner-container {
  max-width: 100%;
  border-color: var(--border-color);
  border-radius: var(--radius-medium);
}