/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.mermaid-preview {
  min-height: 200px;
  overflow: auto;
}

.md-preview {
  min-height: 120px;
}

.rendered-markdown p:last-child {
  margin-bottom: 0;
}

/* CodeMirror wrapper for [data-markdown-editor] textareas (#397) — matches
   Bootstrap's .form-control appearance since it visually replaces one. */
.markdown-editor.CodeMirror {
  height: auto;
  min-height: 6rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  font-size: 1rem;
  padding: 0.375rem 0.25rem;
}

.clickable-row {
  cursor: pointer;
}

.min-width-0 {
  min-width: 0;
}

.card-narrow {
  max-width: 600px;
}

.badge-xs {
  font-size: 0.65em;
}

/* Reusable "i" info-icon button (#546) — a small circular button that
   opens a Bootstrap popover explaining a field/label. See
   {% info_icon %} in edp/workflows/templatetags/ui_tags.py. */
.info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid #6c757d;
  border-radius: 50%;
  background: transparent;
  color: #6c757d;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.info-icon-btn:hover,
.info-icon-btn:focus {
  color: #495057;
  border-color: #495057;
}

/* Canvas editor */
.canvas-workspace {
  position: relative;
  height: calc(100vh - 185px);
  min-height: 400px;
}

.canvas-stencil-panel {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 68px;
}

.stencil-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 4px;
  cursor: grab;
  font-size: 0.65rem;
  color: #555;
  user-select: none;
}

.stencil-item:hover {
  background: #f0f4ff;
}

.stencil-item:active {
  cursor: grabbing;
}

/* Prevent SVG children from intercepting drag events on the parent div */
.stencil-item svg {
  pointer-events: none;
}

.stencil-edge-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.65rem;
  color: #555;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
}

.stencil-edge-btn:hover {
  background: #f0f4ff;
}

.stencil-divider {
  border: none;
  border-top: 1px solid #dee2e6;
  margin: 2px 0;
}

.canvas-area {
  flex: 1;
  min-width: 0;
  background: #f8f9fa;
  overflow: hidden;
}

.canvas-props-panel {
  width: 380px;
  flex-shrink: 0;
  overflow-y: auto;
  background: #fff;
}

.canvas-section-header {
  background: #f1f3f5;
  border-bottom: 1px solid #dee2e6;
  padding: 0.375rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6c757d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
}

button.canvas-section-header:hover {
  background: #e9ecef;
  color: #495057;
}

.canvas-meta-chevron {
  transition: transform 0.2s;
}

[aria-expanded="false"] .canvas-meta-chevron {
  transform: rotate(-90deg);
}

.canvas-zoom-display {
  min-width: 52px;
  cursor: default;
  text-align: center;
}

.canvas-rankdir-select {
  width: auto;
  min-width: 72px;
}

.canvas-panel-resize-handle {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  z-index: 10;
}

.canvas-panel-resize-handle:hover,
.canvas-panel-resize-handle.dragging {
  background: #adb5bd;
}

/* Read-only workflow viewer embedded on procedure pages. */
.workflow-viewer {
  height: calc(100vh - 240px);
  min-height: 400px;
  background: #f8f9fa;
  overflow: hidden;
  border-radius: 0.375rem;
}

.viewer-sticky {
  position: sticky;
  top: 4rem;
}

