/* ============================
   Solution Report Styles
   ============================ */

/* --- Shared Section Layout --- */
.solution-report-section {
  margin-bottom: 2em;
}

.solution-report-section h2 {
  font-size: 1.2em;
  margin-bottom: 0.4em;
  border-bottom: 2px solid #bbb;
  padding-bottom: 0.2em;
}

/* #region Collapsible Section Styling */

/* Make all <details> behave like inline headers with arrow beside <h2> */
details.solution-report-section {
  margin-bottom: 2em;
  border: none;
}

/* Summary behaves like a single header row */
details.solution-report-section summary {
  display: flex; /* arrow + heading on one line */
  align-items: center;
  cursor: pointer;
  list-style: none; /* hide default arrow */
  padding: 0;
  margin: 0;
  outline: none;
}

/* Heading style (keeps your existing look) */
details.solution-report-section summary h2 {
  display: inline-block;
  margin: 0;
  font-size: 1.2em;
  border-bottom: 2px solid #bbb;
  padding-bottom: 0.2em;
  padding-left: 4px;
}

/* Custom arrow placement — beside heading */
details.solution-report-section[open] summary::before {
  content: '▼';
  font-size: 0.9em;
  color: #444;
  margin-right: 6px;
}

details.solution-report-section:not([open]) summary::before {
  content: '▶';
  font-size: 0.9em;
  color: #444;
  margin-right: 6px;
}

/* Optional hover for subtle feedback */
details.solution-report-section summary:hover h2 {
  color: #333;
  border-bottom-color: #888;
}

/* #endregion */

/* --- Base Table Style --- */
.soln-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}

.soln-table th,
.soln-table td {
  text-align: left;
  padding: 4px 8px;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

.soln-table th {
  font-weight: 600;
  border-right: 1px solid #ccc;
}

/* ============================
   Section-Specific Variations
   ============================ */

/* --- General --- */
/* Layout wrapper: table (40%) + notes (remaining width) */
.soln-general-wrapper {
  display: flex;
  gap: 24px; /* spacing between table and notes */
  align-items: flex-start;
  margin-top: 8px;
  width: 100%;
}

/* General table must remain fixed at 40% width */
.soln-general {
  width: 40% !important;
  max-width: 40%;
  flex: 0 0 40%; /* prevents flexbox from stretching it */
  margin: 0;
}

/* Notes panel */
.soln-project-notes {
  flex: 1; /* fill remaining width */
  background: #f9fbff;
  border: 1px solid #d9e3f3;
  padding: 12px 16px;
  border-radius: 6px;

  font-size: 0.95rem;
  color: #333;
  box-sizing: border-box;
  white-space: pre-wrap;
  min-height: 100%; /* grow with table height */
}

/* Notes heading */
.soln-project-notes::before {
  content: 'Project Notes';
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #555;
  font-size: 1rem;
}

/* #endregion */

/* #region Provisioning Section */
/* ======================================================
   PROVISIONING REQUIREMENTS — CLEAN SEPARATE TABLE RULES
   ====================================================== */

#srProvisioning .sr-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* honor colgroup widths */
}

#srProvisioning .sr-table th,
#srProvisioning .sr-table td {
  border: 1px solid #ccc;
  padding: 4px 8px;
  vertical-align: middle;
}

/* ------------------------------------------
   COLUMN WIDTH DEFINITIONS (colgroup classes)
   ------------------------------------------ */

/* Shared */
#srProvisioning col.key {
  width: 10%;
}
#srProvisioning col.designation {
  width: 12%;
}
#srProvisioning col.material {
  width: 15%;
}
#srProvisioning col.type {
  width: 12%;
}
#srProvisioning col.thick {
  width: 10%;
}
#srProvisioning col.width {
  width: 10%;
}
#srProvisioning col.length {
  width: 10%;
}

/* Pieces-specific */
#srProvisioning col.name {
  width: 14%;
}
#srProvisioning col.qty {
  width: 8%;
}
#srProvisioning col.rotate {
  width: 7%;
}
#srProvisioning col.okflag {
  width: 6%;
}

/* Products-specific */
#srProvisioning col.provider {
  width: 14%;
}
#srProvisioning col.cost {
  width: 8%;
}
#srProvisioning col.pref {
  width: 10%;
}
#srProvisioning col.limit {
  width: 7%;
}
#srProvisioning col.candidate {
  width: 6%;
}

