/* =================================================================================================
   PREPARATION-01 §4–§36 — the Step 6 workspace.

   Source parity with PRESTEC_KeHoachTrienKhai.html: its proportions, its 32px row, its density and
   its region layout, expressed in canonical PRESTEC tokens rather than the source's own hex values.
   That substitution is the one deliberate difference throughout this sheet — the source was written
   standalone, and a screen inside the application must use the application's palette, typeface and
   control heights or it reads as a different product bolted on.
   ================================================================================================= */

/* ── §4 the shell ─────────────────────────────────────────────────────────────────────────────── */

body.prep-modal-open {
  /* The page underneath is LOCKED, not merely covered: without this a wheel over the workspace
     scrolls the project behind it, and closing lands the reader somewhere they never navigated to. */
  overflow: hidden;
}

/*
  `.modal` IS DECLARED TWICE IN THIS APPLICATION, and the second one wins.

  styles.css has the overlay: fixed, inset 0, a dark translucent ground, flex-centred, shown by
  `.modal.open`. prestec.css then declares `.modal` again as a 520px white CARD — width, background,
  overflow, max-height, radius — and being loaded later it takes those properties. What survives is
  a hybrid: still fixed and still inset 0, but 520px wide, white, and clipped. The workspace rendered
  as a narrow white column down the left of the screen with the project fully legible beside it.

  So this rule states EVERY property it depends on rather than inheriting a class whose meaning
  depends on which stylesheet loaded last. preparation.css is loaded after both, so these win.
*/
.prep-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: rgba(15, 23, 42, 0.45);
}

.prep-modal.open { display: flex; }

.prep-panel-shell {
  width: min(1680px, 100vw);
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg-page);
}

@media (min-width: 1400px) {
  .prep-modal { padding: 16px; }
  .prep-panel-shell {
    height: calc(100vh - 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
  }
}

/* ── §5 header ────────────────────────────────────────────────────────────────────────────────── */

.prep-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.prep-head__id { display: flex; flex-direction: column; gap: 4px; }

.prep-head__code {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--primary-strong);
}

.prep-head__rev {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  letter-spacing: .04em;
}

.prep-head__status {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  text-align: center;
}
.prep-status--submitted { background: var(--info-soft); color: var(--info-strong); }
.prep-status--returned { background: var(--danger-soft); color: var(--danger-strong); }
.prep-status--approved { background: var(--success-soft); color: var(--success-text); }

.prep-head__name h2 {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prep-head__facts {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
}

.prep-head__actions { display: flex; align-items: center; gap: 8px; }

/* ── §5 KPI strip ─────────────────────────────────────────────────────────────────────────────── */

.prep-kpi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.prep-kpi__cell {
  background: var(--bg-surface);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prep-kpi__value {
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.prep-kpi__label {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prep-kpi__cell--bad .prep-kpi__value { color: var(--danger); }

/* ── §6 tabs — text first, never card navigation ──────────────────────────────────────────────── */

.prep-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.prep-tabs__tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.prep-tabs__tab:hover { color: var(--text-primary); }

.prep-tabs__tab.is-active {
  color: var(--primary-strong);
  border-bottom-color: var(--primary);
}

.prep-tabs__badge {
  margin-left: 6px;
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: var(--fs-meta);
}
.prep-tabs__badge.is-blocking { background: var(--danger-soft); color: var(--danger-strong); }

.prep-body { min-height: 0; overflow: auto; }
.prep-body[data-prep-active-tab="plan"] {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.prep-error {
  margin: 0;
  padding: 8px 16px;
  background: var(--danger-soft);
  color: var(--danger-strong);
  font-size: var(--fs-secondary);
}

/* ── §8 toolbar ───────────────────────────────────────────────────────────────────────────────── */

.prep-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 7px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.prep-toolbar__group { display: flex; align-items: center; gap: 6px; }
.prep-toolbar__right { margin-left: auto; }

.prep-toolbar__zoom {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  gap: 0;
}

.prep-zoom {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 4px 11px;
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
  color: var(--text-secondary);
}
.prep-zoom:last-child { border-right: 0; }
.prep-zoom.is-active { background: var(--primary); color: #fff; font-weight: var(--fw-semibold); }

.prep-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-label);
  color: var(--text-secondary);
  white-space: nowrap;
}
.prep-inline-check input { margin: 0; }

.prep-filter { display: inline-flex; align-items: center; gap: 6px; }
.prep-filter__label { font-size: var(--fs-label); color: var(--text-secondary); }
.prep-filter select { height: var(--control-h-sm); font-size: var(--fs-label); }

.prep-warnflag {
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  padding: 4px 9px;
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
  color: var(--text-secondary);
}
.prep-warnflag.is-on {
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning-text);
  font-weight: var(--fw-semibold);
}

/* ── §7/§9/§10 the chart ──────────────────────────────────────────────────────────────────────── */

.prep-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

/* The chart host exists so a redraw replaces the chart WITHOUT touching the drawer element —
   moving a focused node blurs it, and blurring it mid-sentence loses the rest of the sentence. */
.prep-chart-host {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.prep-gantt {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  min-height: 0;
  background: var(--bg-surface);
  overflow: hidden;
}

.prep-gantt--empty { display: block; padding: 32px; }

/* The WBS pane does NOT scroll itself horizontally — that is what "sticky" means here: the names
   stay put while the timeline moves under them. Its vertical position is synced to the timeline. */
.prep-wbs {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 2px solid var(--border-strong);
  min-height: 0;
}

.prep-wbs__head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 74px 78px;
  gap: 6px;
  align-items: end;
  height: 44px;
  padding: 0 8px 6px;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-strong);
}
.prep-wbs__head-duration { text-align: right; }

.prep-wbs__scroll { overflow: hidden; min-height: 0; }
.prep-wbs__rows { position: relative; }

.prep-wbs__row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-right: 8px;
  border-bottom: 1px solid var(--bg-subtle);
  font-size: var(--fs-secondary);
}
.prep-wbs__row:hover { background: var(--bg-subtle); }
.prep-wbs__row.is-selected { background: var(--primary-soft); }
.prep-wbs__row--summary { font-weight: var(--fw-semibold); background: rgba(0, 0, 0, .015); }
.prep-wbs__row.is-critical .prep-wbs__code { color: var(--danger); }

.prep-wbs__twisty {
  appearance: none;
  border: 0;
  background: none;
  width: 16px;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  flex: none;
}
.prep-wbs__twisty--leaf { cursor: default; }

.prep-wbs__code {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  width: 44px;
  flex: none;
}

.prep-wbs__icon { flex: none; color: var(--text-secondary); font-size: 11px; }

.prep-wbs__title {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

.prep-wbs__people { display: flex; gap: 2px; flex: none; }

.prep-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--info-soft);
  color: var(--info-strong);
  font-size: 9px;
  font-weight: var(--fw-bold);
}
.prep-avatar--more { background: var(--bg-subtle); color: var(--text-secondary); }