.fmea-entry-panel-scroll {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

/* Nested links inside a .stretched-link ticket row (tickets:list) — without
   this, the row's own .stretched-link ::after overlay sits above and
   intercepts clicks meant for the linked-8D links. Also lands in #573. */
.ticket-row-links a {
  position: relative;
  z-index: 1;
}

/* 8D report read-only detail view (eightdreport_detail.html) */
.eightd-detail-kv-label {
  width: 20%;
}

.eightd-detail-whystep-num {
  width: 5%;
}

.fmea-filter-sticky {
  position: sticky;
  top: 4rem;
  background: #fff;
  z-index: 10;
  padding-top: 0.375rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 0.75rem;
}

.fmea-sort-link {
  color: inherit;
}

.fmea-sort-link:hover {
  color: #0d6efd;
}

.viewer-graph-header {
  cursor: default;
}

.viewer-fit-btn {
  font-size: 0.7rem;
}

/* PCP deliverable status — mirrors the source Excel's color legend */
.pcp-status-not_started {
  background-color: #f8f9fa;
  color: #212529;
}

.pcp-status-missing {
  background-color: #dc3545;
  color: #fff;
}

.pcp-status-to_be_reviewed {
  background-color: #d63384;
  color: #fff;
}

.pcp-status-checked {
  background-color: #ffc107;
  color: #212529;
}

.pcp-status-validated {
  background-color: #198754;
  color: #fff;
}

.pcp-grid-cell {
  min-width: 150px;
  font-size: 0.7rem;
}

.pcp-grid-category-cell {
  max-width: 140px;
}

.pcp-grid-chip {
  display: block;
  padding: 0.1rem 0.3rem;
  margin-bottom: 2px;
  border-radius: 0.2rem;
  text-decoration: none;
  line-height: 1.3;
  word-break: break-word;
}

.pcp-grid-chip:hover {
  opacity: 0.85;
}

.pcp-grid-chip-number {
  font-weight: 700;
  margin-right: 0.25rem;
}

/* PCP stage header row — groups tollgate columns into named stages
   (Product definition, Product development, ...), cycling through a fixed
   palette since the number/names of stages are template-defined. The first
   three colors are lifted directly from the source Excel's own stage header
   fills (Product Definition/Development/Industrialization), computed from
   its theme + tint values so the platform visually matches the sheet Thom
   is used to reading. */
.pcp-stage-header {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* Bootstrap 5's table cells set background-color via
   `.table > :not(caption) > * > *`, a higher-specificity selector than a
   plain class — the `.table` prefix here (two classes) is needed to win
   the cascade instead of silently losing to Bootstrap's default. */
.table .pcp-stage-0 {
  background-color: #ffcc66;
}

.table .pcp-stage-1 {
  background-color: #b4c7e7;
}

.table .pcp-stage-2 {
  background-color: #a9d18e;
}

.table .pcp-stage-3 {
  background-color: #e2d9f3;
}

/* PCP grid — boxed scrollable panel with a sticky header, so the
   stage/tollgate/phase column headers stay legible on a tall grid.
   `position: sticky` does NOT work on a plain Bootstrap `.table-responsive`
   wrapper: it sets `overflow-x: auto` only, but per the CSS overflow spec a
   non-`visible` x-axis forces the y-axis to compute to `auto` too — turning
   `.table-responsive` into its own scroll container. Since that div has no
   fixed height, it just grows to fit the table and never actually scrolls,
   so a sticky descendant has nothing to stick against. Giving it a bounded
   `max-height` + explicit `overflow: auto` here makes it a real scrollport
   (both axes, like a spreadsheet pane) so the sticky header actually has
   something to pin against. */
.pcp-grid-scroll {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

/* Three stacked header rows each need their own cumulative top offset (a
   plain `top: 0` on all three would make row 2 and row 3 jump up and
   overlap row 1 at the same sticky point, instead of stacking below it).
   Hardcoded rem guesses here caused a visible jump the instant a row
   became stuck (offset didn't exactly match the row's real rendered
   height) and a hairline border gap at that boundary — the offsets are
   measured from actual rendered row heights instead, via CSS custom
   properties set by initPcpGridStickyHeader() in project.js. Row 2/3 get
   an explicit white background so scrolled body rows don't show through
   underneath; row 1's stage-color cells already have an opaque background
   via .pcp-stage-N above, and its one plain corner cell gets
   .pcp-grid-sticky-corner instead so it doesn't fight that cascade.
   box-shadow (not border) reinforces the boundary below each row —
   Bootstrap's own collapsed border between cells doesn't repaint reliably
   while one side is position: sticky, so it visibly flickers/goes
   transparent under scroll; a box-shadow is painted inside each cell's own
   box regardless of stickiness, masking that flicker with a stable line.
   `will-change: transform` forces the browser to composite the sticky
   cell on its own GPU layer — without it, some browsers rasterize
   position: sticky elements at a slightly different sub-pixel offset than
   the content scrolling beneath them each frame, showing a hairline seam
   of that content through the boundary; compositing separately keeps the
   cell's own paint (background + box-shadow) pixel-stable regardless. */
.pcp-grid-sticky-thead th {
  position: sticky;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #dee2e6;
  will-change: transform;
}

.pcp-grid-sticky-thead tr:nth-child(1) th {
  top: 0;
}

.pcp-grid-sticky-thead tr:nth-child(2) th {
  top: var(--pcp-grid-row1-height, 1.75rem);
  background-color: #fff;
}

.pcp-grid-sticky-thead tr:nth-child(3) th {
  top: var(--pcp-grid-row12-height, 4.75rem);
  background-color: #fff;
  text-align: left;
  vertical-align: top;
}

/* Bootstrap 5's table cells set background-color via
   `.table > :not(caption) > * > *`, a higher-specificity selector than a
   plain class — the `.table` prefix here (two classes) is needed to win
   the cascade instead of silently losing to Bootstrap's default (same
   gotcha as .pcp-stage-N above; the sticky rows' own `th` selectors above
   already carry enough specificity to win without this, since they chain
   through `tr:nth-child(N)`, but this single-class selector doesn't).
   `!important` because this cell reportedly stayed transparent even after
   the `.table` specificity bump — belt-and-braces against whatever else
   is still winning the cascade on it. */
.table .pcp-grid-sticky-corner {
  background-color: #fff !important;
}

/* First column frozen on horizontal scroll too, spreadsheet-style — the
   category name is otherwise meaningless once scrolled out of view to the
   left. Header row's first cell (category label / empty corner) needs
   `left` in addition to the `top` it already gets above, so it stays
   pinned at both edges at once; a higher z-index than the plain sticky-top
   header cells (2) and the sticky-left body column (1) below ensures it
   renders above both wherever they visually meet. */
.pcp-grid-sticky-thead tr th:first-child {
  left: 0;
  z-index: 3;
  background-color: #fff !important;
  box-shadow:
    inset -1px 0 0 #dee2e6,
    inset 0 -1px 0 #dee2e6;
  will-change: transform;
}

.pcp-grid-table tbody tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: inset -1px 0 0 #dee2e6;
  will-change: transform;
}

.table .pcp-grid-category-cell {
  background-color: #fff;
}

.pcp-stage-chip {
  min-width: 220px;
}

/* Restyle ClearableFileInput's plain checkbox into a small outline button —
   scoped to the deliverable document card only, not every ClearableFileInput
   platform-wide. */
.pcp-document-card input[type="checkbox"][id$="-clear_id"] {
  display: none;
}

.pcp-document-card label[for$="-clear_id"] {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  border: 1px solid #dc3545;
  color: #dc3545;
  border-radius: 0.2rem;
  cursor: pointer;
}

.pcp-document-card label[for$="-clear_id"]:hover {
  background-color: #dc3545;
  color: #fff;
}

/* FMEA Action Priority badges */
.ap-high {
  background-color: #dc3545;
  color: #fff;
}

.ap-medium {
  background-color: #fd7e14;
  color: #fff;
}

.ap-low {
  background-color: #198754;
  color: #fff;
}

/* FMEA entry list */
.fmea-search-input {
  max-width: 220px;
}

.btn-xs {
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
}

.fmea-revalidation-toggle {
  cursor: pointer;
}

.fmea-scoring-guide-link {
  font-size: 0.8rem;
}

.fmea-scoring-guide {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.fmea-guide-table {
  font-size: 0.78rem;
}

.fmea-guide-table td:first-child {
  font-weight: 600;
  text-align: center;
  width: 2rem;
}

.fmea-col-nr {
  width: 2.5rem;
}

.fmea-col-score {
  width: 2.5rem;
}

.fmea-col-ap {
  width: 3rem;
}

.fmea-scores-table {
  table-layout: fixed;
  width: 100%;
}

.fmea-scores-col-label {
  width: 4rem;
}

.fmea-scores-col-val {
  width: 3rem;
}

.fmea-scores-col-rpn {
  width: 3.5rem;
}

.fmea-scores-col-ap {
  width: 3rem;
}

.fmea-review-select {
  width: auto;
  display: inline-block;
}

.fmea-scores-table .form-control {
  padding: 0.15rem 0.2rem;
  text-align: center;
  font-size: 0.8125rem;
}

.fmea-node-mini-form {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.fmea-filter-select {
  max-width: 220px;
}

.fmea-advanced-filter-row {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.fmea-phase-add-row {
  max-width: 320px;
}

.fmea-phase-remove-btn {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.fmea-phase-remove-btn:hover {
  opacity: 1;
}

.fmea-guide-tab {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
}

.fmea-field-error {
  font-size: 0.7rem;
  color: #dc3545;
}

.field-error {
  font-size: 0.7rem;
  color: #dc3545;
}

.fmea-autoresize {
  resize: none;
  overflow-y: hidden;
}

.fmea-timestamp {
  font-size: 0.72rem;
  color: #6c757d;
}

.fmea-action-card {
  padding: 0.4rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

.fmea-action-update {
  padding: 0.3rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

.autosave-label {
  position: absolute;
  top: -1.5rem;
  right: 0;
  color: #6c757d;
}

/* Remove native number-input spinners so cost-line amounts align with the
   plain Total figure below them (the spinner arrows otherwise eat into the
   input's width and throw off the right-aligned digits). */
.cost-line-amount {
  -moz-appearance: textfield;
}

.cost-line-amount::-webkit-outer-spin-button,
.cost-line-amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Module list table — fixed layout prevents column-width shifts on row expand */
#module-list-table { table-layout: fixed; width: 100%; }
.module-col-name    { width: 24%; }
.module-col-node    { width: 32%; }
.module-col-person  { width: 28%; }
.module-col-actions { width: 16%; }

/* Clickable module rows */
.module-row { cursor: pointer; }
.module-row-actions a { position: relative; z-index: 1; }

/* System tree table — fixed layout prevents column-width shifts on row expand */
#system-tree-table { table-layout: fixed; width: 100%; }
/* Editor layout (4 cols) */
.sys-col-name    { width: 30%; }
.sys-col-module  { width: 20%; }
.sys-col-owner   { width: 20%; }
.sys-col-actions { width: 30%; }
/* Viewer layout (3 cols) */
.sys-col-name-viewer   { width: 50%; }
.sys-col-module-viewer { width: 25%; }
.sys-col-owner-viewer  { width: 25%; }

/* Clickable system node rows */
.system-node-row-actions a { position: relative; z-index: 1; }

/* Nested links inside a .stretched-link ticket row (tickets:list) — without
   this, the row's own .stretched-link ::after overlay sits above and
   intercepts clicks meant for the linked-8D links. */
.ticket-row-links a { position: relative; z-index: 1; }

/* Tree indentation for SystemNode / OrgChartNode list views.
   !important needed to beat Bootstrap's .table-sm compound selector. */
.tree-depth-0 { padding-left: 0.5rem !important; }
.tree-depth-1 { padding-left: 2rem !important; }
.tree-depth-2 { padding-left: 3.5rem !important; }
.tree-depth-3 { padding-left: 5rem !important; }
.tree-depth-4 { padding-left: 6.5rem !important; }
.tree-depth-5 { padding-left: 8rem !important; }

/* Actions dashboard "Sources" filter dropdown (#376) */
.actions-source-menu { min-width: 16rem; max-height: 20rem; overflow-y: auto; }

/* Requirements */
.req-indent-0 { padding-left: 0; }
.req-indent-1 { padding-left: 1.5rem; display: block; }
.req-indent-2 { padding-left: 3rem; display: block; }
.req-indent-3 { padding-left: 4.5rem; display: block; }

.req-md-help {
  background: #f8f9fa;
  font-size: 0.8rem;
}

/* Issue Tracker 2D review diagram (chance x impact) */
.issue-diagram-svg-wrapper {
  overflow-x: auto;
}

.issue-diagram-svg {
  max-width: 100%;
  height: auto;
}

.issue-diagram-cell {
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem;
  overflow-y: auto;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.issue-diagram-card {
  width: 7.5rem;
  padding: 0.25rem 0.4rem;
  background: #fff;
  border: 1px solid #adb5bd;
  border-radius: 0.2rem;
  font-size: 0.7rem;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  display: block;
}

.issue-diagram-card:hover {
  border-color: #495057;
  background: #f8f9fa;
}

.issue-diagram-card.ap-high {
  border-color: #dc3545;
}

.issue-diagram-card.ap-medium {
  border-color: #fd7e14;
}

.issue-diagram-card.ap-low {
  border-color: #198754;
}

.issue-diagram-grid-line {
  stroke: #dee2e6;
  stroke-width: 1;
}

.issue-diagram-axis-line {
  stroke: #495057;
  stroke-width: 1.5;
}

.issue-diagram-axis-label {
  font-size: 0.85rem;
  fill: #495057;
  text-anchor: middle;
}

.issue-diagram-tick-label {
  font-size: 0.75rem;
  fill: #6c757d;
}

.issue-diagram-tick-label-x {
  text-anchor: middle;
}

.issue-diagram-tick-label-y {
  text-anchor: end;
}

.percent-readout {
  display: inline-block;
  min-width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A whole-card/row is clickable via hx-get (matching system_tree/orgchart's
   click-to-expand convention) — action buttons inside it need their own
   stacking context above the row's own click target. */
.issue-action-card-actions {
  position: relative;
  z-index: 2;
}

/* 8D report editor's section sidebar (decision #9, .claude/plans/8D-app-plan.md)
   — stays in view while the (long, D0-D8) form scrolls past it. */
.eightd-section-nav {
  position: sticky;
  top: 1rem;
}

/* Rich text editors (#447) — a page with several fields showed a full
   CKEditor toolbar on every one of them at once, too crowded; collapsed by
   default and only shown while that specific field has focus (see
   initRichTextEditors() in project.js), plus a bit more editing room than
   CKEditor's own default editable height. !important is warranted here:
   CKEditor injects its own stylesheet into <head> at runtime, after
   project.css has already loaded, so its .ck-toolbar { display: flex }
   wins any same-specificity tie regardless of source order otherwise. */
.ck-toolbar.eightd-toolbar-collapsed {
  display: none !important;
}

.eightd-richtext-editable {
  min-height: 8rem;
}

/* D4 Theory cards' inline 5-Whys table (#449 amendment) — narrow numeric
   "#" column so the Why textarea gets the rest of the row's width. */
.eightd-whystep-order-col {
  width: 4rem;
}

/* Theory card collapse toggle (#576) — shares .canvas-section-header's
   look, but unlike the plain D0-D8 section headers it isn't alone in its
   card-header (a separate Delete-theory button sits alongside it), so it
   can't claim the header's full width the way .canvas-section-header's own
   width: 100% assumes. */
.eightd-hypothesis-header-toggle {
  width: auto;
  flex: 1 1 auto;
}

/* Closed action cards (originally eightd's D4 Theory Actions panel, #471,
   generalized in #516 when _action_card.html moved to the shared
   edp/actions app) stay visible inline (rather than collapsed out of
   sight) so their outcome remains in context; dimmed to distinguish them
   from open ones at a glance. */
.action-card-closed {
  opacity: 0.7;
}

/* D2 — Problem Description (#478): fixed-width label, field takes the
   rest. A percentage split squeezed the label down to an unreadable
   sliver as the window narrowed, since it shrank right along with the
   field instead of staying legible. */
.eightd-d2-label {
  flex: 0 0 auto;
  width: 8rem;
}

/* flex-basis: 0% (not auto), #498: with flex-basis: auto a flex item's
   *content* size is what decides whether flex-wrap: wrap moves it to a
   new line — min-width: 0 and flex-shrink only apply to sizing after
   that line-assignment decision has already been made, so long CKEditor
   content (which easily fits once given the row's actual width) was
   still wrapping the field below the label purely because its unwrapped
   content size looked too wide at decision time. flex-basis: 0 makes the
   item start from zero and grow to fill the remaining space instead,
   sidestepping content size entirely for the wrap decision. */
.eightd-d2-field {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
}

/* #491 — Bootstrap's w-auto sizes a <select> to fit its widest option's
   content, which for a "Link an existing test…" picker (candidate
   description + source label) can exceed the theory card's own width and
   overflow past the page's right edge. Flex items also default to
   min-width: auto (not 0), so plain flex-shrink alone doesn't fix it —
   same root cause as .eightd-d2-field above, just on a <select> instead
   of a rich-text field. */
.test-link-select {
  flex: 1 1 auto;
  min-width: 0;
}