/* ======================================================
   PIECES TABLE ALIGNMENT (11 columns)
   ------------------------------------------------------
   1 Key
   2 Designation
   3 Material
   4 Type
   5 Name
   6 # Required
   7 Thickness
   8 Width
   9 Length
   10 Can Rotate
   11 OK?
   ====================================================== */

#tblProvPieces td:nth-child(1) {
  text-align: center;
} /* Key */
#tblProvPieces td:nth-child(2),
#tblProvPieces td:nth-child(3),
#tblProvPieces td:nth-child(4),
#tblProvPieces td:nth-child(5) {
  text-align: left;
} /* Desig, Material, Type, Name */

#tblProvPieces td:nth-child(6),
#tblProvPieces td:nth-child(7),
#tblProvPieces td:nth-child(8),
#tblProvPieces td:nth-child(9) {
  text-align: center;
  white-space: nowrap; /* Qty, Thick, Width, Length */
}

#tblProvPieces td:nth-child(10),
#tblProvPieces td:nth-child(11) {
  text-align: center; /* Can Rotate, OK? */
}

/* Header alignment */
#tblProvPieces th:nth-child(1),
#tblProvPieces th:nth-child(6),
#tblProvPieces th:nth-child(7),
#tblProvPieces th:nth-child(8),
#tblProvPieces th:nth-child(9),
#tblProvPieces th:nth-child(10),
#tblProvPieces th:nth-child(11) {
  text-align: center;
}

/* ======================================================
   Piece/Parameter Table Highlighting
   ======================================================= */
/* Solution report highlights */
.sr-row-highlight {
  background-color: #fff4cc;
}

.sr-row-dim {
  opacity: 0.35;
}

/* ======================================================
   PRODUCTS TABLE ALIGNMENT (12 columns)
   ------------------------------------------------------
   1 Key
   2 Designation
   3 Material
   4 Supplier
   5 Type
   6 Thickness
   7 Width
   8 Length
   9 Cost
   10 Preference
   11 Limit
   12 Candidate
   ====================================================== */

#tblProvProducts td:nth-child(1),
#tblProvProducts td:nth-child(12) {
  text-align: center; /* Key, Candidate */
}

#tblProvProducts td:nth-child(2),
#tblProvProducts td:nth-child(3),
#tblProvProducts td:nth-child(4),
#tblProvProducts td:nth-child(5) {
  text-align: left; /* Desig, Material, Supplier, Type */
}

#tblProvProducts td:nth-child(6),
#tblProvProducts td:nth-child(7),
#tblProvProducts td:nth-child(8) {
  text-align: center;
  white-space: nowrap; /* Thickness, Width, Length */
}

#tblProvProducts td:nth-child(9) {
  text-align: right; /* Cost */
  font-variant-numeric: tabular-nums;
}

#tblProvProducts td:nth-child(10),
#tblProvProducts td:nth-child(11) {
  text-align: center; /* Preference, Limit */
}

/* Header alignment */
#tblProvProducts th:nth-child(1),
#tblProvProducts th:nth-child(6),
#tblProvProducts th:nth-child(7),
#tblProvProducts th:nth-child(8),
#tblProvProducts th:nth-child(9),
#tblProvProducts th:nth-child(12) {
  text-align: center;
}

/* Add spacing below the Products table before Purchases */
#tblProvProducts {
  margin-bottom: 1.25rem; /* adjust to taste */
}

/* #endregion */

/* --- Purchases --- */
/* #region Purchases Section */
.soln-purchases {
  width: 100%; /* full internal width */
  max-width: 95%; /* controls margins */
  margin: 0 auto; /* centers table */
  border-collapse: collapse;
  font-size: 0.9em;
  table-layout: fixed; /* 🔥 locks column widths */
}

/* --- Table Headers --- */
.soln-purchases th {
  background-color: #f3f3f3;
  font-weight: 600;
  text-align: center;
  padding: 4px 6px;
  border-bottom: 2px solid #bbb;
  white-space: nowrap; /* prevent wrapping in header */
}

