/* ---- Requisition: Google-Forms-styled "Requisition Form" panel ---- */
/* See js/features/requisition/RequisitionController.js and the reference
   FORM vs Print Preview screenshots this was built from. Layout follows
   the same panel-with-its-own-scroll-wrapper shape as reports.css. */

.requisition-panel{ padding: 0 !important; overflow: hidden; }
.requisition-scroll{ height: 100%; overflow-y: auto; padding: 20px 8px 40px; flex: 1; min-width: 0; }
.requisition-layout{
  max-width: 700px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}

.requisition-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; box-shadow: var(--shadow);
}
/* Nod to the reference Google Form's own purple header bar — scoped only
   to this card, everything else (buttons, focus rings) stays on the
   app's usual --accent so this doesn't read as a second, unrelated
   design system bolted on. */
.requisition-card-bar{ height: 10px; background: linear-gradient(90deg, #673ab7, #7e57c2); }
.requisition-card-body{ padding: 20px 24px 22px; }
.requisition-title{ font-family: var(--font-display); font-size: 24px; margin: 0 0 4px; color: var(--ink); }
.requisition-subtitle{ font-size: 13px; color: var(--ink-soft); margin: 0; }

.requisition-field-card{ padding: 20px 24px; }
.requisition-field-card .field:last-of-type{ margin-bottom: 0; }
.req-star{ color: var(--bad); }
.requisition-hint{ font-size: 11.5px; color: var(--ink-faint); margin: -2px 0 8px; }

/* Gadget Type + Qty rows — see RequisitionController._addItemRow(). Each
   row shows just the one category picked for it (suggested via a
   dropdown built from Inventory Assets categories, each labeled with its
   live count at the default stock room — see _openCategorySuggestions);
   "+ Add row" is how another gets added, matching the reference FORM
   view exactly. */
.requisition-items{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.requisition-item-row{ display: flex; align-items: flex-start; gap: 8px; }
.req-item-category-wrap{ flex: 1; min-width: 0; }
.req-item-category{ width: 100%; }
/* "N available at <location>" hint under the category input — see
   RequisitionController._updateAvailableBadge(). Stays blank rather than
   collapsing to zero height so the Qty field/remove button next to it
   don't visibly shift up and down as different rows are picked. */
.req-item-available{ font-size: 11px; color: var(--ink-faint); margin-top: 3px; min-height: 14px; line-height: 14px; }
.req-item-available.is-zero{ color: var(--bad); }
.req-item-qty{
  width: 80px; flex-shrink: 0; padding: 9px 11px; border-radius: 5px; border: 1px solid var(--border);
  font-size: 13.5px; color: var(--ink); background: var(--surface); font-family: inherit;
}
.req-item-remove{
  flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px; cursor: pointer; color: var(--ink-faint); font-size: 18px; line-height: 1;
}
.req-item-remove:hover{ background: var(--surface-sunk); color: var(--bad); }

.requisition-approvers{ display: flex; gap: 24px; flex-wrap: wrap; margin-top: 4px; }
.requisition-approver{ flex: 1; min-width: 130px; text-align: center; }
.requisition-approver-name{ display: block; font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 22px; }
.requisition-approver-line{ display: block; border-top: 1px solid var(--ink-faint); }

.requisition-form-footer{ display: flex; align-items: center; gap: 16px; margin-top: 18px; }

.requisition-history-card h2{ font-family: var(--font-display); font-size: 15px; margin: 0 0 12px; color: var(--ink); padding: 20px 24px 0; }
.requisition-history-list{ padding: 0 24px 20px; display: flex; flex-direction: column; }
.requisition-history-empty{ font-size: 12.5px; color: var(--ink-faint); font-style: italic; margin: 0 0 8px; }
.requisition-history-row{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.requisition-history-row:first-child{ border-top: none; padding-top: 0; }
.requisition-history-title{ font-weight: 600; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.requisition-history-meta{ font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.requisition-history-sub{ font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.requisition-history-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.requisition-history-row.is-finished{ opacity: 0.7; }

/* ---- Print-only summary — see RequisitionController._print() ----
   #requisitionPrintArea is a direct child of <body> (see index.html), so
   toggling visibility on body's other children isn't affected by which
   tab panel happens to be open/hidden right now. Same visibility-toggle
   technique as .printing-manifest in css/modal.css. */
.requisition-print-area{ display: none; }

@media print {
  body.printing-requisition > *:not(.requisition-print-area){ visibility: hidden; }
  body.printing-requisition .requisition-print-area{
    display: block; visibility: visible; position: absolute; inset: 0; margin: 0; padding: 24px;
  }
  body.printing-requisition .requisition-print-area *{ visibility: visible; }

  .req-print-bar{ height: 8px; background: linear-gradient(90deg, #673ab7, #7e57c2); margin-bottom: 18px; }
  .req-print-title{ font-family: var(--font-display, sans-serif); font-size: 22px; margin: 0 0 2px; }
  .req-print-subtitle{ font-size: 12px; color: #555; margin: 0 0 16px; }
  .req-print-field{ margin-bottom: 10px; font-size: 12.5px; }
  .req-print-field--block{ margin-bottom: 14px; }
  .req-print-label{ display: block; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; margin-bottom: 2px; }
  .req-print-value{ font-size: 13px; color: #111; }
  .req-print-table{ width: 100%; border-collapse: collapse; margin: 6px 0 16px; }
  .req-print-table th, .req-print-table td{ border: 1px solid #ccc; padding: 6px 10px; font-size: 12.5px; text-align: left; }
  .req-print-table th{ background: #f5f5f5; }
  .req-print-approved{ margin-top: 18px; }
  .req-print-footer{ margin-top: 24px; font-size: 10.5px; color: #888; }
}