.prep-wbs__duration {
  flex: none;
  width: 78px;
  text-align: right;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* The timeline is the one element that scrolls in both directions. */
.prep-time { overflow: auto; min-height: 0; position: relative; }
.prep-time__canvas { position: relative; }

.prep-axis {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-strong);
  height: 44px;
}
.prep-axis__row { display: flex; height: 22px; }
.prep-axis__group {
  flex: none;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  padding-left: 4px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
}
.prep-axis__cell {
  flex: none;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 22px;
  border-right: 1px solid var(--bg-subtle);
}
.prep-axis__cell--off { background: rgba(0, 0, 0, .05); }

.prep-plot { position: relative; }

.prep-grid { position: absolute; inset: 0; }
.prep-grid__col {
  position: absolute;
  top: 0;
  border-right: 1px solid var(--bg-subtle);
}
.prep-grid__col--off { background: rgba(0, 0, 0, .035); }

.prep-today {
  position: absolute;
  top: 0;
  width: 0;
  border-left: 2px dashed var(--danger);
  z-index: 2;
}

.prep-deps { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.prep-dep { fill: none; stroke: var(--text-muted); stroke-width: 1; }
.prep-dep.is-critical { stroke: var(--danger); stroke-width: 1.4; }
.prep-dep__head { fill: var(--text-muted); }
.prep-dep__head.is-critical { fill: var(--danger); }

.prep-bar {
  position: absolute;
  height: 20px;
  border-radius: 3px;
  z-index: 3;
  cursor: grab;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, .12);
}
.prep-bar.is-dragging { cursor: grabbing; opacity: .8; z-index: 6; }
.prep-bar--todo { background: #C7CBD3; }
.prep-bar--run { background: var(--info); }
.prep-bar--done { background: var(--success); }
.prep-bar--late { background: var(--danger); }
.prep-bar--cus { background: var(--purple); }
.prep-bar.is-critical { box-shadow: 0 0 0 2px var(--danger); }

.prep-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .38);
}

.prep-bar__text {
  position: relative;
  padding: 0 6px;
  font-size: 10px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.prep-bar__grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, .35);
  opacity: 0;
}
.prep-bar:hover .prep-bar__grip { opacity: 1; }
.prep-bar__grip--start { left: 0; }
.prep-bar__grip--end { right: 0; }

/* A summary row is a bracket, not a block: nothing to grab, because QT2 says it owns no dates. */
.prep-bar--summary {
  height: 12px;
  background: var(--text-primary);
  border-radius: 2px;
  cursor: default;
}
.prep-bar__cap {
  position: absolute;
  bottom: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-primary);
}
.prep-bar__cap--start { left: 0; }
.prep-bar__cap--end { right: 0; }

