/*
 * HMX Composability Supplement — makes the documented HMX components render
 * correctly ANYWHERE in a page, not only inside the deep ancestor chains the
 * extracted hmx.css was captured with. Every declaration replicates the exact
 * visual of the corresponding context-scoped rule in hmx.css; selectors here are
 * intentionally low-specificity so the real extracted rules win whenever their
 * full context is present. Keep this file small — it is a composability shim,
 * never a fork of the design system. Enforced by tests/hmx-template-contract.test.ts.
 */

/* Plus Jakarta Sans ships a very tight space glyph (~0.14em) that reads as
   run-together words in dense ERP tables. A small uniform bump restores normal
   word separation without touching the letterforms. */
.hx-app { word-spacing: 0.1em; }

/* ---------- Status pills (list cells, card headers, page intros) ---------- */

.hx_reference_badge,
.hx_reference_tag,
.hx_statusbar {
  background: #e9edf2;
  color: #45505f;
  border: 1px solid #d4dae2;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  padding: 3px 12px;
  min-height: 26px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Firm, clearly-legible status tints with a defining hairline border. */
.hx_statusbar-default { background: #dbe8ff; color: #1d4ed8; border-color: #b4d0ff; }
.hx_statusbar-approved { background: #d4f3dd; color: #15803d; border-color: #a7e3ba; }
.hx_statusbar-waiting { background: #ffe9cc; color: #b45309; border-color: #f5cf9e; }
.hx_statusbar-danger { background: #fcdedb; color: #c62f22; border-color: #f4b6ae; }

/* Semantic pill variants usable directly on hx_reference_badge. */
.hx_reference_badge.is-success { background: #d4f3dd; color: #15803d; border-color: #a7e3ba; }
.hx_reference_badge.is-info { background: #dbe8ff; color: #1d4ed8; border-color: #b4d0ff; }
.hx_reference_badge.is-warning { background: #ffe9cc; color: #b45309; border-color: #f5cf9e; }
.hx_reference_badge.is-danger { background: #fcdedb; color: #c62f22; border-color: #f4b6ae; }

/* The real HMX list-view badge widget, usable outside .hx-list-view too
   (visuals replicate .hx-list-view .widget-badge .badge). */
.widget-badge { display: block; max-width: 100%; min-width: 0; }
.widget-badge .badge {
  align-items: center;
  background-color: #e3f2fc;
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  color: #0e639f;
  display: inline-flex;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  gap: 4px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 20px;
  max-width: 100%;
  min-height: 28px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 12px;
  text-align: center;
  vertical-align: middle;
}
.widget-badge .badge > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-badge .badge.bg-success { background-color: #d5f6d9 !important; color: #1f8a2f !important; }
.widget-badge .badge.bg-info { background-color: #dff0ff !important; color: #1e63d4 !important; }
.widget-badge .badge.bg-warning { background-color: #ffe1c6 !important; color: #c66015 !important; }
.widget-badge .badge.bg-danger { background-color: #fdecea !important; color: #b71914 !important; }
.widget-badge .badge.bg-secondary { background-color: #e9ecef !important; color: #41464b !important; }

/* Form-header title badge (real: .hx-form-sheet-title .title-badge). */
.title-badge {
  background: #e0e0e0;
  color: #424242;
  height: 24px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  display: inline-flex;
  align-items: center;
}
.title-badge.badge-draft { background: #e0e0e0; color: #424242; }
.title-badge.badge-confirmed { background: #d5f6d9; color: #1f8a2f; }
.title-badge.badge-waiting { background: #ffe1c6; color: #c66015; }
.title-badge.badge-rejected { background: #fdecea; color: #b71914; }
.title-badge.badge-progress { background: #dff0ff; color: #1e63d4; }

/* ---------- Kanban cards (real: .hx-kanban-grid.hx-kanban-grid-v2 …) ---------- */

.hx-kanban-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.hx_kanban_card.hx-kanban-card-v2 {
  background: var(--component-surface, #fdfdfd);
  border-radius: 20px;
  border: 1px solid var(--component-border, #d9dee6);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Plus Jakarta Sans', 'Nunito', sans-serif;
  min-width: 0;
  height: 100%;
  position: relative;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_card_header .hx_name,
.hx_kanban_card.hx-kanban-card-v2 .hx_card_header .hx_unique {
  background: #eef1f5;
  color: #45505f;
  font-weight: 600;
  font-size: 13px;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: inline-flex;
  align-items: center;
}
.hx_kanban_card.hx-kanban-card-v2 > .hx_name {
  font-size: 14px;
  font-weight: 800;
  color: #2c2f38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_card_body {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid #dfe5ef;
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_card_body:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_card_line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3c4048;
  font-size: 14px;
  line-height: 1.4;
  min-width: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_card_footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid #dfe5ef;
  padding-top: 16px;
}
.hx_subtask_badge {
  width: fit-content;
  align-self: flex-start;
  margin: 8px 0;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
}
.hx_subtask_badge.parent { background: #e5e7eb; color: #374151; }
.hx_subtask_badge.child { background: #f3e8ff; color: #7c3aed; }
.hx_subtask_badge.none { display: none; }

/* The real card-code chip caps at 130px (fits the real app's short codes like
   MAD-01); generated apps use longer references (SO/2026/0042), so widen the chip
   at matching specificity so the code never truncates mid-number. */
.hx-kanban-grid.hx-kanban-grid-v2 .hx_kanban_card.hx-kanban-card-v2 .hx_card_header .hx_unique,
.kanban-column .hx-kanban-card-wrapper .hx_kanban_card.hx-kanban-card-v2 .hx_card_header .hx_unique {
  max-width: 190px;
}

/* Rich kanban card anatomy (title, dated meta line, owner footer, Details button). */
.hx_kanban_card.hx-kanban-card-v2 .hx_icon_circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef1f5;
  color: #3c4048;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_line_text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3c4048;
  font-size: 14px;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_footer_identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_footer_avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #eef4ff;
  color: #1f4dd1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_footer_name {
  font-weight: 700;
  font-size: 14px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.hx_kanban_card.hx-kanban-card-v2 .hx_quick_view_btn {
  border: 1px solid #2563eb;
  background: #ffffff;
  color: #2563eb;
  padding: 5px 12px;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- Dashboard KPI tiles (real: .hx-dashboard-view__section > tile) ----------
   The real tile sets container-type:size (⇒ size containment) and sizes its value
   with container-query units that only resolve inside a dashboard section. Outside
   one, that collapses the tile and overlaps the value/footer, so a standalone tile
   opts out of containment and uses fixed type. Scope with :not() so a tile placed in
   a real .hx-dashboard-view__section keeps the app's exact live sizing. */

.hx-dashboard-view__section .hx-dashboard-view__tile { /* real section context wins as-is */ }

:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile {
  container-type: normal;
  background: var(--wdb-card, #ffffff);
  border: 1px solid var(--wdb-border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  min-height: 118px;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-sizing: border-box;
}
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 0;
  padding-right: 0;
  color: #475569;
}
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-title {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: #0f172a;
}
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  background: #eef4ff;
  color: #2563eb;
}
/* Tint a KPI tile's icon by semantic so a status row carries meaning. */
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-icon.is-success { background: #d4f3dd; color: #15803d; }
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-icon.is-danger { background: #fcdedb; color: #c62f22; }
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-icon.is-warning { background: #ffe9cc; color: #b45309; }
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-icon.is-info { background: #dbe8ff; color: #1d4ed8; }
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-footer {
  margin-top: 2px;
}
:not(.hx-dashboard-view__section) > .hx-dashboard-view__tile .hx-dashboard-view__tile-label {
  font-size: 12px;
  color: #94a3b8;
}

/* ---------- List rows: hover + pointer for plain documented tbody ---------- */

.hx-list-view .data-table tbody tr { cursor: pointer; transition: background 0.15s; }
.hx-list-view .data-table tbody tr:hover { background: var(--component-hover, #fcfcfc); }

/* Wide tables: the real app JS-sizes columns; a static page has none, so a 12+
   column table on a fixed layout starves each cell and shreds headers character
   by character. Size columns to content, keep words intact, and let the scroll
   container scroll horizontally (few-column tables stay full-width and unchanged). */
.hx-list-view .data-table {
  table-layout: auto;
  width: 100%;
}
.hx-list-view .data-table th,
.hx-list-view .data-table td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
/* !important beats the captured header's `.body2-semibo { overflow-wrap: anywhere }`,
   which otherwise shreds narrow headers character-by-character. */
.hx-list-view .data-table th .sortable-header,
.hx-list-view .data-table th .sortable-header * {
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: nowrap !important;
}
.hx-list-view .hx-list-view-table-scroll,
.hx-list-view .hx-list-view-table-wrapper {
  overflow-x: auto;
}
/* Numeric/currency columns read best right-aligned with lined-up decimals. */
.hx-list-view .data-table td.is-numeric,
.hx-list-view .data-table th.is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Form system fallbacks (real rules are keyed to .hx-form-groups;
   these low-specificity twins keep partial markup laid out correctly) ---------- */

.form-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  gap: 16px;
}
/* One bordered panel per section: the real app keys this off
   .hx-form-groups:has(.form-card) .form-container-row — this is the non-:has fallback. */
.hx-form-groups .form-container-row {
  background: #ffffff;
  border: 1px solid #e1e2e3;
  border-radius: 16px;
  padding: 16px 24px 24px;
}
/* The real cols-wrapper is a 12-col grid; columns span by a `col` attribute in the
   real app. Generated apps use the -N classes instead, so map those to grid spans at
   matching specificity (these load after hmx.css and win over its default span-6). */
.hx-form-groups .form-container-cols-wrapper > .form-container-col-12 { grid-column: 1 / -1; }
.hx-form-groups .form-container-cols-wrapper > .form-container-col-6 { grid-column: span 6; }
.hx-form-groups .form-container-cols-wrapper > .form-container-col-4 { grid-column: span 4; }
.hx-form-groups .form-container-cols-wrapper > .form-container-col-3 { grid-column: span 3; }
.hx-form-groups .form-container-cols-wrapper > .form-container-col > .form-card {
  border: none;
  background: none;
  padding: 0;
}
.hx-group-header-divider {
  display: block;
  margin: 12px -24px 16px;
  height: 0;
  border: 0;
  border-top: 1px solid #eef1f5;
}
.form-card {
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #2c2c2c;
  line-height: 1.4;
}
.form-card-header { display: flex; align-items: center; }
.form-card-body { flex-grow: 1; display: flex; flex-direction: column; width: 100%; gap: 1rem; }
.form-container-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  padding: 0 1rem;
  position: relative;
}
.form-container-col { flex: 1 1 0; min-width: 0; max-width: 100%; }
.form-container-col-12 { flex: 1 1 100%; max-width: 100%; }
.form-container-col-6 { flex: 1 1 calc(100% / 12 * 6 - 12px); max-width: calc(100% / 12 * 6 - 12px); }
.form-container-col-4 { flex: 1 1 calc(100% / 12 * 4 - 16px); max-width: calc(100% / 12 * 4 - 16px); }
.form-container-col-3 { flex: 1 1 calc(100% / 12 * 3 - 18px); max-width: calc(100% / 12 * 3 - 18px); }
.form-group-heading { font-size: 1.125rem; font-weight: 600; margin: 0; line-height: 1.2; color: #3a3a3a; }
.hx-group-header-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e2e3;
}
.hx-group-header-content { gap: 6px; display: flex; flex-direction: column; }
.hx-group-title { display: flex; justify-content: flex-start; align-items: flex-end; gap: 8px; }
.form-field-wrapper { display: flex; flex-direction: column; gap: 6px; }
.form-field-label-wrapper { display: flex; align-items: flex-start; gap: 6px; min-height: 21px; width: 100%; }
.form-field-label {
  display: inline-block;
  width: fit-content;
  min-height: 21px;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.form-field-required { display: inline; white-space: nowrap; color: #bd210f; }
.form-field-value { display: block; min-height: 24px; }

/* Standard HMX input chrome for any input/textarea placed in a form field — the
   real widget rules (input.text-field, input.many2one-field, …) are more specific
   and win whenever the full widget markup is used. */
.form-field-value input:not([type='checkbox']):not([type='radio']),
.form-field-value textarea,
.form-field-value select {
  width: 100%;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid #cacbcc;
  border-radius: 8px;
  background: #fff;
  color: #585959;
  font: 400 14px/24px 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
}
.form-field-value input:focus,
.form-field-value textarea:focus,
.form-field-value select:focus {
  outline: none;
  border-color: #338cff;
}

/* The workflow-status stepper is a click-to-open dropdown; its collapsed default
   hides the panel (the real app removes it from the DOM when closed). A static
   snapshot can capture it open, leaving a clipped floating panel — keep it hidden
   unless explicitly expanded so reference/generated pages render the compact rail. */
.hx-form-sheet-state:not(.expanded) .status-body,
.hx-quick-state:not(.expanded) .status-body { display: none; }

/* Modal confirm/cancel pair (real: .hashy-warning-modal context). */
.btn-confirm,
.btn-cancel {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-confirm { background: #dc3545; color: white; }
.btn-confirm:hover { background: #c82333; }
.btn-cancel { background: #6c757d; color: white; }
.btn-cancel:hover { background: #5a6268; }