/* File: root/static/css/purchases.css */

/* ---------- Subnav & action buttons ---------- */
.purchases-subnav .nav-link {
  font-size: 1.05rem;
  padding: 0.6rem 1rem;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: .5rem;
}

.btn-action--vertical {
  flex-direction: column;
  text-align: center;
}

.btn-action__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ---------- History tables ---------- */
.history-table th, .history-table td { vertical-align: middle; }
.history-table .text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.history-table tbody tr.row-main { cursor: pointer; }
.history-table tbody tr.row-details { display: none; background: #fafafa; }
.history-table tbody tr.row-details.show { display: table-row; }

/* ---------- Little chips for NSNs ---------- */
.nsn-chip { padding: .1rem .35rem; line-height: 1.2; }

/* ---------- Dropdown checklist ---------- */
.dropdown-checklist .dropdown-menu-w { width: 20rem; max-width: calc(100vw - 2rem); }
.dropdown-checklist .dropdown-menu { max-height: 16rem; overflow: auto; }
.dropdown-checklist .form-check { margin-bottom: .25rem; }

/* ---------- File preview modal ---------- */
/* JS computes width & height and sets:
   - dialog: --bs-modal-width
   - .file-preview-body: height
*/
#filePreviewModal .file-preview-body { padding: 0; }
#filePreviewModal .file-preview-container {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #fff;
}

#filePreviewModal .file-preview-container > img {
  display: block;
  margin: 0 auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

#filePreviewModal .file-preview-container > iframe,
#filePreviewModal .file-preview-container > embed,
#filePreviewModal .file-preview-container > object {
  width: 100%; height: 100%; border: 0;
}

/* Back-compat: if older JS injects these classes */
#filePreviewContainer .file-preview-img {
  display: block;
  margin: 0 auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
#filePreviewContainer .file-preview-frame {
  width: 100%; height: 100%; border: 0;
}

/* ---------- Quick convert modal ---------- */
#quickConvertModal .form-text { font-size: .86rem; }

/* ---------- Utilities ---------- */
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ---------- Fallbacks (in case JS wasn't able to size preview) ---------- */
@media (min-width: 576px) {
  #filePreviewModal .modal-dialog { --bs-modal-width: 720px; }
}
#filePreviewModal .file-preview-body:empty { height: 60vh; } /* temp box before content loads */

/* Bigger icons for the two top action buttons (Approval Request & Report) */
#btn-open-request .btn-action__icon,
#btn-open-event  .btn-action__icon {
  width: 44px;   /* pick your size */
  height: 44px;
  object-fit: contain;
}

/* (optional) make the buttons a bit chunkier too */
#btn-open-request.btn-action,
#btn-open-event.btn-action {
  padding: .8rem 1rem;
}