.prep-ms {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--accent-gold);
  transform: rotate(45deg);
  z-index: 4;
  cursor: grab;
}
.prep-ms.is-critical { box-shadow: 0 0 0 2px var(--danger); }
.prep-ms__label {
  position: absolute;
  left: 18px;
  top: 0;
  transform: rotate(-45deg);
  transform-origin: 0 0;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.prep-baseline {
  position: absolute;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--text-muted) 0 4px, transparent 4px 7px);
  z-index: 2;
}
.prep-actual {
  position: absolute;
  height: 4px;
  background: var(--success-strong);
  border-radius: 2px;
  z-index: 3;
}

/* ── §14 drawer ───────────────────────────────────────────────────────────────────────────────── */

.prep-drawer {
  width: 380px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.prep-drawer[hidden] { display: none; }

.prep-drawer__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.prep-drawer__code { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted); }
.prep-drawer__head h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prep-drawer__body { overflow: auto; padding: 12px; }

.prep-drawer__section { margin-bottom: 16px; }
.prep-drawer__section h4 {
  margin: 0 0 8px;
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}

.prep-drawer__lock {
  margin: 0 0 8px;
  padding: 6px 8px;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
  color: var(--warning-text);
}

.prep-drawer__danger h4 { color: var(--danger-strong); }

.prep-field {
  display: block;
  margin-bottom: 9px;
  font-size: var(--fs-label);
  color: var(--text-secondary);
}
.prep-field input,
.prep-field select,
.prep-field textarea {
  display: block;
  width: 100%;
  margin-top: 3px;
  font-size: var(--fs-secondary);
}
.prep-field input:disabled,
.prep-field select:disabled,
.prep-field textarea:disabled {
  background: var(--bg-subtle);
  color: var(--text-disabled);
}
.prep-field__readonly { margin: 0 0 9px; font-size: var(--fs-label); color: var(--text-secondary); }

.prep-assign { margin-bottom: 10px; }
.prep-assign__label {
  display: block;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.prep-assign__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.prep-assign select { width: 100%; font-size: var(--fs-label); }

.prep-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-meta);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.prep-chip--person { cursor: pointer; background: var(--info-soft); color: var(--info-strong); border-color: var(--info-border); }
.prep-chip--ok { background: var(--success-soft); color: var(--success-text); }
.prep-chip--wait { background: var(--warning-soft); color: var(--warning-text); }
.prep-chip--stop { background: var(--danger-soft); color: var(--danger-strong); }
.prep-chip--mute { background: var(--bg-subtle); }

.prep-deps-edit__list { list-style: none; margin: 0 0 8px; padding: 0; }
.prep-deps-edit__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--fs-meta);
  border-bottom: 1px solid var(--bg-subtle);
}
.prep-deps-edit__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-deps-edit__add { display: grid; gap: 5px; }
.prep-deps-edit__lag { font-size: var(--fs-meta); color: var(--text-secondary); }
.prep-deps-edit__lag input { width: 100%; }

.prep-checklist { list-style: none; margin: 0 0 6px; padding: 0; }
.prep-checklist li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--fs-meta);
  border-bottom: 1px solid var(--bg-subtle);
}
.prep-checklist__add { display: flex; gap: 5px; }
.prep-checklist__add input { flex: 1 1 auto; min-width: 0; }

.prep-icon-btn {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
}
.prep-icon-btn:hover { color: var(--danger); }

/* ── §16–§28 the other tabs ───────────────────────────────────────────────────────────────────── */

.prep-panel { padding: 14px 16px 32px; }

.prep-panel__head h3,
.prep-section__head h3 {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: .05em;
  color: var(--text-primary);
}

.prep-panel__note {
  margin: 3px 0 10px;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  max-width: 90ch;
}

