/* reduce container max-width on huge screens just a touch */
@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}

/* Keep page content below the fixed Bootstrap navbar */
body {
  padding-top: 56px;
} /* adjust to your navbar height if needed */

/* =====================================================
   templates/Misc Styles(moved from inline <style>)
   ===================================================== */

/* Data-entry pages: inputs/selects fill their cells */
.estimator-page input,
.estimator-page select,
.dje-page input,
.dje-page select,
.adjustments-page input,
.adjustments-page select {
  width: 100%;
  box-sizing: border-box;
}

/* =====================================================
   estimator.html (SCOPED to .estimator-page)
   ===================================================== */
.estimator-page nav:not(.wf-crumbs) {
  margin-bottom: 20px;
}

/* Estimator grid: Bootstrap-native look (light borders, compact rhythm) */
.estimator-page .table.estimator-grid {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: separate; /* allow rounded corners & cleaner borders */
  border-spacing: 0;
}

/* Soften borders to Bootstrap tokens instead of hard #999 */
.estimator-page .estimator-grid > :not(caption) > * > * {
  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem .75rem; /* compact, app-like */
}

/* Header: light background, stronger weight */
.estimator-page .estimator-grid thead th {
  background-color: var(--bs-gray-100);
  font-weight: 600;
}

/* Totals row: no noisy background/borders; right-aligned widgets remain */
.estimator-page .estimator-grid thead tr.totals-row th {
  background: transparent;
  border-bottom-color: transparent;
}

/* Hover (subtle, not “Excel highlight”) */
.estimator-page .estimator-grid tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), .03);
}

/* Right/center helpers keep working (scoped to grid) */
.estimator-page .estimator-grid .right { text-align: right; }
.estimator-page .estimator-grid .center { text-align: center; }


.estimator-page .section-title:not(.workflow-nav) {
  background-color: #0073e6;
  color: white;
  font-weight: bold;
  padding: 10px;
}
.estimator-page .right {
  text-align: right;
}
.estimator-page .center {
  text-align: center;
}

.estimator-page .totals-row th {
  background-color: white;
  border: none;
  font-weight: normal;
  vertical-align: top;
}

/* Header H2 inline flex styles */
.estimator-page .section-title.flex-header:not(.workflow-nav) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30px 0;
  padding: 10px;
}

/* Uniform control sizing; app-like look without altering behavior */
.estimator-page .grid-input {
  height: 32px;
  min-height: 32px;
  padding: .25rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background-color: var(--bs-body-bg);
}

/* 2) Qty column wide enough for '9999' + spinner (skip if you used the inline width) */
.estimator-page table.estimator-grid thead tr th:nth-child(4),
.estimator-page table.estimator-grid tbody tr td:nth-child(4) {
  min-width: 100px;
}

/* Totals headers (Mat Total / Total Hrs): fixed layout from first paint */
.estimator-page table.estimator-grid thead tr.totals-row th:nth-child(7),
.estimator-page table.estimator-grid thead tr.totals-row th:nth-child(9) {
  vertical-align: bottom; /* anchor at the bottom of the header row */
  white-space: nowrap; /* prevent label/value wrapping */
}
.estimator-page .totals-cell {
  display: flex;
  flex-direction: column; /* label on top, value below */
  justify-content: flex-end;
  align-items: flex-end; /* right edge */
  gap: 4px;
  min-height: 72px; /* consistent height so they don’t “pop” later */
}