/* --- Table Data --- */
.soln-purchases td {
  background-color: #fff;
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

/* --- Alternating Row Shading --- */
/* .soln-purchases tr:nth-child(even) td { */
/*   background-color: #fafafa; */
/* } */

/* --- Column Alignment and Widths --- */
/* --- Column Alignment and Widths --- */

.soln-purchases .col-provider {
  text-align: left;
  width: 13%;
  padding-left: 8px;
}

.soln-purchases .col-material {
  text-align: left;
  width: 13%;
}

.soln-purchases .col-designation {
  text-align: left;
  width: 8%;
}

.soln-purchases .col-dim {
  text-align: left;
  width: 18%;
  white-space: normal;
  line-height: 1.2;
}

.soln-purchases .col-reqd {
  text-align: center;
  width: 8%;
}

.soln-purchases .col-limit {
  text-align: center;
  width: 8%;
}

.soln-purchases .col-unit {
  text-align: right;
  width: 8%;
  font-variant-numeric: tabular-nums;
}

.soln-purchases .col-total {
  text-align: right;
  width: 8%;
  font-variant-numeric: tabular-nums;
}

.soln-purchases .col-eff {
  text-align: center;
  width: 8%;
}

.soln-purchases .col-pref {
  text-align: center;
  width: 8%;
}

/* --- Provider and Project Totals --- */
.soln-purchases .provider-total td {
  background-color: #e9e9e9;
  font-weight: 600;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

/* --- Subtotal Rows --- */
.subtotal-provider td {
  background-color: #f6f6f6;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

.subtotal-project td {
  background-color: #ddd;
  font-weight: 700;
  border-top: 2px solid #999;
}

.soln-purchases .project-total td {
  background-color: #dcdcdc;
  font-weight: 700;
  border-top: 3px double #999;
  border-bottom: 3px double #999;
}

/* --- Optional: Subtle hover for readability --- */
.soln-purchases tbody tr:hover td {
  background-color: #eef6ff;
}
/* #endregion */

/* --- Purchases Supplies --- */
/* #region Purchases Section */

.soln-purchases-supplies {
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.9em;
  table-layout: auto; /* ✅ flexible layout */
}

/* --- Table Headers --- */
.soln-purchases-supplies th {
  background-color: #f3f3f3;
  font-weight: 600;
  text-align: center;
  padding: 4px 6px;
  border-bottom: 2px solid #bbb;
  white-space: nowrap;
}

/* --- Table Data --- */
.soln-purchases-supplies td {
  background-color: #fff;
  padding: 4px 6px;
  border-bottom: 1px solid #ddd;
  vertical-align: top; /* ✅ better for multi-line text */
  white-space: nowrap; /* default behavior */
}

/* --- Column Behavior --- */

/* Left-aligned text columns */
.soln-purchases-supplies .col-category,
.soln-purchases-supplies .col-type,
.soln-purchases-supplies .col-provider {
  text-align: left;
}

/* 🔥 Description gets priority */
.soln-purchases-supplies .col-description {
  text-align: left;
  width: 40%; /* ✅ give it space */
  white-space: normal; /* ✅ allow wrapping */
  line-height: 1.2;
}

/* Allow provider to wrap slightly if needed */
.soln-purchases-supplies .col-provider {
  white-space: normal;
}

/* Numeric columns */
.soln-purchases-supplies .col-quantity {
  text-align: center;
}

.soln-purchases-supplies .col-unitcost {
  text-align: center;
}

.soln-purchases-supplies .col-totalcost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Totals Row --- */
.soln-purchases-supplies .project-total td {
  background-color: #dcdcdc;
  font-weight: 700;
  border-top: 3px double #999;
  border-bottom: 3px double #999;
}

/* --- Hover --- */
.soln-purchases-supplies tbody tr:hover td {
  background-color: #eef6ff;
}

.soln-purchases {
  margin-bottom: 1rem;
}

/* #endregion */

/* --- Settings --- */
/* #region Settings Section */
.sr-collapsible summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}

.sr-summary {
  font-size: 1.2em;
  border-bottom: 2px solid #999;
  margin-bottom: 0.5rem;
}

.sr-subsummary {
  font-size: 1em;
  border-bottom: 1px solid #ccc;
  margin-top: 0.75rem;
}

.sr-table {
  width: 40%;
  border-collapse: collapse;
  table-layout: fixed; /* forces uniform column widths across all tables */
}

.sr-table td:first-child {
  width: 80%; /* label column */
  padding-right: 0.5rem;
  white-space: normal;
}

.sr-table td:last-child {
  width: 20%; /* value column */
  text-align: left;
  white-space: nowrap;
}

.sr-table th {
  text-align: left;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 8px;
}
.sr-table td {
  border: 1px solid #ccc;
  padding: 4px 8px;
  vertical-align: top;
}

/* #endregion */

/* --- Execution --- */
.soln-execution th {
  background-color: #eaf4ff;
}
.soln-execution td {
  background-color: #f7fbff;
}
.soln-execution tr:hover td {
  background-color: #e0f0ff;
}

.execution-panel-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.execution-panel-selector label {
  font-weight: 600;
}

/* ✳️ add these */
.execution-panel-selector select {
  flex: 1;
  max-width: 400px; /* or whatever fits your layout */
}

#btnFinalState {
  display: none;
}

.execution-panel-selector #btnFinalState {
  /* remove margin-left:auto */
  /* optional: */
  margin-left: 0.5rem; /* adds a small buffer from dropdown */
}