.prep-section {
  margin-bottom: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.prep-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.prep-section__head .prep-panel__note { flex: 1 1 320px; }

.prep-empty {
  margin: 0;
  padding: 14px;
  font-size: var(--fs-secondary);
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.prep-empty--error { background: var(--danger-soft); color: var(--danger-strong); }

.prep-scroll-x { overflow-x: auto; }

.prep-table { width: 100%; border-collapse: collapse; font-size: var(--fs-secondary); }
.prep-table th,
.prep-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.prep-table thead th {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  white-space: nowrap;
}
.prep-table__strong { font-weight: var(--fw-semibold); }
.prep-table__note input { width: 100%; min-width: 150px; font-size: var(--fs-meta); }
.prep-table__ops { white-space: nowrap; }
.prep-sub { display: block; font-size: var(--fs-meta); color: var(--text-muted); }

.prep-load__who { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.prep-load__day { text-align: center; font-variant-numeric: tabular-nums; }
.prep-load__cell { text-align: center; font-variant-numeric: tabular-nums; }
.prep-load__cell--idle { color: var(--text-disabled); }
.prep-load__cell--over { background: var(--danger-soft); color: var(--danger-strong); font-weight: var(--fw-bold); }
.prep-load__total { font-variant-numeric: tabular-nums; white-space: nowrap; }

.prep-meter {
  display: inline-block;
  width: 54px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  overflow: hidden;
  vertical-align: middle;
}
.prep-meter__fill { display: block; height: 100%; background: var(--info); }
.prep-meter__fill.is-over { background: var(--danger); }

/* ── §25–§27 warnings and readiness, kept structurally apart ──────────────────────────────────── */

.prep-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prep-warning {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--fs-secondary);
}
.prep-warning--danger { background: var(--danger-soft); border-color: var(--danger-border); }
.prep-warning--warn { background: var(--warning-soft); border-color: var(--warning-border); }
.prep-warning--info { background: var(--info-soft); border-color: var(--info-border); }
.prep-warning__level {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.prep-warning__body { display: grid; gap: 2px; }
.prep-warning__body span { font-size: var(--fs-meta); color: var(--text-secondary); }

.prep-readiness-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  margin-bottom: 12px;
}
.prep-readiness-summary__score { display: flex; align-items: baseline; gap: 10px; }
.prep-readiness-summary__label {
  font-size: var(--fs-meta);
  letter-spacing: .05em;
  color: var(--text-secondary);
}
.prep-readiness-summary__percent { font-size: 28px; font-weight: var(--fw-bold); line-height: 1; }
.prep-readiness-summary__state {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.prep-state--not_ready { background: var(--danger-soft); color: var(--danger-strong); }
.prep-state--conditional { background: var(--warning-soft); color: var(--warning-text); }
.prep-state--ready { background: var(--success-soft); color: var(--success-text); }
.prep-readiness-summary__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
}

.prep-catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.prep-catcard {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
}
.prep-catcard.is-blocked { border-color: var(--danger-border); background: var(--danger-soft); }
.prep-catcard__name { flex: 1 1 auto; color: var(--text-secondary); }
.prep-catcard__count { font-weight: var(--fw-bold); }
.prep-catcard__blockers { color: var(--danger-strong); font-weight: var(--fw-semibold); }

.prep-blockers { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.prep-blocker {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: var(--fs-secondary);
}
.prep-blocker--open { background: var(--danger-soft); border-color: var(--danger-border); }
.prep-blocker--exception { background: var(--warning-soft); border-color: var(--warning-border); }
.prep-blocker--advisory { background: var(--bg-subtle); }
.prep-blocker__text { display: grid; gap: 1px; min-width: 0; }
.prep-blocker__why { font-size: var(--fs-meta); color: var(--warning-text); }

.prep-review__status,
.prep-review__readiness,
.prep-review__returned,
.prep-review__self {
  margin: 0 0 8px;
  font-size: var(--fs-secondary);
}
.prep-review__returned { color: var(--danger-strong); }
.prep-review__self {
  padding: 8px 10px;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius-sm);
  color: var(--warning-text);
}
.prep-review__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── dialogs ──────────────────────────────────────────────────────────────────────────────────── */

/* Same collision, same remedy — a nested dialog is an overlay, not a card. */
.prep-dialog {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  max-height: none;
  overflow: auto;
  border-radius: 0;
  box-shadow: none;
  padding: 18px;
  background: rgba(15, 23, 42, 0.45);
}
.prep-dialog.open { display: flex; }
.prep-dialog__panel { width: min(520px, 94vw); }
.prep-dialog__body { display: grid; gap: 4px; }
.prep-dialog__what { margin: 0 0 6px; font-size: var(--fs-secondary); }
.prep-dialog__summary { margin: 0 0 8px; padding-left: 18px; font-size: var(--fs-secondary); }
.prep-dialog__error {
  margin: 8px 0 0;
  color: var(--danger-strong);
  font-size: var(--fs-secondary);
}
.prep-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ── §32/§33 the customer PDF ─────────────────────────────────────────────────────────────────── */

.prep-preview__panel {
  width: min(1500px, 97vw);
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.prep-preview {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
@media (max-width: 900px) {
  .prep-preview { grid-template-columns: minmax(0, 1fr); }
}

.prep-export { display: grid; gap: 5px; align-content: start; }
.prep-export h3 { margin: 0 0 4px; font-size: var(--fs-label); letter-spacing: .05em; }
.prep-export__option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-secondary);
}
.prep-export__option--internal { color: var(--warning-text); }
.prep-export__tag {
  font-size: var(--fs-meta);
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--warning-soft);
}
.prep-export__mode {
  margin: 8px 0;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
  background: var(--success-soft);
  color: var(--success-text);
}
.prep-export__mode[data-prep-export-mode="internal"] {
  background: var(--danger-soft);
  color: var(--danger-strong);
}

/* ── §3 the Step 6 card on Project detail ─────────────────────────────────────────────────────── */

.prep-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 12px;
  margin-top: 12px;
}
.prep-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.prep-card__title { margin: 0; font-size: var(--fs-label); letter-spacing: .05em; }
.prep-card__rev { font-size: var(--fs-meta); color: var(--text-secondary); font-family: var(--font-mono); }
.prep-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.prep-card__fact {
  border-left: 3px solid var(--border);
  padding-left: 8px;
  display: grid;
  gap: 1px;
}
.prep-card__fact-label { font-size: var(--fs-meta); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.prep-card__fact-value { font-size: var(--fs-secondary); font-weight: var(--fw-semibold); }
.prep-card__fact--ok { border-left-color: var(--success); }
.prep-card__fact--warn { border-left-color: var(--warning); }
.prep-card__fact--stop { border-left-color: var(--danger); }
.prep-card__blocker {
  margin: 0 0 10px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger-strong);
  font-size: var(--fs-secondary);
}
.prep-card__blocker-label {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--fw-bold);
}
.prep-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── §36 responsive ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .prep-gantt { grid-template-columns: 320px minmax(0, 1fr); }
  .prep-wbs__head { grid-template-columns: 44px minmax(0, 1fr) 54px 66px; }
  .prep-drawer { width: 320px; }
}