/* Column widths for the estimator grid (totals row + header row) */
.estimator-page table.estimator-grid thead tr th:nth-child(1) {
  width: 20%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(2) {
  width: 8%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(3) {
  width: 26%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(4) {
  width: 6%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(5) {
  width: 4%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(6) {
  width: 8%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(7) {
  width: 8%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(8) {
  width: 8%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(9) {
  width: 8%;
}
.estimator-page table.estimator-grid thead tr th:nth-child(10) {
  width: 4%;
}

/* Right alignment on specific totals headers (Mat Total, Total Hrs) */
.estimator-page table.estimator-grid thead tr.totals-row th:nth-child(7),
.estimator-page table.estimator-grid thead tr.totals-row th:nth-child(9) {
  text-align: right;
}

/* =====================================================
   adjustments.html (SCOPED to .adjustments-page)
   ===================================================== */
/* Adjustments: Bootstrap-native look */
.adjustments-page .table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: separate;
  border-spacing: 0;
}

/* Soften borders & compact rhythm */
.adjustments-page .table > :not(caption) > * > * {
  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem .75rem;
}

/* Head styling */
.adjustments-page thead th {
  background-color: var(--bs-gray-100);
  font-weight: 600;
}

/* Summary rows already have classes; keep them readable without heavy backgrounds */
.adjustments-page .row-summary > * {
  background: transparent;
  font-weight: 500;
}
.adjustments-page .row-total > * {
  background: transparent;
  font-weight: 600;
}

/* Subtle hover */
.adjustments-page tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), .03);
}

/* Right align helper remains */
.adjustments-page .right { text-align: right; }

.adjustments-page .section-title:not(.workflow-nav) {
  background-color: #0073e6;
  color: white;
  font-weight: bold;
  padding: 10px;
}
.adjustments-page .step-label {
  font-weight: bold;
  background-color: #f2f2f2;
}
.adjustments-page .right {
  text-align: right;
}
.adjustments-page .center {
  text-align: center;
}

/* Adjustments header: same flex header pattern */
.adjustments-page .section-title.flex-:not(.workflow-nav) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30px 0;
  padding: 10px;
}

/* Column widths (applies to the whole table: thead/tbody/tfoot) */
.adjustments-page #laborAdjustmentsTable th:nth-child(1),
.adjustments-page #laborAdjustmentsTable td:nth-child(1) {
  width: 60%;
}
.adjustments-page #laborAdjustmentsTable th:nth-child(2),
.adjustments-page #laborAdjustmentsTable td:nth-child(2) {
  width: 20%;
}
.adjustments-page #laborAdjustmentsTable th:nth-child(3),
.adjustments-page #laborAdjustmentsTable td:nth-child(3) {
  width: 20%;
}

.adjustments-page #additionalLaborTable th:nth-child(1),
.adjustments-page #additionalLaborTable td:nth-child(1) {
  width: 60%;
}
.adjustments-page #additionalLaborTable th:nth-child(2),
.adjustments-page #additionalLaborTable td:nth-child(2) {
  width: 20%;
}
.adjustments-page #additionalLaborTable th:nth-child(3),
.adjustments-page #additionalLaborTable td:nth-child(3) {
  width: 20%;
}

/* Summary/total row styles (replaces inline bg/bold) */
.adjustments-page table thead tr.row-summary,
.adjustments-page table tfoot tr.row-summary {
  background-color: #cce0f5;
  font-weight: bold;
}

.adjustments-page table tfoot tr.row-total {
  background-color: #0073e6;
  color: #fff;
  font-weight: bold;
}

/* Optional: unify control height if rows inject inputs/selects */
.adjustments-page .grid-input {
  height: 32px;
  min-height: 32px;
}

/* =====================================================
   dje.html (SCOPED to .dje-page)
   ===================================================== */
.dje-page .section-title.flex-header:not(.workflow-nav) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30px 0;
  padding: 10px;
}
/* DJE grid: Bootstrap-native look */
.dje-page .table.dje-grid {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: separate;
  border-spacing: 0;
}

/* Soften borders & compact rhythm */
.dje-page .dje-grid > :not(caption) > * > * {
  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem .75rem;
}

/* Head styling */
.dje-page .dje-grid thead th {
  background-color: var(--bs-gray-100);
  font-weight: 600;
}

/* Subtle hover */
.dje-page .dje-grid tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), .03);
}

/* Control sizing to feel native */
.dje-page .grid-input {
  height: 32px;
  min-height: 32px;
  padding: .25rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background-color: var(--bs-body-bg);
}

/* Helpers preserved */
.dje-page .right { text-align: right; }
.dje-page .center { text-align: center; }

.dje-page .section-title:not(.workflow-nav) {
  background-color: #0073e6;
  color: white;
  font-weight: bold;
  padding: 10px;
}
.dje-page .right {
  text-align: right;
}
.dje-page .center {
  text-align: center;
}

.dje-page .totals-row th {
  background-color: white;
  border: none;
  font-weight: normal;
  vertical-align: top;
}

