/* ==========================================================================
   Training Booking

   Only what the booking module actually needs: section headings inside the
   form (the shared form-grid has no such element), the five status badges,
   and the detail-view definition grid. Everything else reuses the existing
   filter-bar / enterprise-table / kpi-strip primitives.
   ========================================================================== */

/* --- KPI strip ----------------------------------------------------------
   Five tiles side by side on a desktop, folding to three then two as the
   viewport narrows. Five fixed columns at 768 gives ~134px tiles whose
   contents overflow, so the count reflows rather than the tiles shrinking. */
.bk-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .bk-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bk-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Form section headings --------------------------------------------- */
.form-section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle, #e5e8ee);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600, #24507f);
}
.form-section-label:first-child { margin-top: 0; }

/* --- Status badges ------------------------------------------------------
   Mapped to the booking lifecycle rather than reusing register statuses, so
   the colour tells the operator where in the pipeline the booking sits:
   grey enquiry -> amber quote -> blue confirmed -> green delivered -> muted
   red cancelled. */
.badge-bk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.badge-bk::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.badge-bk-enquiry   { background: #eef1f6; color: #55617a; }
.badge-bk-quoted    { background: #fff5e0; color: #8a6100; }
.badge-bk-confirmed { background: #e7f0fb; color: #1e5aa8; }
.badge-bk-completed { background: #e6f6ec; color: #1d7a44; }
.badge-bk-cancelled { background: #fdecec; color: #a33a3a; }

/* --- Detail view -------------------------------------------------------- */
.bk-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.bk-detail-block { min-width: 0; }
.bk-detail-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-tertiary, #7b8496);
  margin-bottom: 3px;
}
.bk-detail-value {
  font-size: 14px; font-weight: 600; color: var(--text-primary, #1a2233);
  overflow-wrap: anywhere;      /* long venue / email must wrap, never overflow */
  word-break: break-word;
}
.bk-detail-value.muted { color: var(--text-tertiary, #7b8496); font-weight: 500; }

.bk-detail-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-600, #24507f);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle, #e5e8ee);
}
.bk-detail-section-title:first-child { margin-top: 0; }

.bk-notes {
  padding: var(--sp-3);
  border-radius: 8px;
  background: var(--surface-2, #f6f8fb);
  font-size: 13px; line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Cell content must wrap inside the table rather than force the page wider. */
#bookingTable td, #bookingTable th { vertical-align: middle; }
/* .enterprise-table sets white-space:nowrap on its cells, which both prevents
   wrapping and (with table-layout:auto) lets long values expand the table past
   its min-width. These four columns opt back into wrapping so the table fits
   its container instead of pushing Actions out of view. */
#bookingTable .bk-cell-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#bookingTable .bk-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }

/* Keep the identifier, date, count and action columns at their natural width
   so the freely-wrapping text columns absorb the remaining space. */
#bookingTable th:nth-child(1), #bookingTable td:nth-child(1) { width: 92px; white-space: nowrap; }
#bookingTable th:nth-child(5), #bookingTable td:nth-child(5) { width: 132px; }
#bookingTable th:nth-child(6), #bookingTable td:nth-child(6) { width: 96px; }
#bookingTable th:nth-child(8), #bookingTable td:nth-child(8) { width: 108px; }
#bookingTable th:nth-child(9), #bookingTable td:nth-child(9) { width: 116px; }

/* --- A4 print ----------------------------------------------------------
   Reuses .doc-print-root / .doc-page from commercial-print.css, which
   already hides the app shell and sets @page A4. Only booking-specific
   blocks are defined here. */
.bk-print-title {
  font-size: 19px; font-weight: 800; margin: 14px 0 4px; color: #1e3a5f;
}
.bk-print-no { font-size: 11px; color: #6b7280; margin-bottom: 14px; }

.bk-print-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 14px; }
.bk-print-table td {
  border: 1px solid #d5dae2; padding: 6px 8px; vertical-align: top;
  overflow-wrap: anywhere; word-break: break-word;
}
.bk-print-table td:nth-child(odd) {
  background: #f3f6fa; font-weight: 700; width: 20%; color: #47526b;
}

.bk-print-section { margin-bottom: 12px; break-inside: avoid; }
.bk-print-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1e3a5f; margin-bottom: 5px; padding-bottom: 3px; border-bottom: 1px solid #dde1e8;
}
.bk-print-notes { font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.bk-print-status {
  display: inline-block; padding: 3px 10px; border-radius: 3px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid #1e3a5f; color: #1e3a5f;
}

@media (max-width: 720px) {
  .bk-detail-grid { grid-template-columns: 1fr; }
}