@media (max-width: 1024px) {
  .prep-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The drawer stops being a column and becomes an overlay: below this width a third column leaves
     the timeline too narrow to read, which §36 forbids more strongly than it asks for a sidebar. */
  .prep-plan { grid-template-columns: minmax(0, 1fr); }
  .prep-drawer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(380px, 92vw);
    z-index: 8;
    box-shadow: var(--shadow-dropdown);
  }
  .prep-body[data-prep-active-tab="plan"] { position: relative; }
}

@media (max-width: 720px) {
  .prep-head { grid-template-columns: minmax(0, 1fr) auto; }
  .prep-head__id { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
  .prep-gantt { grid-template-columns: 200px minmax(0, 1fr); }
  .prep-drawer { width: 100vw; }
}

/* =================================================================================================
   REWORK §8–§10 — ONE MODAL SYSTEM.

   The dialogs looked raw because each was hand-written markup with its own spacing and its own idea
   of a footer. These rules are the whole visual contract now: header, a body of sections, a footer
   with the primary action on the right. A new dialog inherits all of it and cannot drift.
   ================================================================================================= */

.prep-dialog--sm .pdlg { width: min(440px, 94vw); }
.prep-dialog--md .pdlg { width: min(580px, 94vw); }
.prep-dialog--lg .pdlg { width: min(800px, 94vw); }

.pdlg {
  padding: 0;
  max-height: min(88vh, 880px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(16, 24, 40, .22);
  overflow: hidden;
  background: var(--bg-surface);
}

/* ── header ───────────────────────────────────────────────────────────────────────────────────── */

.pdlg-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--border);
}

.pdlg-head__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.pdlg-head__sub {
  margin: 3px 0 0;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  line-height: 1.45;
}

.pdlg-close {
  appearance: none;
  border: 0;
  background: none;
  padding: 4px;
  margin: -4px -4px 0 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 0;
}
.pdlg-close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.pdlg-close i { width: 18px; height: 18px; }

/* ── body ─────────────────────────────────────────────────────────────────────────────────────── */

.pdlg-body { overflow: auto; padding: 16px 18px 18px; }

/* LABOR-TIME-01 policy patch — a sentence the reader must not skim past, above everything else in the
   body. Warning tone, not danger: the act is permitted, it is only unusual. */
.pdlg-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  font-size: var(--fs-secondary);
  font-weight: 600;
  line-height: 1.5;
}
.pdlg-warning svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--warning-strong); }

.pdlg-lead {
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  border: 1px solid var(--info-border);
  color: var(--info-strong);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.pdlg-section + .pdlg-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pdlg-section__title {
  margin: 0 0 2px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: .07em;
  color: var(--text-secondary);
}

.pdlg-section__hint {
  margin: 0 0 10px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.5;
}
.pdlg-section__title + .pdlg-grid { margin-top: 10px; }

/* §10 — two columns, so two short fields sit together instead of each taking a line and pushing the
   footer a long way from the body. A field opts out with span: 2. */
.pdlg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}

.pdlg-field { display: grid; gap: 5px; min-width: 0; }
.pdlg-field--wide { grid-column: 1 / -1; }

.pdlg-field__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.pdlg-req { color: var(--danger); font-style: normal; margin-left: 2px; }

.pdlg-field__hint {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.45;
}

.pdlg-field input[type="text"],
.pdlg-field input[type="number"],
.pdlg-field input[type="date"],
.pdlg-field input[type="datetime-local"],
.pdlg-field select,
.pdlg-field textarea {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 10px;
  font: inherit;
  font-size: var(--fs-secondary);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
}

.pdlg-field textarea { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }

.pdlg-field input:focus,
.pdlg-field select:focus,
.pdlg-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.pdlg-field.is-invalid input,
.pdlg-field.is-invalid select,
.pdlg-field.is-invalid textarea { border-color: var(--danger); }

/* §16 — a computed value is a FACT, not a disabled box. Grey inputs everywhere made the panel look
   broken; a display row reads as something the system knows. */
.pdlg-field--static { gap: 3px; }
.pdlg-static {
  font-size: var(--fs-secondary);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding: 7px 0 6px;
  border-bottom: 1px dashed var(--border);
}