/* DJE: make all form controls with .grid-input a consistent height */
.dje-page .grid-input {
  height: 32px;
  min-height: 32px;
}

/* DJE grid: column widths (was inline on <th>) */
.dje-page table thead tr th:nth-child(1) {
  width: 20%;
} /* Notes */
.dje-page table thead tr th:nth-child(2) {
  width: 12%;
} /* Category */
.dje-page table thead tr th:nth-child(3) {
  width: 12%;
} /* Subcategory */
.dje-page table thead tr th:nth-child(4) {
  width: 18%;
} /* Description */
.dje-page table thead tr th:nth-child(5) {
  width: 6%;
} /* Qty */
.dje-page table thead tr th:nth-child(6) {
  width: 6%;
} /* Multi */
.dje-page table thead tr th:nth-child(7) {
  width: 8%;
} /* Cost */
.dje-page table thead tr th:nth-child(8) {
  width: 12%;
} /* Ext */

/* Totals row: keep the total value right-aligned (moved from inline) */
.dje-page table thead tr.totals-row th:nth-child(8) {
  text-align: right;
}

/* Uniform control height (same approach as Estimator) */
.dje-page .grid-input {
  height: 32px;
  min-height: 32px;
}

/* =====================================================
   summary.html (scoped to .summary-page)
   ===================================================== */

/* Summary header bar — ensure the blue wins */
.summary-page .section-title:not(.workflow-nav) {
  background-color: #0073e6;
  color: #fff;
}

/* Header bar */
.summary-page .section-title.flex-header:not(.workflow-nav) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30px 0;
  padding: 10px;
}

/* Summary tables: app-like without touching markup */
.summary-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.25rem;
}

/* Light borders & compact rhythm */
.summary-page table > :not(caption) > * > * {
  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem .75rem;
}

/* Headers */
.summary-page th {
  background-color: var(--bs-gray-100);
  font-weight: 600;
}

/* Subtle zebra striping & hover (CSS-only, keeps markup unchanged) */
.summary-page tbody tr:nth-child(even) {
  background-color: rgba(var(--bs-secondary-rgb), .03);
}
.summary-page tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), .03);
}

/* Utility classes already present in markup */
.summary-page .step-label {
  font-weight: bold;
  background-color: #f2f2f2;
}
.summary-page .right {
  text-align: right;
}
.summary-page .center {
  text-align: center;
}
.summary-page .bold {
  font-weight: bold;
}

/* Table-specific margin tweaks to match original inline styles */
.summary-page table:nth-of-type(1) {
  margin-bottom: 0;
} /* Step A table */
.summary-page table:nth-of-type(2) {
  margin-top: 0;
  margin-bottom: 0;
} /* Labor Rate row */
.summary-page table:nth-of-type(3) {
  margin-top: 0;
} /* Step B table */
.summary-page table:nth-of-type(4) {
  margin-top: 30px;
} /* Step C Material */
.summary-page table:nth-of-type(5) {
  margin-bottom: 0;
} /* Step D & E */
.summary-page table:nth-of-type(6) {
  margin-bottom: 0;
} /* Step F */
/*.summary-page table:nth-of-type(7) { /* default margins */ /* }      /* Step G */
.summary-page table:nth-of-type(8) {
  margin-top: 30px;
} /* Sales Price Summary */

/* Column widths & cell alignment per table (match original inline widths) */

/* #1 Step A — 3 columns: 20% / 60% / 20% */
.summary-page table:nth-of-type(1) th {
  text-align: center;
}
.summary-page table:nth-of-type(1) td.step-label {
  text-align: center;
  vertical-align: middle;
  width: 20%;
}
.summary-page table:nth-of-type(1) tr > td:nth-child(2) {
  width: 60%;
}
.summary-page table:nth-of-type(1) tr > td:nth-child(3) {
  width: 20%;
}

/* #2 Labor Rate row — 4 columns: 20% / 48% / 12% / 20% */
.summary-page table:nth-of-type(2) tr > td:nth-child(1) {
  background-color: #f2f2f2;
  width: 20%;
}
.summary-page table:nth-of-type(2) tr > td:nth-child(2) {
  width: 48%;
}
.summary-page table:nth-of-type(2) tr > td:nth-child(3) {
  width: 12%;
  text-align: right;
}
.summary-page table:nth-of-type(2) tr > td:nth-child(4) {
  width: 20%;
}
.summary-page #laborRateInput {
  width: 80px;
  text-align: left;
}