/* 🟦 Panel + Drawing Area Layout */
.execution-panel-area {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1rem 0;
  width: 60%;
  min-width: 800px;
  max-width: 1200px;
}
.execution-panel-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.draw-toggle {
  font-size: 0.9rem;
  user-select: none;
}

.draw-toggle input {
  margin-right: 0.25rem;
}

/* Left: Data table container */
.execution-panel-data {
  flex: 0 0 350px; /* fixed width for the table column */
}

/* --- Panel Data Table --- */
#tblExecutionPanelData {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed; /* Keeps layout stable */
}

#tblExecutionPanelData th,
#tblExecutionPanelData td {
  border: 1px solid #ddd;
  padding: 6px 10px;
  vertical-align: top;
}

/* Left column: allow wrapping, no truncation */
#tblExecutionPanelData th {
  width: 45%; /* slight bump to fit longer labels */
  background-color: #f0f4f8;
  text-align: left;
  white-space: normal; /* ✅ allow wrapping */
  word-break: break-word; /* ✅ break long words if needed */
  overflow: visible; /* ✅ prevent clipping */
}

/* Right column: clean, contained values */
#tblExecutionPanelData td {
  width: 55%;
  background-color: #fff;
  text-align: left;
  word-break: break-word;
  white-space: normal;
  overflow: hidden; /* ensures no bleed */
}

#tblExecutionSteps tr.selected td {
  background-color: #ffec80; /* light yellow */
}

/* =============================
   Execution Drawing Area (Clean)
   ============================= */

/* Right: Drawing area wrapper */
.execution-svg {
  flex: 1;
  min-width: 400px;
  min-height: 400px;
  border: 1px dashed #aaa;
  border-radius: 8px;
  background-color: #f9f9f9;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: visible; /* allow image to expand naturally */
}

/* Display container for captured panel images */
/* Let container claim more horizontal space */
#executionDisplay {
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  border: none; /* 🟢 remove outline */
  border-radius: 0; /* optional reset */
  display: block;
  position: relative;
  overflow: hidden;
}

/* Inserted image (panel preview) */
#executionDisplay img {
  display: block;
  width: 140%; /* scale up */
  height: auto;
  max-height: 480px; /* ✅ cap vertical size */
  object-fit: contain;
  background: #fff;
  border-radius: 2px;
  margin: 0 auto;
}

/* Optional: in case canvas is ever shown directly */
#executionDisplay canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 2px;
}

#executionSVGContainer {
  width: 100%;
  height: 100%;
  border: none; /* 🟢 remove outline */
  border-radius: 0; /* optional — reset rounding */
  background-color: #fff;
  position: relative;
  padding: 4px; /* optional comfort margin */
  overflow: hidden;
}

/* #region Execution Report — Step Table Layout
   ====================================================== */

/* 🟩 Step Report Table — full width, left aligned with wrapper */
#executionReportTable {
  width: 100%; /* span across full screen */
  max-width: none;
  margin-top: 1rem;
  margin-left: calc(
    (100vw - 60vw) / 2 - (100vw * 0.2)
  ); /* aligns left edge under wrapper */
}

/* Ensure the inner table uses the full container width */
#tblExecutionSteps.sr-table {
  width: 100%;
  border-collapse: collapse;
}

/* #endregion Execution Report — Step Table Layout */

/* #region Execution Report — General Columns (1–5)
   ======================================================
   Step, Name/Type, Operation, Useable, Actual
   ====================================================== */

#executionReportTable td:nth-child(-n + 5),
#executionReportTable th:nth-child(-n + 5) {
  font-size: 0.95em; /* match columns 6–11 for overall consistency */
  line-height: 1.25;
  vertical-align: top;
  text-align: left;
  padding: 4px 6px;
}

/* Optional: tighten the multi-line columns like Name/Type and Operation */
#executionReportTable .col-name div,
#executionReportTable .col-action div {
  margin-bottom: 2px;
}

/* Emphasize first line (like piece name or operation) */
#executionReportTable .col-step div:first-child,
#executionReportTable .col-name .name,
#executionReportTable .col-action .op {
  font-weight: 600;
  color: #222;
}

