/*! Project Estimator App source code © 2026 Anton de Villiers (antondevilliers.com). Proprietary. */
/* Estimator-specific styles. ADDITIVE ONLY — composes the canonical
   vocabulary from styles/tool-invoice.css. Do not redefine .tool-panel,
   .tool-form, .tool-grid-*, .tool-field, .tool-table, .tool-table-line-items,
   .tool-btn, .tool-stat-row/.tool-stat, .tool-empty, .tool-msg, etc.
   New estimator-only patterns must use the .tool-est-* prefix. */

/* ---- Editable-table baselines ---- */
/* The canonical .tool-table-line-items input rule in tool-invoice.css gives
   every input width: 100%, padding: 8px 10px and min-height: 36px so every
   data input shares one baseline. We extend that rule to selects too, and
   then *opt out* of it for checkboxes / radios so they don't render as
   stretched 36px-tall surfaces. */
.tool-table-line-items select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font: inherit;
  background: var(--white);
  min-height: 36px;
}
.tool-table-line-items td input[type="checkbox"],
.tool-table-line-items td input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0 auto;
  border: 0;
  background: transparent;
  border-radius: 3px;
  accent-color: var(--blue-600);
  display: block;
  cursor: pointer;
}
.tool-theme-dark .tool-table-line-items select {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.14);
  color: #E2E8F0;
}
.tool-theme-dark .tool-table-line-items td input[type="checkbox"],
.tool-theme-dark .tool-table-line-items td input[type="radio"] { accent-color: #60A5FA; }

/* ---- Compact WBS table modifier ----
   table-layout: fixed honours the colgroup widths so the Title column gets
   real flex width, even when other columns hit their min content. Inputs
   shrink one notch so a 980px-wide table reads tightly without cropping
   numeric values. */
/* Shared editable-grid table density. Each estimator data table also adds
   its own min-width modifier so the flex column has real space and the
   .tool-table-wrap parent scrolls horizontally on narrower viewports. */
.tool-est-grid-table { table-layout: fixed; }
.tool-est-grid-table th { font-size: 10px; }
.tool-est-grid-table th,
.tool-est-grid-table td { padding: 6px 6px; vertical-align: middle; }
.tool-est-grid-table input,
.tool-est-grid-table select {
  padding: 4px 6px;
  min-height: 30px;
  font-size: 13px;
}
.tool-est-grid-table input[type="number"] { padding-right: 4px; }
.tool-est-grid-table .tool-line-actions { gap: 2px; justify-content: flex-end; }
.tool-est-grid-table .tool-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* The canonical .tool-table-actions rule turns the element into a flex
   container for the right-aligned button group inside a <td>. On a <th>
   we just want a right-aligned "Actions" header that still behaves as a
   table-cell so the column width holds. */
th.tool-table-actions {
  display: table-cell;
  text-align: right;
}

.tool-est-wbs-table { min-width: 1108px; }
.tool-est-wbs-table .tool-est-row-phase td { padding: 8px 6px; }
/* Pull the action-button strip away from the Cost column so the right-
   aligned currency value (e.g. "R 19 066,67") and the icon row don't
   visually crash into each other. */
.tool-est-wbs-table thead th:last-child,
.tool-est-wbs-table tbody td:last-child { padding-left: 14px; }
.tool-est-expenses-table { min-width: 1180px; }
.tool-est-roles-table { min-width: 820px; }
.tool-est-risks-table { min-width: 1180px; }
.tool-est-milestones-table { min-width: 1020px; }

/* ---- Collapsible task-details section ---- */
.tool-est-task-details {
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xs);
  background: var(--gray-50);
  overflow: hidden;
}
.tool-est-task-details > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-est-task-details > summary::before {
  content: '▸';
  color: var(--gray-500);
  font-size: 10px;
  transition: transform 0.15s;
  display: inline-block;
}
.tool-est-task-details[open] > summary::before { transform: rotate(90deg); }
.tool-est-task-details > summary::-webkit-details-marker { display: none; }
.tool-est-task-details > summary:hover { color: var(--gray-900); }
.tool-est-task-details-body {
  padding: 14px;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tool-est-task-details-body .tool-est-method-detail { margin: 0; }
.tool-theme-dark .tool-est-task-details {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
}
.tool-theme-dark .tool-est-task-details > summary { color: #CBD5E1; }
.tool-theme-dark .tool-est-task-details > summary:hover { color: #FFFFFF; }
.tool-theme-dark .tool-est-task-details-body {
  background: rgba(0, 0, 0, 0.20);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ---- Editor head ---- */
.tool-est-editor-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.tool-theme-dark .tool-est-editor-head { border-bottom-color: rgba(255, 255, 255, 0.06); }
.tool-est-editor-title { flex: 1 1 320px; min-width: 0; }
.tool-est-editor-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
}
.tool-theme-dark .tool-est-editor-title h2 { color: #FFFFFF; }
.tool-est-editor-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--gray-500);
}
.tool-est-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-est-suggestions-chip {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.tool-est-suggestions-chip:hover { background: #FDE68A; }
.tool-theme-dark .tool-est-suggestions-chip {
  background: rgba(245, 158, 11, 0.18);
  color: #FDE68A;
  border-color: rgba(245, 158, 11, 0.4);
}

/* ---- Stepper ---- */
.tool-est-stepper {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tool-theme-dark .tool-est-stepper {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.tool-est-step {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tool-est-step:hover { background: rgba(15, 23, 42, 0.05); color: var(--gray-900); }
.tool-est-step[aria-selected="true"] {
  background: var(--white);
  color: var(--blue-700);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.tool-theme-dark .tool-est-step { color: #CBD5E1; }
.tool-theme-dark .tool-est-step:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.tool-theme-dark .tool-est-step[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.10);
  color: #93C5FD;
  box-shadow: none;
}

/* ---- Profile picker (for new estimate) ---- */
.tool-est-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.tool-est-profile-card {
  text-align: left;
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: var(--radius-xs);
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  transition: border-color 0.15s, background 0.15s;
}
.tool-est-profile-card:hover { border-color: var(--blue-400); background: var(--gray-50); }
.tool-theme-dark .tool-est-profile-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #F1F5F9;
}
.tool-theme-dark .tool-est-profile-card:hover {
  border-color: #60A5FA;
  background: rgba(255, 255, 255, 0.06);
}
.tool-est-search {
  background: var(--white);
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
}
.tool-est-search::placeholder { color: var(--gray-500); }

/* ---- WBS row state ---- */
.tool-est-row-phase td {
  background: var(--blue-50);
  font-weight: 600;
}
.tool-theme-dark .tool-est-row-phase td { background: rgba(37, 99, 235, 0.10); }
.tool-est-row-excluded td { opacity: 0.55; }

/* ---- Method detail (parametric / fixed / analogous extras) ---- */
.tool-est-method-detail {
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
}
.tool-theme-dark .tool-est-method-detail {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
.tool-est-method-detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 12px;
}
.tool-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.tool-est-method-detail-item {
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xs);
}
.tool-est-method-detail-item strong { display: block; font-size: 14px; }
.tool-est-method-detail-item small { font-size: 12px; color: var(--gray-500); }
.tool-theme-dark .tool-est-method-detail-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Summary pills (used by milestones + timeline) ---- */
.tool-est-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.tool-est-summary-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
  min-width: 140px;
}
.tool-est-summary-pill span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.tool-est-summary-pill strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.tool-est-summary-warn {
  background: #FEF3C7;
  border-color: #FDE68A;
}
.tool-est-summary-warn strong { color: #92400E; }
.tool-theme-dark .tool-est-summary-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.tool-theme-dark .tool-est-summary-pill strong { color: #FFFFFF; }
.tool-theme-dark .tool-est-summary-warn {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
}
.tool-theme-dark .tool-est-summary-warn strong { color: #FDE68A; }

/* ---- Warnings ---- */
.tool-est-warnings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tool-est-warning {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-200);
  border-radius: var(--radius-xs);
  padding: 14px 16px;
}
.tool-est-warning-warning { border-left-color: #F59E0B; }
.tool-est-warning-info { border-left-color: var(--blue-500); }
.tool-est-warning-error { border-left-color: #B91C1C; }
.tool-est-warning-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tool-est-warning-head strong { font-size: 14px; font-weight: 600; }
.tool-est-warning-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
}
.tool-est-warning-pill-warning { background: #FEF3C7; color: #92400E; }
.tool-est-warning-pill-info { background: var(--blue-50); color: var(--blue-700); }
.tool-est-warning-pill-error { background: #FEE2E2; color: #991B1B; }
.tool-est-warning-actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tool-est-warnings-mini {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-est-warnings-mini li {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}
.tool-theme-dark .tool-est-warning {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  border-left-color: rgba(255, 255, 255, 0.15);
}
.tool-theme-dark .tool-est-warning-warning { border-left-color: #F59E0B; }
.tool-theme-dark .tool-est-warning-info { border-left-color: #60A5FA; }
.tool-theme-dark .tool-est-warning-error { border-left-color: #FCA5A5; }
.tool-theme-dark .tool-est-warning-pill-warning { background: rgba(245, 158, 11, 0.18); color: #FDE68A; }
.tool-theme-dark .tool-est-warning-pill-info { background: rgba(96, 165, 250, 0.18); color: #93C5FD; }
.tool-theme-dark .tool-est-warning-pill-error { background: rgba(252, 165, 165, 0.18); color: #FCA5A5; }

/* ---- Charts ---- */
.tool-est-charts-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.tool-est-chart-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xs);
  padding: 16px;
}
.tool-est-chart-card-wide { grid-column: 1 / -1; }
.tool-est-chart-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-600);
}
.tool-est-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-est-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 110px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.tool-est-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-700);
}
.tool-est-bar-track {
  background: var(--gray-100);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}
.tool-est-bar-fill {
  background: var(--blue-600);
  height: 100%;
  border-radius: 4px;
}
.tool-est-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700);
}
.tool-theme-dark .tool-est-chart-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.tool-theme-dark .tool-est-chart-card h3 { color: #94A3B8; }
.tool-theme-dark .tool-est-bar-label,
.tool-theme-dark .tool-est-bar-value { color: #CBD5E1; }
.tool-theme-dark .tool-est-bar-track { background: rgba(255, 255, 255, 0.08); }
.tool-theme-dark .tool-est-bar-fill { background: #60A5FA; }

/* ---- Gantt timeline ----
   The outer .tool-est-gantt is a horizontal scroll container so a long
   timeline doesn't crush onto narrow viewports. Inside it, .tool-est-gantt-rows
   carries the inline min-width that makes the scroll trigger. The first
   column of each row (.tool-est-gantt-label) is sticky-pinned to the left
   so you don't lose track of which task you're scrolling on. */
.tool-est-gantt {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tool-est-gantt-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}
.tool-est-gantt-scroll-hint {
  display: none;
  position: sticky;
  left: 14px;
  top: 0;
  font-size: 11px;
  color: var(--gray-500);
  padding: 6px 14px 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .tool-est-gantt-scroll-hint { display: block; }
}
.tool-est-gantt-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  align-items: center;
}
.tool-est-gantt-axis-row { margin-bottom: 6px; }
.tool-est-gantt-axis-track {
  position: relative;
  height: 32px;
  border-bottom: 1px solid var(--gray-200);
}
.tool-est-gantt-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--gray-600);
  white-space: nowrap;
  pointer-events: none;
}
.tool-est-gantt-tick.is-start { align-items: flex-start; }
.tool-est-gantt-tick.is-end { align-items: flex-end; }
.tool-est-gantt-tick-mark {
  width: 1px;
  height: 6px;
  background: var(--gray-300);
  margin-top: 0;
}
.tool-est-gantt-tick-label {
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  padding: 0 2px;
  background: var(--white);
}
.tool-theme-dark .tool-est-gantt-axis-track { border-bottom-color: rgba(255, 255, 255, 0.12); }
.tool-theme-dark .tool-est-gantt-tick { color: #CBD5E1; }
.tool-theme-dark .tool-est-gantt-tick-mark { background: rgba(255, 255, 255, 0.20); }
.tool-theme-dark .tool-est-gantt-tick-label { background: transparent; }
.tool-est-gantt-label {
  font-size: 12px;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Stick to the left edge of the scroll viewport so the task name is
     always visible while you scroll the bars to the right. left: 0 works
     because position is relative to the scroll container's viewport. */
  position: sticky;
  left: 0;
  background: var(--white);
  z-index: 5;
  padding: 0 8px 0 14px;
  box-shadow: 4px 0 4px -2px rgba(15, 23, 42, 0.06);
}
.tool-theme-dark .tool-est-gantt-label {
  background: #1E293B;
  box-shadow: 4px 0 4px -2px rgba(0, 0, 0, 0.4);
}
.tool-est-gantt-track {
  position: relative;
  height: 20px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
}
.tool-est-gantt-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: var(--blue-600);
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 11px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  min-width: 18px;
  font-variant-numeric: tabular-nums;
}
.tool-est-gantt-milestone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(185, 28, 28, 0.45);
  pointer-events: none;
}
.tool-est-gantt-milestone-marker {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  pointer-events: none;
  z-index: 2;
}
.tool-est-gantt-milestone-marker::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: 2px;
  background: #B91C1C;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px #FFFFFF;
}
.tool-theme-dark .tool-est-gantt {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.tool-theme-dark .tool-est-gantt-axis,
.tool-theme-dark .tool-est-gantt-label { color: #CBD5E1; }
.tool-theme-dark .tool-est-gantt-axis-track,
.tool-theme-dark .tool-est-gantt-track {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.tool-theme-dark .tool-est-gantt-bar { background: #60A5FA; color: #0F172A; }
.tool-theme-dark .tool-est-gantt-milestone,
.tool-theme-dark .tool-est-gantt-milestone-marker::before { background: #FCA5A5; }

/* Fixed-date bars (the user pinned start/end) get a darker fill so they
   read distinctly from auto-sequenced bars. */
.tool-est-gantt-bar.is-explicit {
  background: #0F766E;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.tool-theme-dark .tool-est-gantt-bar.is-explicit { background: #2DD4BF; color: #0F172A; }

/* Non-working day shading. Sits behind the bars. */
.tool-est-gantt-nonworking {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.tool-est-gantt-nonworking-weekend { background: rgba(15, 23, 42, 0.05); }
.tool-est-gantt-nonworking-holiday {
  background: repeating-linear-gradient(
    -45deg,
    rgba(185, 28, 28, 0.12),
    rgba(185, 28, 28, 0.12) 4px,
    rgba(185, 28, 28, 0.05) 4px,
    rgba(185, 28, 28, 0.05) 8px
  );
}
.tool-est-gantt-track .tool-est-gantt-bar { z-index: 1; }
.tool-est-gantt-track .tool-est-gantt-milestone { z-index: 2; }
.tool-est-gantt-axis-track .tool-est-gantt-tick,
.tool-est-gantt-axis-track .tool-est-gantt-milestone-marker { z-index: 3; }
.tool-theme-dark .tool-est-gantt-nonworking-weekend { background: rgba(255, 255, 255, 0.04); }
.tool-theme-dark .tool-est-gantt-nonworking-holiday {
  background: repeating-linear-gradient(
    -45deg,
    rgba(252, 165, 165, 0.18),
    rgba(252, 165, 165, 0.18) 4px,
    rgba(252, 165, 165, 0.06) 4px,
    rgba(252, 165, 165, 0.06) 8px
  );
}

/* Working-schedule grid: working-days toggles + holidays editor side-by-side */
.tool-est-schedule-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr);
  gap: 24px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
}
@media (max-width: 800px) {
  .tool-est-schedule-grid { grid-template-columns: 1fr; }
}
.tool-theme-dark .tool-est-schedule-grid {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Weekday toggle pills */
.tool-est-weekday-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tool-est-weekday {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  min-width: 48px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tool-est-weekday:hover { background: var(--gray-50); border-color: var(--gray-300); }
.tool-est-weekday.is-active {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #FFFFFF;
}
.tool-est-weekday.is-active:hover { background: var(--blue-700); border-color: var(--blue-700); }
.tool-theme-dark .tool-est-weekday {
  background: rgba(0, 0, 0, 0.20);
  border-color: rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
}
.tool-theme-dark .tool-est-weekday:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.tool-theme-dark .tool-est-weekday.is-active {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #FFFFFF;
}

/* Per-task schedule editor table */
.tool-est-schedule-table { min-width: 960px; }
.tool-est-mode-cell { display: flex; align-items: center; gap: 6px; }
.tool-est-mode-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tool-est-mode-pill-auto {
  background: var(--gray-100);
  color: var(--gray-600);
}
.tool-est-mode-pill-pinned {
  background: rgba(15, 118, 110, 0.12);
  color: #115E59;
}
.tool-theme-dark .tool-est-mode-pill-auto {
  background: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
}
.tool-theme-dark .tool-est-mode-pill-pinned {
  background: rgba(45, 212, 191, 0.18);
  color: #5EEAD4;
}

/* Gantt legend — sits outside the scrollable .tool-est-gantt so the swatches
   stay visible while you scroll the bars horizontally. */
.tool-est-gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
}
.tool-theme-dark .tool-est-gantt-legend {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
}
.tool-est-gantt-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tool-est-gantt-swatch {
  display: inline-block;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid transparent;
}
.tool-est-gantt-swatch-bar { background: var(--blue-600); }
.tool-est-gantt-swatch-bar-explicit { background: #0F766E; }
.tool-est-gantt-swatch-weekend { background: rgba(15, 23, 42, 0.10); border-color: var(--gray-200); }
.tool-est-gantt-swatch-holiday {
  background: repeating-linear-gradient(
    -45deg,
    rgba(185, 28, 28, 0.20),
    rgba(185, 28, 28, 0.20) 3px,
    rgba(185, 28, 28, 0.05) 3px,
    rgba(185, 28, 28, 0.05) 6px
  );
  border-color: rgba(185, 28, 28, 0.25);
}
.tool-est-gantt-swatch-milestone {
  width: 10px;
  height: 10px;
  background: #B91C1C;
  transform: rotate(45deg);
  border-radius: 0;
}
.tool-theme-dark .tool-est-gantt-swatch-bar { background: #60A5FA; }
.tool-theme-dark .tool-est-gantt-swatch-bar-explicit { background: #2DD4BF; }
.tool-theme-dark .tool-est-gantt-swatch-weekend { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); }

/* ---- Report preview (on-screen) ----
   The on-screen report uses .tool-est-report-preview as the page chrome,
   so .tool-est-print itself can stay style-only. The print pipeline
   reuses .tool-est-print inside .tool-print-root > .tool-print-page,
   which carries its own canonical A4 chrome from tool-invoice.css. */
.tool-est-report-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tool-est-report-preview-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xs);
}
.tool-est-report-preview-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tool-est-report-preview-meta span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.tool-est-report-preview-meta strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.tool-theme-dark .tool-est-report-preview-meta {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.tool-theme-dark .tool-est-report-preview-meta strong { color: #FFFFFF; }

.tool-est-report-preview > .tool-est-print {
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 32px;
  max-width: 880px;
}
.tool-theme-dark .tool-est-report-preview > .tool-est-print {
  border-color: rgba(255, 255, 255, 0.10);
}

/* ---- Printable estimate body (style only — no page chrome) ---- */
.tool-est-print { color: #0F172A; position: relative; }
.tool-est-print-section { margin-bottom: 28px; }
.tool-est-print-watermark {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%) rotate(-22deg);
  font-size: 92px;
  font-weight: 800;
  letter-spacing: 8px;
  color: rgba(185, 28, 28, 0.08);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.tool-est-print-section,
.tool-est-print-cover,
.tool-est-print-table,
.tool-est-print-charts,
.tool-est-print-signature-grid { position: relative; z-index: 1; }
.tool-est-print-section h2 {
  font-size: 14px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E2E8F0;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #475569;
  font-weight: 700;
}
.tool-est-print-section h3 {
  font-size: 12px;
  font-weight: 700;
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #475569;
}
.tool-est-print-cover { margin-bottom: 32px; }
.tool-est-print-logo {
  margin-bottom: 16px;
}
.tool-est-print-logo img {
  max-height: 64px;
  max-width: 240px;
  display: block;
  object-fit: contain;
}
.tool-est-print-meta-line {
  font-size: 11px;
  color: #64748B;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.tool-est-print-title {
  font-size: 28px;
  margin: 0;
  font-weight: 700;
  color: #0F172A;
}
.tool-est-print-sub {
  font-size: 14px;
  margin: 6px 0 24px;
  color: #334155;
}
.tool-est-print-cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tool-est-print-cover-grid > div {
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 6px;
}
.tool-est-print-cover-grid span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748B;
  display: block;
  font-weight: 600;
}
.tool-est-print-cover-grid strong {
  font-size: 16px;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.tool-est-print-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tool-est-print-block { white-space: pre-wrap; line-height: 1.5; }
.tool-est-print-subline {
  margin-top: 3px;
  color: #64748B;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.tool-est-print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tool-est-print-table th,
.tool-est-print-table td {
  border-bottom: 1px solid #E2E8F0;
  padding: 6px 8px;
  text-align: left;
}
.tool-est-print-table .tool-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tool-est-print-table th {
  background: #F8FAFC;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748B;
  font-weight: 700;
}
.tool-est-print-grand td {
  border-top: 2px solid #0F172A;
  font-size: 14px;
  padding-top: 10px;
}
.tool-est-print-phase td {
  background: #EFF6FF;
  padding-top: 8px;
  font-weight: 600;
}
.tool-est-print-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tool-est-print-chart h3 { font-size: 11px; margin-top: 0; }
.tool-est-print-chart-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 2px 0;
}
.tool-est-print-chart-track {
  background: #E2E8F0;
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.tool-est-print-chart-fill {
  display: block;
  height: 100%;
  background: #2563EB;
}
.tool-est-print-chart-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* ---- Printable gantt (shared between on-screen preview and PDF) ---- */
.tool-est-print-gantt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #FFFFFF;
}
.tool-est-print-gantt-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  align-items: center;
}
.tool-est-print-gantt-axis-row { margin-bottom: 4px; }
.tool-est-print-gantt-label {
  font-size: 10pt;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.tool-est-print-gantt-axis-row .tool-est-print-gantt-label { color: #64748B; font-weight: 500; }
.tool-est-print-gantt-axis-track {
  position: relative;
  height: 28px;
  border-bottom: 1px solid #CBD5E1;
}
.tool-est-print-gantt-track {
  position: relative;
  height: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 2px;
  overflow: hidden;
}
.tool-est-print-gantt-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  background: #2563EB;
  border-radius: 2px;
  color: #FFFFFF;
  font-size: 8pt;
  padding: 0 5px;
  display: flex;
  align-items: center;
  min-width: 16px;
  z-index: 2;
}
.tool-est-print-gantt-bar.is-explicit { background: #0F766E; }
.tool-est-print-gantt-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 8pt;
  color: #475569;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.tool-est-print-gantt-tick.is-start { align-items: flex-start; }
.tool-est-print-gantt-tick.is-end { align-items: flex-end; }
.tool-est-print-gantt-tick-mark {
  width: 1px;
  height: 5px;
  background: #94A3B8;
}
.tool-est-print-gantt-tick-label {
  margin-top: 2px;
  padding: 0 2px;
  background: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.tool-est-print-gantt-milestone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(185, 28, 28, 0.55);
  pointer-events: none;
  z-index: 1;
}
.tool-est-print-gantt-milestone-marker {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  z-index: 4;
}
.tool-est-print-gantt-milestone-marker::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin: 2px;
  background: #B91C1C;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px #FFFFFF;
}
.tool-est-print-gantt-nonworking {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.tool-est-print-gantt-nonworking-weekend { background: #EEF2F7; }
.tool-est-print-gantt-nonworking-holiday {
  background: repeating-linear-gradient(
    -45deg,
    rgba(185, 28, 28, 0.18),
    rgba(185, 28, 28, 0.18) 3px,
    rgba(185, 28, 28, 0.05) 3px,
    rgba(185, 28, 28, 0.05) 6px
  );
}
.tool-est-print-gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 8pt;
  color: #475569;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #E2E8F0;
}
.tool-est-print-gantt-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.tool-est-print-gantt-swatch {
  display: inline-block;
  width: 12px;
  height: 8px;
  border-radius: 1px;
  border: 1px solid transparent;
}
.tool-est-print-gantt-swatch-bar { background: #2563EB; }
.tool-est-print-gantt-swatch-bar-explicit { background: #0F766E; }
.tool-est-print-gantt-swatch-weekend { background: #EEF2F7; border-color: #CBD5E1; }
.tool-est-print-gantt-swatch-holiday {
  background: repeating-linear-gradient(
    -45deg,
    rgba(185, 28, 28, 0.30),
    rgba(185, 28, 28, 0.30) 2px,
    rgba(185, 28, 28, 0.06) 2px,
    rgba(185, 28, 28, 0.06) 4px
  );
  border-color: rgba(185, 28, 28, 0.40);
}
.tool-est-print-gantt-swatch-milestone {
  width: 8px;
  height: 8px;
  background: #B91C1C;
  transform: rotate(45deg);
  border-radius: 0;
}

.tool-est-print-signature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
.tool-est-print-sigline {
  border-bottom: 1px solid #94A3B8;
  height: 36px;
  margin: 6px 0 4px;
}
.tool-est-print-valid {
  margin-top: 16px;
  font-size: 12px;
  color: #475569;
}
.tool-est-page-break { page-break-after: always; break-after: page; }

@media print {
  .tool-est-stepper,
  .tool-est-editor-head,
  .tool-est-suggestions-chip,
  .tool-est-report-preview { display: none !important; }

  /* The print copy lives inside .tool-print-root > .tool-print-page; the
     canonical print rules in tool-invoice.css turn .tool-print-root into
     the only visible element. We only need to make sure our colour swatches
     and tinted backgrounds reproduce on paper. */
  .tool-est-print-pdf {
    color: #0F172A;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 11pt;
    line-height: 1.45;
  }
  .tool-est-print-section { page-break-inside: avoid; }
  .tool-est-print-section h2,
  .tool-est-print-section h3 { page-break-after: avoid; }
  .tool-est-print-cover-grid > div,
  .tool-est-print-table th,
  .tool-est-print-phase td,
  .tool-est-print-chart-fill,
  .tool-est-print-chart-track,
  .tool-est-print-gantt,
  .tool-est-print-gantt-track,
  .tool-est-print-gantt-bar,
  .tool-est-print-gantt-nonworking,
  .tool-est-print-gantt-nonworking-weekend,
  .tool-est-print-gantt-nonworking-holiday,
  .tool-est-print-gantt-milestone,
  .tool-est-print-gantt-milestone-marker::before,
  .tool-est-print-gantt-swatch,
  .tool-est-print-gantt-tick-label {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tool-est-print-cover-grid > div { background: #F5F7FA !important; }
  .tool-est-print-table th { background: #F5F5F5 !important; }
  .tool-est-print-phase td { background: #EFF6FF !important; }
  .tool-est-print-chart-track { background: #E2E8F0 !important; }
  .tool-est-print-chart-fill { background: #2563EB !important; }
  .tool-est-print-gantt-track { background: #F8FAFC !important; }
  .tool-est-print-gantt-bar { background: #2563EB !important; color: #FFFFFF !important; }
  .tool-est-print-gantt-bar.is-explicit { background: #0F766E !important; }
  .tool-est-print-gantt-nonworking-weekend { background: #EEF2F7 !important; }
  .tool-est-print-gantt-tick-label { background: #FFFFFF !important; }
  .tool-est-print-watermark {
    color: rgba(185, 28, 28, 0.08) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}