/* #3 Step B — 3 columns: 20% / 60% / 20% (centered heading row) */
.summary-page table:nth-of-type(3) th {
  text-align: center;
}
.summary-page table:nth-of-type(3) tr > td:nth-child(1) {
  width: 20%;
  text-align: center;
}
.summary-page table:nth-of-type(3) tr > td:nth-child(2) {
  width: 60%;
  text-align: center;
}
.summary-page table:nth-of-type(3) tr > td:nth-child(3) {
  width: 20%;
  text-align: right;
}

/* #4 Step C Material Cost Summary */
.summary-page table:nth-of-type(4) th {
  text-align: center;
}
/* First column is the Step C label (rowspan) */
.summary-page table:nth-of-type(4) td.step-label {
  text-align: center;
  vertical-align: middle;
  width: 20%;
}
/* Second/third/fourth columns: 48% / 12% / 20% in the first row;
   subsequent rows keep the same 3-col pattern to the right */
.summary-page table:nth-of-type(4) tr > td:nth-child(2) {
  width: 48%;
}
.summary-page table:nth-of-type(4) tr > td:nth-child(3) {
  width: 12%;
}
.summary-page table:nth-of-type(4) tr > td:nth-child(4) {
  width: 20%;
}

/* #5 Step D & E (Break-Even Cost) — 3 columns with padding and background on first col */
.summary-page table:nth-of-type(5) th {
  text-align: center;
}
.summary-page table:nth-of-type(5) tr > td:nth-child(1) {
  width: 20%;
  text-align: center;
  background-color: #eee;
  padding: 8px;
}
.summary-page table:nth-of-type(5) tr > td:nth-child(2) {
  width: 60%;
  padding: 8px;
}
.summary-page table:nth-of-type(5) tr > td:nth-child(3) {
  width: 20%;
  text-align: right;
  padding: 8px;
}

/* #6 Step F — 4 columns: 20% / 35% / 25% / 20% with padding */
.summary-page table:nth-of-type(6) tr > td:nth-child(1) {
  width: 20%;
  text-align: center;
  background-color: #eee;
  padding: 8px;
}
.summary-page table:nth-of-type(6) tr > td:nth-child(2) {
  width: 35%;
  padding: 8px;
}
.summary-page table:nth-of-type(6) tr > td:nth-child(3) {
  width: 25%;
  padding: 8px;
}
.summary-page table:nth-of-type(6) tr > td:nth-child(4) {
  width: 20%;
  text-align: right;
  padding: 8px;
}
.summary-page #overheadPercentSelect {
  width: 80px;
  text-align: left;
}

/* #7 Step G — 3 columns: 20% / 60% / 20% with padding */
.summary-page table:nth-of-type(7) tr > td:nth-child(1) {
  width: 20%;
  text-align: center;
  background-color: #eee;
  padding: 8px;
}
.summary-page table:nth-of-type(7) tr > td:nth-child(2) {
  width: 60%;
  padding: 8px;
}
.summary-page table:nth-of-type(7) tr > td:nth-child(3) {
  width: 20%;
  text-align: right;
  padding: 8px;
}

/* #8 Sales Price Summary — 5 columns: 20% / 30% / 15% / 15% / 20% */
.summary-page table:nth-of-type(8) th {
  text-align: center;
}
.summary-page table:nth-of-type(8) tr > td:nth-child(1) {
  width: 20%;
  text-align: center;
}
.summary-page table:nth-of-type(8) tr > td:nth-child(2) {
  width: 30%;
}
.summary-page table:nth-of-type(8) tr > td:nth-child(3) {
  width: 15%;
  text-align: right;
}
.summary-page table:nth-of-type(8) tr > td:nth-child(4) {
  width: 15%;
  text-align: right;
}
.summary-page table:nth-of-type(8) tr > td:nth-child(5) {
  width: 20%;
  text-align: right;
}
.summary-page #marginSelect {
  width: 80px;
  text-align: left;
}

/* #9 Labor Hour Breakdown — keep defaults; headers centered already via <th> base */