/* #endregion Execution Report — General Columns (1–5) */

/* #region Execution Report — Compact Columns (3–5)
   ======================================================
   Slightly smaller font for Operation and Dimensions
   ====================================================== */

#executionReportTable td:nth-child(3),
#executionReportTable th:nth-child(3),
#executionReportTable td:nth-child(4),
#executionReportTable th:nth-child(4),
#executionReportTable td:nth-child(5),
#executionReportTable th:nth-child(5) {
  font-size: 0.9em; /* a bit smaller than the 0.95em baseline */
  line-height: 1.25;
}

/* Make the operation name still stand out slightly */
#executionReportTable .col-action .op {
  font-weight: 600;
  color: #222;
}

/* #endregion Execution Report — Compact Columns (3–5) */

/* #region Execution Report — Edge Columns
   ======================================================
   Applies to columns 8–11 (Top, Bottom, Left, Right Edges)
   ====================================================== */

#executionReportTable .col-edge {
  width: 9%;
  text-align: left;
  vertical-align: top;
  line-height: 1.25;
  padding: 4px 6px;
}

#executionReportTable .col-edge .edgeCond {
  font-weight: 600;
  color: #222;
  margin-bottom: 2px;
}

#executionReportTable .col-edge .edgeCut {
  font-size: 0.9em;
  color: #333;
  margin-bottom: 2px;
  white-space: nowrap;
}

#executionReportTable .col-edge .edgeTrim {
  font-size: 0.9em;
  color: #555;
}

/* Optional: subtle divider before the edge columns */
#executionReportTable th:nth-child(8),
#executionReportTable td:nth-child(8) {
  border-left: 1px solid #ccc;
}

/* #endregion Execution Report — Edge Columns */

/* #region Execution Report — Dimension & Remnant Columns
   ======================================================
   Columns 5–7: Actual, Cross Remnant, Rip Remnant
   ====================================================== */

#executionReportTable .col-cross,
#executionReportTable .col-rip,
#executionReportTable td:nth-child(5) {
  vertical-align: top;
  text-align: left;
  line-height: 1.25;
  padding: 4px 6px;
  font-size: 0.95em;
}

#executionReportTable .col-cross .remKey,
#executionReportTable .col-rip .remKey,
#executionReportTable td:nth-child(5) div:first-child {
  font-weight: 600;
  color: #222;
}

#executionReportTable .col-cross .remProv,
#executionReportTable .col-cross .remDims,
#executionReportTable .col-rip .remProv,
#executionReportTable .col-rip .remDims {
  font-size: 0.9em;
  color: #555;
}

/* #endregion Execution Report — Dimension & Remnant Columns */

/* --- Material --- */
.soln-material th {
  background-color: #fdf6e3;
}
.soln-material td {
  background-color: #fffdf7;
}

/* #region Execution Report — Cuts Table
   ======================================================
   Compact companion to Execution Steps Table
   ====================================================== */

#executionCutsTable .sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em; /* slightly smaller for compactness */
}

#executionCutsTable th,
#executionCutsTable td {
  border: 1px solid #ccc;
  padding: 3px 6px;
  vertical-align: top;
  text-align: left;
}

#executionCutsTable th {
  background-color: #f5f5f5;
  font-weight: 600;
}

#executionCutsTable td:nth-child(6),
#executionCutsTable td:nth-child(7) {
  text-align: right; /* align numeric distances */
  white-space: nowrap;
}

/* Highlight row when selected or cross-linked */
#executionCutsTable tr.selected {
  background-color: #fff3c4;
  transition: background-color 0.15s ease;
}

/* Add spacing below to separate from next section */
#executionCutsTable {
  margin-top: 1rem;
}

#tblExecutionCuts .remKey {
  font-weight: 600;
  color: #222;
  margin-bottom: 2px;
}

#tblExecutionCuts .remProv {
  font-size: 0.9em;
  color: #555;
  line-height: 1.2;
}

#tblExecutionCuts td:nth-child(6),
#tblExecutionCuts td:nth-child(7) {
  line-height: 1.3;
}

#executionCutsTable #tblExecutionCuts {
  width: 60vw !important;
  max-width: none;
  margin-left: 0;
}

/* Optional: maintain consistent typography and spacing */
#tblExecutionCuts th,
#tblExecutionCuts td {
  padding: 4px 8px;
  vertical-align: top;
  line-height: 1.3;
}