.pdlg-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-secondary);
  color: var(--text-primary);
  cursor: pointer;
  min-height: var(--control-h);
}
.pdlg-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }

/* ── §13 catalogue lookup ─────────────────────────────────────────────────────────────────────── */

.pdlg-search { position: relative; }

.pdlg-search__drop {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  max-height: 230px;
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
}

.pdlg-search__hit {
  display: grid;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--bg-subtle);
  background: none;
  font: inherit;
  cursor: pointer;
}
.pdlg-search__hit:hover { background: var(--primary-soft); }
.pdlg-search__name { font-size: var(--fs-secondary); color: var(--text-primary); }
.pdlg-search__meta { font-size: var(--fs-meta); color: var(--text-muted); }

/* ── footer ───────────────────────────────────────────────────────────────────────────────────── */

.pdlg-error {
  margin: 0;
  padding: 9px 18px;
  background: var(--danger-soft);
  color: var(--danger-strong);
  font-size: var(--fs-secondary);
  border-top: 1px solid var(--danger-border);
}

.pdlg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}
.pdlg-foot__note {
  margin-right: auto;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .pdlg-grid { grid-template-columns: minmax(0, 1fr); }
  .pdlg-field--wide { grid-column: auto; }
}

/* =================================================================================================
   REWORK §16 — the drawer computed readout
   ================================================================================================= */

.prep-readout {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  padding: 10px;
  margin-bottom: 10px;
}

.prep-readout__why {
  margin: 0 0 8px;
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  line-height: 1.45;
}