/* common % selects on Summary */
.summary-page select[name="misc_percent"],
.summary-page select[name="small_tools_percent"],
.summary-page select[name="large_tools_percent"],
.summary-page select[name="waste_theft_percent"],
.summary-page select[name="sales_tax_percent"] {
  width: 80px;
  text-align: left;
}

/* =====================================================
   templates/admin/*(moved from inline <style>)
   ===================================================== */

/* =====================================================
   admin/assemblies_edit.html (SCOPED to .assemblies-edit-page)
   ===================================================== */
.assemblies-edit-page .topbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}

.assemblies-edit-page .page-title {
  display: inline;
}

.assemblies-edit-page .btn-delete {
  background: #d33;
  border-color: #d33;
  color: #fff;
}
.assemblies-edit-page .btn-delete:hover {
  filter: brightness(0.95);
}

/* =====================================================
   admin/assemblies_index.html (SCOPED)
   ===================================================== */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(1) {
  width: 6%;
} /* ID */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(2) {
  width: 34%;
} /* Name */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(3) {
  width: 15%;
} /* Category */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(4) {
  width: 15%;
} /* Subcategory */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(5) {
  width: 8%;
} /* Featured */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(6) {
  width: 10%;
} /* Active */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(7) {
  width: 12%;
} /* Updated */
.admin-page .assemblies-index-page .assemblies-table thead th:nth-child(8) {
  width: 10%;
} /* Actions */

/* =====================================================
   Admin (shared) — dialog styling for all admin pages
   ===================================================== */
.admin-page dialog {
  border: 0;
  border-radius: 0.5rem;
  padding: 0;
}
.admin-page dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}
.admin-page dialog header,
.admin-page dialog footer {
  padding: 0.75rem 1rem;
  background: #f8f9fa;
}
.admin-page dialog footer {
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.admin-page dialog main {
  padding: 1rem;
}

/* Sidebar list polish (Option B) */
.home-sidebar-page .list-group-item {
  border: 0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-sidebar-page .list-group-item-action:hover {
  background: #f8f9fa;
  border-radius: 0.5rem;
}
.home-sidebar-page .list-group-item.text-uppercase {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #6c757d !important;
  opacity: 0.9;
}

/* Sticky sidebar card */
.sticky-top {
  position: sticky;
}

/* --- Sticky layout helpers (desktop) --- */
:root {
  --nav-h: 56px;
} /* adjust if your top navbar is taller */

/* ===== Home (workspace) — sticky header + sticky sidebar ===== */

/* Sidebar stays in view on desktop and can scroll independently if tall */
@media (min-width: 992px) {
  .sticky-sidebar {
    position: sticky;
    top: 68px; /* leaves space under your top navbar */
    max-height: calc(100vh - 80px);
    overflow: auto;
  }
}

/* Sidebar polish */
.home-sidebar-page .list-group-item {
  border: 0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-sidebar-page .list-group-item-action:hover {
  background: #f8f9fa;
  border-radius: 0.5rem;
}
.home-sidebar-page .list-group-item.text-uppercase {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #6c757d !important;
  opacity: 0.9;
}

/* Metrics snapshot cards */
.stat-card .stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat-card .stat-sub {
  font-size: 0.85rem;
}

/* Space harmony under sticky header */
.home-header.sticky + .card,
.home-header.sticky + .row {
  margin-top: 0.75rem;
}

/* Centered home header spacing */
.home-header.sticky h1 {
  font-weight: 700;
}
.home-header.sticky {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* --- Home header typography polish --- */
.home-header h1 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.home-header p {
  font-size: 1rem;
  color: #6c757d;
}

/* Table numeric alignment helpers (optional) */
.table td.text-end,
.table th.text-end {
  white-space: nowrap;
}

/* Libraries/Assemblies list alignment helpers */
.card > .table {
  margin-bottom: 0;
}
header.border-bottom + .card {
  margin-top: 1rem;
} /* keep rhythm under section headers */

/* When Assemblies table is wrapped in a card */
.card > .assemblies-table {
  margin-bottom: 0;
} /* removes extra bottom gap */

/* === Estimator Workflow Nav (single source of truth) === */
:root {
  --wf-top: 72px; /* distance below main header */
  --wf-max: 1320px; /* container-xxl width */
  --wf-side-gap: 1rem; /* gutters at small widths */
}

/* neutralize any inherited section-title spacing */
.section-title.flex-header.workflow-nav {
  margin: 0;
  padding: 0.625rem 0.75rem 0.375rem;
}

/* fixed, centered bar */
.workflow-nav.wf-fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: var(--wf-top);
  z-index: 1030;
  width: min(var(--wf-max), calc(100% - 2 * var(--wf-side-gap)));
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  border-radius: 0.25rem;
}

/* reserve space so content doesn't jump */
.workflow-nav-spacer {
  height: 64px;
}

/* three-zone layout */
.workflow-nav {
  display: flex;
  align-items: center;
}
.workflow-nav .wf-left,
.workflow-nav .wf-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.workflow-nav .wf-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative; top: 0px;
}

/* title */
.workflow-nav .wf-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bs-body-color, #212529);
  line-height: 1.2;
}

/* crumbs */
.workflow-nav .wf-crumbs {
  display: flex;
  align-items: center;
}
.workflow-nav .breadcrumb {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  --bs-breadcrumb-divider: "›";
  font-size: 1.05rem;
  line-height: 1.2;
}
.workflow-nav .breadcrumb li {
  display: inline-flex;
  align-items: baseline;
}
.workflow-nav .breadcrumb a {
  text-decoration: none;
  font-weight: 600;
  color: var(--bs-primary, #0d6efd);
}
.workflow-nav .breadcrumb a:hover,
.workflow-nav .breadcrumb a:focus {
  text-decoration: underline;
}

/* active chip */
.workflow-nav [aria-current="page"] {
  color: var(--bs-body-color, #212529);
  background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.15));
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1.2;
}

/* reset button rhythm */
.workflow-nav .btn {
  line-height: 1.25;
}

/* small tweaks */
@media (max-width: 576px) {
  :root {
    --wf-side-gap: 0.5rem;
  }
  .workflow-nav .wf-title {
    font-size: 1rem;
  }
  .workflow-nav .breadcrumb {
    font-size: 1rem;
  }
}

/* Icon utilities (shared) */
.icon { display: inline-block; vertical-align: text-bottom; }
.btn .icon { margin-right: .25rem; }

/* ===== Section titles & vertical rhythm (workflow pages) ===== */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between; /* leaves room if you ever add a small tagline or inline total */
  gap: .5rem;
  margin: 0 0 .75rem 0; /* tight, app-like */
  font-size: 1.125rem;  /* ~18px */
  font-weight: 600;
  line-height: 1.25;
}