/* Allow word wrapping in all table cells */
#tblExecutionCuts th,
#tblExecutionCuts td {
  white-space: normal; /* allow wrapping */
  word-wrap: break-word; /* break long strings if needed */
  overflow-wrap: anywhere; /* ensures long words wrap cleanly */
}

/* Keep numeric distance columns right-aligned, but still wrap if needed */
#tblExecutionCuts td:nth-child(6),
#tblExecutionCuts td:nth-child(7) {
  text-align: right;
  white-space: normal; /* re-enable wrapping here too */
}

/* === Enhancement: Interactive row feedback === */

/* Hover feedback for better responsiveness */
#executionCutsTable tr:hover {
  background-color: #fafafa;
}

/* Selected / cross-linked rows (already defined, just strengthening) */
#executionCutsTable tr.selected {
  background-color: #fff3c4; /* matches your current soft yellow tone */
  outline: 2px solid #e1b12c; /* subtle gold outline for clarity */
  transition:
    background-color 0.15s ease,
    outline 0.15s ease;
}

/* Optional text emphasis for selected rows */
#executionCutsTable tr.selected td {
  font-weight: 600;
  color: #111;
}

/* #endregion Execution Report — Cuts Table */

/* --- Print Button Bar --- */
.sr-print-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #f5f8ff;
  border: 1px solid #cdddfd;
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 0.5rem;
}

.sr-print-bar button {
  background-color: #3a6dd0;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sr-print-bar button:hover {
  background-color: #2f58aa;
}

/* ================================
   Print Styles for Solution Report
   ================================ */
@media print {
  /* --- 1️⃣ General section page breaks --- */
  details.sr-collapsible {
    page-break-after: always;
  }
  details.sr-collapsible:last-of-type {
    page-break-after: auto; /* avoid trailing blank page */
  }

  /* --- 2️⃣ Cuts table expansion for print --- */
  #executionCutsTable #tblExecutionCuts {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  /* Remove left/right padding from its container */
  #executionCutsTable.sr-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- 3️⃣ Overview (panel layout image) --- */
  .execution-overview {
    page-break-after: always;
    page-break-before: always;
    text-align: center;
    margin-bottom: 1rem;
  }

  .execution-overview h2 {
    font-size: 1.2em;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid #bbb;
    padding-bottom: 0.2rem;
  }

  .execution-overview img.panel-overview-img {
    max-width: 90%;
    height: auto;
    border: 1px solid #ccc;
    margin: 0.5rem auto;
    display: block;
  }

  .execution-overview .caption {
    font-size: 0.9em;
    color: #555;
  }

  /* --- 4️⃣ Page breaks for overview and clones --- */
  #executionOverview {
    page-break-after: always;
  }

  .printing-clone {
    page-break-after: always;
  }

  .printing-clone:last-of-type {
    page-break-after: auto;
  }

  /* --- 5️⃣ Hide the on-screen execution section during print --- */
  #srExecution.printing-clone-hide {
    display: none !important;
  }
}

/* -------------------------------------------------- */
/* SCRAPS TABLE — CONSISTENT WITH SOLUTION REPORT     */
/* -------------------------------------------------- */

/* Table frame & size (prevents full-width stretching) */
.scraps-table {
  border-collapse: collapse;
  margin-top: 8px;
  width: auto; /* <-- Keeps table compact, NOT full width */
  background-color: #fff;
  border: 1px solid #ddd; /* Matches soln-table outer border */
}

/* Gridlines identical to soln-table & purchases table */
.scraps-table th,
.scraps-table td {
  border: 1px solid #ddd; /* Same color & thickness as other report tables */
  padding: 4px 8px;
}

/* Header cell appearance */
.scraps-table thead th {
  background-color: #f3f7ff; /* Same pale blue header as provisioning/purchases */
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

/* Left-align Material column */
.scraps-table th:nth-child(2),
.scraps-table td:nth-child(2) {
  text-align: left;
}

/* Center-align Qty, Thickness, Width, Length */
.scraps-table th:nth-child(1),
.scraps-table th:nth-child(3),
.scraps-table th:nth-child(4),
.scraps-table th:nth-child(5),
.scraps-table td:nth-child(1),
.scraps-table td:nth-child(3),
.scraps-table td:nth-child(4),
.scraps-table td:nth-child(5) {
  text-align: center;
}

/* Vertical alignment */
.scraps-table td {
  vertical-align: middle;
}

/* --- Future Sections --- */
/* .soln-driveway, .soln-yield, etc. */