.prep-readout__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.prep-readout__grid > div { display: grid; gap: 1px; min-width: 0; }
.prep-readout__grid dt {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.prep-readout__grid dd {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* =================================================================================================
   REWORK §6 — the material tab, split by provenance
   ================================================================================================= */

.prep-subsection { margin-top: 12px; }
.prep-subsection__title {
  margin: 0 0 6px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.prep-subsection__title span {
  margin-left: 6px;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.prep-section__actions { display: flex; gap: 6px; margin-left: auto; }

.prep-restable td { vertical-align: top; }
.prep-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.prep-linkish {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted var(--border-strong);
}
.prep-linkish:hover { color: var(--primary-strong); border-bottom-color: var(--primary); }

.prep-chip--src { background: var(--info-soft); color: var(--info-strong); border-color: var(--info-border); }
.prep-chip--add { background: var(--purple-soft); color: var(--purple); border-color: var(--purple); }
.prep-chip--warn { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning-border); }

.prep-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: var(--fs-secondary);
}
.prep-banner > div { display: grid; gap: 2px; }
.prep-banner span { font-size: var(--fs-meta); line-height: 1.45; }
.prep-banner button { margin-left: auto; flex: none; }
.prep-banner--warn {
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

/* =================================================================================================
   REWORK §18–§26 — THE CUSTOMER DOCUMENT.

   A formal PRESTEC document, in the same visual language as the quotation and the contract: the
   official logo asset, the company block, the orange rule, the same greys and the same weights.
   The first version rendered the company name as plain text and read as a demo page beside them.

   §25 — the PREVIEW shows real sheets. Each page is a fixed A4 rectangle with a shadow and a gap,
   so what a reader sees on screen is the pagination they will get on paper, including where the
   Gantt breaks.
   ================================================================================================= */

.prep-preview__paper {
  background: #E9EAEE;
  padding: 14px;
}

.pp-page {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 14px;
  padding: 12mm 12mm 16mm;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .16);
  font-family: var(--font);
  font-size: 10pt;
  line-height: 1.5;
  color: #1a1a1a;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.pp-page--landscape { width: 297mm; min-height: 210mm; }

/* ── §19/§24 letterhead and running head ──────────────────────────────────────────────────────── */

.pp-head { display: flex; gap: 5mm; align-items: flex-start; }
.pp-head__logo { width: 44mm; flex: none; }
.pp-head__logo img { width: 100%; display: block; }
.pp-head__co { flex: 1; text-align: center; line-height: 1.35; }

.pp-co-n1 {
  font-weight: 700;
  font-size: 11.5pt;
  color: var(--primary-strong);
  text-transform: uppercase;
}
.pp-co-n2 { font-weight: 600; font-size: 8.5pt; color: #6b6b6b; letter-spacing: .02em; }
.pp-co-ln { font-size: 8.5pt; color: #6b6b6b; margin-top: 3px; }
.pp-co-meta {
  margin-top: 3px;
  font-size: 8.5pt;
  color: #6b6b6b;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pp-co-meta b { font-weight: 600; color: #1a1a1a; }

.pp-rule { height: 3px; background: var(--primary); margin: 4px 0 0; }
.pp-rule--thin { height: 1.5px; }

.pp-running__bar {
  display: flex;
  align-items: center;
  gap: 4mm;
  font-size: 8pt;
  color: #6b6b6b;
}
.pp-running__logo { height: 7mm; width: auto; }
.pp-running__doc { font-weight: 600; letter-spacing: .08em; color: #1a1a1a; }
.pp-running__ref { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── §20 footer with page numbering ───────────────────────────────────────────────────────────── */

.pp-foot {
  display: flex;
  align-items: baseline;
  gap: 6mm;
  padding-top: 3mm;
  margin-top: 4mm;
  border-top: 1px solid #d7d7d7;
  font-size: 7.5pt;
  color: #8a8a8a;
}
.pp-foot__co { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-foot__ref { white-space: nowrap; }
.pp-foot__page { white-space: nowrap; font-variant-numeric: tabular-nums; color: #1a1a1a; }

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

/* ── §21 cover ────────────────────────────────────────────────────────────────────────────────── */

.pp-cover { text-align: center; padding-top: 22mm; }
.pp-title {
  margin: 0;
  font-size: 22pt;
  font-weight: 700;
  letter-spacing: .05em;
  color: #1a1a1a;
}
.pp-title__en {
  margin: 3mm 0 0;
  font-size: 10.5pt;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--primary-strong);
}
.pp-cover__name { margin: 10mm 0 12mm; font-size: 13pt; font-weight: 600; color: #333; }

.pp-meta { margin: 0 auto; border-collapse: collapse; text-align: left; min-width: 120mm; }
.pp-meta th, .pp-meta td {
  padding: 2mm 5mm;
  border-bottom: 1px solid #e2e2e2;
  font-size: 10pt;
  vertical-align: top;
}
.pp-meta th { color: #6b6b6b; font-weight: 500; width: 45mm; }
.pp-meta td { font-weight: 500; }

.pp-mode {
  display: inline-block;
  margin: 14mm auto 0;
  padding: 2.5mm 5mm;
  border: 1px solid var(--primary);
  border-left-width: 3px;
  font-size: 8.5pt;
  color: #333;
}

/* ── content ──────────────────────────────────────────────────────────────────────────────────── */

.pp-h2 {
  margin: 0 0 4mm;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: .05em;
  color: #1a1a1a;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 1.5mm;
}
.pp-h2__cont { font-size: 8.5pt; font-weight: 400; color: #8a8a8a; letter-spacing: 0; }

.pp-h3 {
  margin: 7mm 0 2.5mm;
  font-size: 10.5pt;
  font-weight: 700;
  color: #333;
}

.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th, .pp-table td {
  padding: 1.6mm 2.5mm;
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
  font-size: 9.5pt;
  vertical-align: top;
}
.pp-table thead th {
  background: #f3f3f3;
  font-weight: 600;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #555;
}
.pp-table__summary { font-weight: 600; background: #fafafa; }

.pp-scope { margin: 0; padding-left: 6mm; font-size: 10pt; }
.pp-scope li { margin-bottom: 1.2mm; }
.pp-note { margin: 2mm 0 0; font-size: 9pt; color: #6b6b6b; }

.pp-sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12mm;
  margin-top: 14mm;
  text-align: center;
}
.pp-sign__box {
  border-top: 1px solid #d7d7d7;
  padding-top: 3mm;
  min-height: 28mm;
}
.pp-sign__box span { display: block; font-size: 9pt; font-weight: 700; letter-spacing: .04em; }
.pp-sign__box i { display: block; font-size: 8pt; color: #8a8a8a; font-style: italic; margin-top: 1mm; }

/* ── §22 the printed chart ────────────────────────────────────────────────────────────────────── */

/* Shrinks to the chart and centres, so a three-day plan is a chart rather than three bars
   marooned in a page-wide grid of empty rows. */
.pp-gantt { width: auto; margin: 0 auto; border-collapse: collapse; table-layout: fixed; }
.pp-gantt__name {
  width: 58mm;
  font-size: 8.5pt;
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid #ececec;
  padding-top: .8mm;
  padding-bottom: .8mm;
}
.pp-gantt__track { border-bottom: 1px solid #ececec; padding: 0; }
.pp-gantt__axis { border-bottom: 1.5px solid #999; }
.pp-gantt__axis-row { display: flex; }
.pp-gantt__month {
  font-size: 8pt;
  font-weight: 600;
  border-right: 1px solid #ccc;
  text-align: center;
  color: #333;
}
.pp-gantt__day {
  font-size: 7pt;
  text-align: center;
  color: #666;
  border-right: 1px solid #f0f0f0;
}
.pp-gantt__day--off { background: #ececec; color: #999; }
.pp-gantt__lane { position: relative; display: block; height: 5.4mm; }
.pp-gantt__bar { position: absolute; top: 1.3mm; height: 2.8mm; border-radius: .6mm; background: #5b6472; }
.pp-gantt__bar--summary { background: #1a1a1a; height: 1.6mm; top: 1.9mm; }
.pp-gantt__bar--customer { background: #8B5CF6; }
.pp-gantt__ms {
  position: absolute;
  top: 1.3mm;
  width: 2.6mm;
  height: 2.6mm;
  margin-left: -1.3mm;
  background: var(--accent-gold);
  transform: rotate(45deg);
}
.pp-gantt__row--summary .pp-gantt__name { font-weight: 700; }

.pp-legend { margin: 3mm 0 0; font-size: 8pt; color: #6b6b6b; display: flex; gap: 5mm; align-items: center; }
.pp-key { display: inline-block; width: 4mm; height: 2mm; border-radius: .4mm; margin-right: 1mm; }
.pp-key--task { background: #5b6472; }
.pp-key--customer { background: #8B5CF6; }
.pp-key--ms { background: var(--accent-gold); transform: rotate(45deg); width: 2.4mm; height: 2.4mm; }
.pp-key--off { background: #ececec; border: 1px solid #d7d7d7; }

/* ── printing ─────────────────────────────────────────────────────────────────────────────────── */

@media print {
  body.prep-printing > *:not(#prepWorkspace) { display: none !important; }
  body.prep-printing #prepWorkspace .prep-panel-shell > *:not([data-prep-dialog-host]) { display: none !important; }
  body.prep-printing .prep-dialog--preview,
  body.prep-printing .prep-preview__panel {
    position: static;
    box-shadow: none;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    background: #fff;
  }
  body.prep-printing .prep-export,
  body.prep-printing .modal-header { display: none !important; }
  body.prep-printing .prep-preview { display: block; }
  body.prep-printing .prep-preview__paper { overflow: visible; background: #fff; padding: 0; }
  body.prep-printing .pp-page {
    box-shadow: none;
    margin: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    break-after: page;
    page-break-after: always;
  }
  body.prep-printing .pp-page:last-child { break-after: auto; page-break-after: auto; }
  /* Rows and their bars stay together; a task whose name printed on one sheet and whose bar
     printed on the next would be worse than a page break in a sensible place. */
  body.prep-printing .pp-gantt__row,
  body.prep-printing .pp-table tr { break-inside: avoid; page-break-inside: avoid; }
  /* §21/§22 — a portrait document whose CHART pages turn sideways.
     Named pages are how CSS expresses that, and Chromium has supported them since 85. The cover,
     the summary and the tables are portrait because that is what a formal document looks like; the
     Gantt gets the long edge because that is what makes a six-week plan legible. Without this the
     whole document would have to pick one, and either the cover or the chart would be wrong. */
  @page { size: A4 portrait; margin: 10mm; }
  @page prep-gantt { size: A4 landscape; margin: 8mm; }
  body.prep-printing .pp-page--landscape { page: prep-gantt; }
}

/* ── §1 — the Chuẩn bị sub-workflow panel in the process side column ─────────────────────────────
   Eight rows read top to bottom, so the eye needs a spine to run down and one accent per row. The
   status word carries the colour; the label stays plain, because eight coloured labels is a list
   nobody can scan. */
.prep-flow__summary {
  margin: 0 0 10px;
  font-size: var(--fs-sm, 12px);
  color: var(--text-muted, #64748b);
}
.prep-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border, #e2e8f0);
}
.prep-flow__step {
  display: flex;
  gap: 8px;
  padding: 8px 0 8px 10px;
  margin-left: -2px;
  border-left: 2px solid transparent;
}
.prep-flow__step + .prep-flow__step { border-top: 1px solid var(--border, #e2e8f0); }
.prep-flow__index {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-muted, #64748b);
}
.prep-flow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prep-flow__label {
  font-size: var(--fs-sm, 12px);
  font-weight: 600;
  color: var(--text, #0f172a);
  line-height: 1.35;
}
.prep-flow__status { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.prep-flow__detail { font-size: 11px; color: var(--text-muted, #64748b); }
.prep-flow__notes {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prep-flow__notes li {
  font-size: 11px;
  line-height: 1.35;
  color: #b91c1c;
  padding-left: 8px;
  border-left: 2px solid #fca5a5;
  word-break: break-word;
}
.prep-flow__more { color: var(--text-muted, #64748b) !important; border-left-color: var(--border, #e2e8f0) !important; }

.prep-flow__step--todo .prep-flow__status { color: var(--text-muted, #94a3b8); }
.prep-flow__step--doing { border-left-color: var(--primary, #ea5a0c); }
.prep-flow__step--doing .prep-flow__status { color: var(--primary, #ea5a0c); }
.prep-flow__step--doing .prep-flow__index {
  background: color-mix(in srgb, var(--primary, #ea5a0c) 14%, transparent);
  color: var(--primary, #ea5a0c);
}
.prep-flow__step--done { border-left-color: #16a34a; }
.prep-flow__step--done .prep-flow__status { color: #16a34a; }
.prep-flow__step--done .prep-flow__index { background: #dcfce7; color: #15803d; }
.prep-flow__step--blocked { border-left-color: #dc2626; background: #fef2f2; }
.prep-flow__step--blocked .prep-flow__status { color: #b91c1c; }
.prep-flow__step--blocked .prep-flow__index { background: #fee2e2; color: #b91c1c; }