.section-title .subtitle {
  font-weight: 500;
  opacity: .7;
  font-size: .95em;
}

.section-spacer-sm { margin-top: .5rem; }
.section-spacer-md { margin-top: 1rem; }
.section-spacer-lg { margin-top: 1.5rem; }

/* Consistent top separation from workflow bar to first card */
.workflow-to-card-gap {
  margin-top: 1rem;
}

/* Optional subtle underline (use when a section needs separation without another card) */
.section-underline {
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Materials index: scrollable table body w/ sticky header */
.table-scroll {
  max-height: 60vh;           /* adjust to taste (e.g., 70vh) */
  overflow: auto;
}

/* Keep header visible while scrolling */
.table-scroll table thead th {
  position: sticky;
  top: 0;
  z-index: 1;                 /* stay above rows */
  background: var(--bs-body-bg, #fff);
}

/* Global Toasts */
#toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 1200; pointer-events: none; }
#toast-root .toast-container { pointer-events: auto; }

/* If your navbar is ~56px tall, place toasts just below it */
#toast-root { top: calc(56px + 1rem); }

.add_new_btn {
  margin-top: .5rem;
}

#toastStack { z-index: 1200; }

/* Pricing page polish (scoped, non-breaking) */
.pricing-page .card {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pricing-page .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow-lg);
}

/* Friendlier feature list with checkmarks, no markup changes */
.pricing-page .list-unstyled li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.45;
}
.pricing-page .list-unstyled li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  opacity: 0.55;
}

/* Tighten plan titles/prices slightly */
.pricing-page .card-body .fs-4 {
  letter-spacing: -0.2px;
}
.pricing-page .badge.border {
  border-color: rgba(0,0,0,.08) !important;
}