/* ==========================================================================
   LFX Project Tracker — Brand styles
   Edit these CSS variables to retheme the whole app.
   ========================================================================== */

:root {
  /* LFX brand palette */
  --lfx-red:         #D6001C;
  --lfx-red-dark:    #B00017;   /* hover / active state */
  --lfx-red-light:   #FCE4E7;   /* tinted backgrounds */
  --lfx-white:       #FFFFFF;
  --lfx-grey:        #6C757D;   /* borders, muted text */
  --lfx-grey-light:  #F1F3F5;   /* table stripes, subtle panels */
  --lfx-grey-dark:   #343A40;   /* nav bar bg, strong borders */
  --lfx-black:       #000000;

  /* Bootstrap overrides */
  --bs-primary:           var(--lfx-red);
  --bs-primary-rgb:       214, 0, 28;
  --bs-body-color:        var(--lfx-black);
  --bs-body-bg:           var(--lfx-white);
  --bs-border-color:      var(--lfx-grey);
  --bs-link-color:        var(--lfx-red);
  --bs-link-hover-color:  var(--lfx-red-dark);
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--lfx-red);
  border-color: var(--lfx-red);
  color: var(--lfx-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--lfx-red-dark) !important;
  border-color: var(--lfx-red-dark) !important;
  color: var(--lfx-white) !important;
}
.btn-outline-primary {
  color: var(--lfx-red);
  border-color: var(--lfx-red);
}
.btn-outline-primary:hover {
  background-color: var(--lfx-red);
  color: var(--lfx-white);
}

/* ---- Navbar ---- */
.navbar-lfx {
  background-color: var(--lfx-white);
  border-bottom: 3px solid var(--lfx-red);
  padding: 0.75rem 1.25rem;
}
.navbar-lfx .navbar-brand {
  color: var(--lfx-black);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.navbar-lfx .navbar-brand .brand-accent {
  color: var(--lfx-red);
}
.navbar-lfx .nav-link {
  color: var(--lfx-black);
}
.navbar-lfx .nav-link:hover,
.navbar-lfx .nav-link.active {
  color: var(--lfx-red);
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--lfx-red);
  box-shadow: 0 0 0 0.2rem rgba(214, 0, 28, 0.2);
}

/* ---- Tables ---- */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--lfx-grey-light);
}
.table th {
  border-bottom: 2px solid var(--lfx-grey);
  color: var(--lfx-black);
  font-weight: 600;
}

/* ---- Home page verb cards ---- */
.verb-card {
  display: block;
  background: var(--lfx-white);
  border: 2px solid var(--lfx-grey);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-decoration: none;
  color: var(--lfx-black);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  height: 100%;
}
.verb-card:hover,
.verb-card:focus {
  border-color: var(--lfx-red);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  color: var(--lfx-black);
  transform: translateY(-2px);
}
.verb-card .verb-title {
  color: var(--lfx-red);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.verb-card .verb-desc {
  color: var(--lfx-grey);
  font-size: 0.925rem;
}

/* ---- Auth pages ---- */
.auth-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  background: var(--lfx-white);
  border-top: 5px solid var(--lfx-red);
  border-radius: 4px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
}
.auth-card h1 {
  color: var(--lfx-black);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.auth-card .subtitle {
  color: var(--lfx-grey);
  margin-bottom: 1.5rem;
}

/* ---- Money & percent formatting ---- */
.money, .percent {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Flash messages ---- */
.alert-danger {
  background-color: var(--lfx-red-light);
  border-color: var(--lfx-red);
  color: var(--lfx-red-dark);
}

/* ---- Long-running action overlay ---- */
#loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}
#loading-overlay.active {
  display: flex;
}
#loading-overlay .spinner-border {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--lfx-red);
  margin-bottom: 1.5rem;
}
#loading-overlay h3 {
  color: var(--lfx-black);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
#loading-overlay .detail {
  color: var(--lfx-grey);
  max-width: 520px;
  margin: 0 auto;
}
#loading-overlay .elapsed {
  color: var(--lfx-red);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-top: 1rem;
}

/* ---- Project-report section colors (Material / Labour / Equipment) ---- */
/*
  Each .section-* class paints a 6px left border on the card AND a solid
  colored header bar. Colors chosen to stay clear of the LFX red palette
  and to be readable with white text.

    Material  = bright green (brighter than the Bootstrap success pill)
    Labour    = blue
    Equipment = orange (formerly used for Material, moved because yellow
                was too close to the orange and hard to distinguish)
*/
.section-material {
  border-left: 6px solid #22C55E;  /* tailwind green-500 */
}
.section-material > .section-header,
.section-material > .card-header.section-header {
  background-color: #22C55E;
  color: #fff;
  border-bottom: none;
}

.section-labour {
  border-left: 6px solid #F97316;  /* orange-500 */
}
.section-labour > .section-header,
.section-labour > .card-header.section-header {
  background-color: #F97316;
  color: #fff;
  border-bottom: none;
}

.section-equipment {
  border-left: 6px solid #2563EB;  /* blue-600 */
}
.section-equipment > .section-header,
.section-equipment > .card-header.section-header {
  background-color: #2563EB;
  color: #fff;
  border-bottom: none;
}

/* Neutral section — darker grey border for cards like Revenue tracking
   and Profitability summary that don't have a signature brand color
   but should feel as solid as the colored sections. */
.section-neutral {
  border: 1.5px solid var(--lfx-grey-dark);
}

/* Combined-total section — LFX red, used for the all-in table that
   rolls up Material + Labour + Equipment per element. */
.section-total {
  border-left: 6px solid var(--lfx-red);
}
.section-total > .section-header,
.section-total > .card-header.section-header {
  background-color: var(--lfx-red);
  color: #fff;
  border-bottom: none;
}

/* Solid-color headers override Bootstrap's .text-muted inside them so
   subtitle text (e.g. "@ $40.00/hr") remains legible against the tint. */
.section-material > .section-header .text-muted,
.section-labour > .section-header .text-muted,
.section-equipment > .section-header .text-muted,
.section-total > .section-header .text-muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Section-tinted table rows for the Profitability summary. Mirror the
   .section-* card patterns (left accent + subtle background tint) but
   applied to <tr>, so each cost-stream row reads as the same visual
   identity as its summary card. */
tr.section-row-material > td:first-child { border-left: 4px solid #22C55E; }
tr.section-row-material > td { background-color: rgba(34, 197, 94, 0.08); }

tr.section-row-labour > td:first-child { border-left: 4px solid #F97316; }
tr.section-row-labour > td { background-color: rgba(249, 115, 22, 0.08); }

tr.section-row-equipment > td:first-child { border-left: 4px solid #2563EB; }
tr.section-row-equipment > td { background-color: rgba(37, 99, 235, 0.08); }

tr.section-row-total > td:first-child { border-left: 4px solid var(--lfx-red); }
tr.section-row-total > td { background-color: rgba(214, 0, 28, 0.08); font-weight: 600; }

tr.section-row-revenue > td:first-child { border-left: 4px solid var(--lfx-grey-dark); }
tr.section-row-revenue > td { background-color: rgba(0, 0, 0, 0.04); font-weight: 600; }

tr.section-row-margin-positive > td:first-child { border-left: 4px solid #22C55E; }
tr.section-row-margin-positive > td { background-color: rgba(34, 197, 94, 0.12); font-weight: 700; }

tr.section-row-margin-negative > td:first-child { border-left: 4px solid var(--lfx-red); }
tr.section-row-margin-negative > td { background-color: rgba(214, 0, 28, 0.12); font-weight: 700; }

/* Sortable column headers — minimal-chrome style. The indicator <i> is
   absolutely positioned so the header's inline width is set by the
   label alone (no more wrapping when the label-plus-icon pair barely
   fits). Default state is invisible; a faint icon shows on hover to
   hint sortability; the active-sort directional arrow is visible at
   full opacity. JS continues to swap the <i> class between
   bi-arrow-down-up / bi-sort-down-alt / bi-sort-up-alt — the CSS just
   controls when each variant is visible.

   Note: we deliberately do NOT add `position: relative` here. The
   existing `.sortable-table thead th { position: sticky; ... }` rule
   already establishes a positioning context for the absolute icon
   below, and overriding it with `position: relative` would un-stick
   the headers (and on pages that set `top: 110px`/`150px` for the
   sticky thead, would shift the header down by that many pixels and
   make it overlap the data rows). */
.sortable-table th.sortable {
  padding-right: 1.5em;
  cursor: pointer;
}
.sortable-table th.sortable > i.bi {
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.sortable-table th.sortable:hover > i.bi-arrow-down-up {
  opacity: 0.55;
}
.sortable-table th.sortable > i.bi-sort-down-alt,
.sortable-table th.sortable > i.bi-sort-up-alt {
  opacity: 1;
}

/* Sticky column headers on any long-scrolling table. When the user
   scrolls (project listings, users, purge log, the project-report
   By-element / Expense-detail / Time-detail tables, the estimate
   edit form, etc.), the header row stays pinned to the top of the
   viewport so column labels remain visible. The navbar is non-fixed
   and scrolls away with the page, so top: 0 is the correct offset.
   * Background is explicit on the th (not just inherited from
     thead.table-light) so content scrolling behind doesn't show
     through.
   * z-index keeps the header above any positioned elements in tbody. */
.sortable-table thead th,
.grouped-elements thead th,
.grouped-estimates thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: #F8F9FA;
  box-shadow: inset 0 -2px 0 #DEE2E6;
}

/* Sticky project-name banner on the project report and estimate edit
   form. Pins the page header at the top of the viewport so PMs keep
   their bearings while scrolling long tables. White background so
   content scrolling behind doesn't show through. */
.project-page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #DEE2E6;
}

/* When a sticky page-header is present, table heads dock just below
   it instead of at top: 0. 110px matches the worst-case banner height
   across the affected pages. Scoped via :has() so other sortable
   tables (project list, users, etc.) keep top: 0. */
main:has(.project-page-header) .sortable-table thead th,
main:has(.project-page-header) .grouped-elements thead th,
main:has(.project-page-header) .grouped-estimates thead th {
  top: 110px;
}


/* Xero P&L reconciliation page only — three-tier sticky stack:
     0px   page title (.project-page-header)
     80px  Income / Expense card-header (.pnl-section-header)
     150px table column headers (sortable-table thead th)
   Scoped to the page via .xero-pnl-page-header so the rest of the
   project-page-header pages keep the simpler 110px thead offset. */
.pnl-section-header {
  position: sticky;
  top: 80px;
  z-index: 7;
  background-color: #fff;
}
main:has(.xero-pnl-page-header) .sortable-table thead th {
  top: 150px;
}

/* Muted row backgrounds for the grouped estimate form. Each element on
   the estimate form has three input rows (Material / Equipment / Labour)
   and each row is tinted with a very-light version of the matching
   section color so PMs can spot the row type at a glance without the
   tint overwhelming the input fields. */
.row-material-muted  { background-color: #F0FDF4; }  /* green-50 */
.row-equipment-muted { background-color: #EFF6FF; }  /* blue-50  */
.row-labour-muted    { background-color: #FFF7ED; }  /* orange-50 */
/* Per-element TOTAL row (sums Material + Equipment + Labour for that
   single element). White background so it reads as a clean summary
   line. */
.row-total-muted     { background-color: #ffffff; font-weight: 600; }

/* Thick separator after the last row of every element group, on both
   the project report (.grouped-elements) and the estimates form
   (.grouped-estimates). The "last row" is the per-element TOTAL on
   the report, the Labour row on the estimates form, and the single
   Labour row for overhead elements. Marked in templates with
   class="element-group-end". */
.grouped-estimates tbody tr.element-group-end > td,
.grouped-elements  tbody tr.element-group-end > td {
  border-bottom: 4px solid #495057;
}

/* Project report only: box around the per-element TOTAL row so it
   reads as an outlined summary, matching the thickness of the bottom
   separator. The Element + PO Code cells use rowspan and span all
   four rows of an element group, so the "left edge" of the TOTAL
   row's content area is the first cell after those rowspan cells. */
.grouped-elements tbody tr.row-total-muted > td {
  border-top: 4px solid #495057;
}
.grouped-elements tbody tr.row-total-muted > td:first-child {
  border-left: 4px solid #495057;
}
.grouped-elements tbody tr.row-total-muted > td:last-child {
  border-right: 4px solid #495057;
}

/* Keep the striped-table default off for grouped-by-element tables,
   so the muted row color is the only background applied. Used by the
   estimate form (.grouped-estimates) and the project report / overview
   (.grouped-elements). */
.grouped-estimates tbody tr > td,
.grouped-elements  tbody tr > td { background-color: inherit; }

/* On grouped-by-element tables, the Element and PO Code cells span all
   rows of an element via rowspan. They'd otherwise inherit the first
   row's background (green on the estimate form, green on the report),
   which feels wrong because they label the whole element, not just
   one cost type. Force them back to white. */
.grouped-estimates tbody tr > td[rowspan],
.grouped-elements  tbody tr > td[rowspan] {
  background-color: #ffffff;
}

/* Lighter section variants used for the Expense-detail (green) and
   Time-detail (blue) tables. They visually echo the Material and Labour
   section colors — same left-border hue — but the header is a pastel
   tint with dark text, signalling "related to but different from". */
.section-material-light {
  border-left: 6px solid #22C55E;
}
.section-material-light > .section-header,
.section-material-light > .card-header.section-header {
  background-color: #DCFCE7;     /* green-100 */
  color: #14532D;                /* green-900 */
  border-bottom: 1px solid #BBF7D0;
}

.section-labour-light {
  border-left: 6px solid #F97316;
}
.section-labour-light > .section-header,
.section-labour-light > .card-header.section-header {
  background-color: #FFEDD5;     /* orange-100 */
  color: #7C2D12;                /* orange-900 */
  border-bottom: 1px solid #FED7AA;
}

/* Collapsible section headers (used on the per-element tables of the
   project report so PMs can hide the detail and see just the TOTAL).
   The chevron is the primary affordance — sized up and given a stronger
   weight so it's obvious at a glance that the row can be toggled. */
.collapsible-header {
  cursor: pointer;
  user-select: none;
}
.collapsible-header:hover {
  filter: brightness(1.08);
}
.collapse-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 1.15rem;
  font-weight: 700;
  vertical-align: -1px;      /* optical center against the bold title */
}
.collapsible-header[aria-expanded="true"] .collapse-chevron {
  transform: rotate(90deg);
}

/* Shared column widths for tables that aren't the summary-per-element
   grid (still useful for the Expense-detail + Time-detail tables' first
   two columns). The summary tables use their own 9-column <colgroup>;
   see `.summary-grid` below. */
.col-element    { width: 160px; min-width: 130px; }
.col-po         { width: 90px;  min-width: 80px; }

/* Project-list column helpers (saved-estimates list).
   Project name takes the slack so it's clearly the widest column;
   Division / Money / Last-Synced columns are bounded so they don't
   grow to dominate the row. */
.col-project-name { min-width: 280px; width: auto; }
.col-division   { width: 90px; min-width: 80px; }

/* Division pills — colors match the Season Calendar bars in
   app/static/js/season-calendar.js so the same divisions read the
   same colors everywhere they appear. */
.division-pill {
  display: inline-block;
  padding: 0.25em 0.55em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: #6C757D;  /* default — gray for unknown */
}
.division-pill-rdb  { background-color: #2563EB; }  /* blue */
.division-pill-cdb  { background-color: #16A34A; }  /* green */
.division-pill-enh  { background-color: #F97316; }  /* orange */
.division-pill-mtc  { background-color: #8B5CF6; }  /* purple — paired w/ ENH visually but distinct */
.division-pill-snow { background-color: #0EA5E9; }  /* sky blue */
.division-pill-salt { background-color: #0EA5E9; }  /* same as snow */
.col-money      { width: 130px; min-width: 110px; }
.col-status     { width: 90px;  min-width: 80px; }
.col-acctrec    { width: 70px;  min-width: 60px; }
.col-synced     { width: 110px; min-width: 100px; }
.col-meta-sm    { font-size: 0.8125rem; }

/* "NE" in a circle — small inline marker for projects on the at-a-glance
   list that don't yet have saved estimates. Used instead of the warning
   triangle (which is already in service of the untracked-lines callout
   on the same page, and we want a distinct visual). Uses currentColor
   for the outline + text so the parent's text-* color (typically
   text-warning) drives the appearance. */
.badge-ne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.65em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  vertical-align: text-bottom;
}

/* Summary-grid: the four per-element summary tables (Total / Material /
   Labour / Equipment) all use the same canonical 9-column layout via a
   shared <colgroup>, even when some columns don't apply to a given
   table. This guarantees Est Cost, Actual, Remaining, and % Used land
   at identical pixel positions across every table — so when tables are
   collapsed the TOTAL row values stack cleanly.

   Column order:
     0  Element
     1  PO Code
     2  Account(s)    (Material only)
     3  Est Hours     (Labour only)
     4  Act Hours     (Labour only)
     5  Est Cost      (all 4)
     6  Actual        (all 4)
     7  Remaining     (all 4)
     8  % Used        (all 4)
*/
.summary-grid {
  table-layout: fixed;
}
.summary-grid .col-account { font-size: 0.75rem; }

/* Untracked-callout banner — pink outline, transparent background, on
   the project report. Designed to be less visually dominant than the
   Bootstrap alert variants while still grabbing attention. */
.untracked-callout {
  border: 2px solid #EC4899;   /* tailwind pink-500 */
  background: transparent;
  color: inherit;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.untracked-callout:hover {
  background: rgba(236, 72, 153, 0.06);
  color: inherit;
}
.untracked-callout .bi-exclamation-triangle-fill {
  color: #EC4899;
}

/* Click-to-expand "Actual" / "Our DB" cells. The number itself is the
   click target — styled as a plain blue link with no button chrome,
   keeping cells readable while still signalling they're clickable.
   See app/static/js/expand-actual.js for the toggle behaviour. */
.expand-actual-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #2563EB;            /* same blue as .section-equipment */
  cursor: pointer;
  text-decoration: none;
  letter-spacing: inherit;
}
.expand-actual-btn:hover,
.expand-actual-btn:focus {
  text-decoration: underline;
  outline: none;
}
.expand-actual-btn[aria-expanded="true"] {
  font-weight: 600;
  text-decoration: underline;
}

/* Sub-row inserted directly below an opened "Actual" / "Our DB" cell.
   Tinted background separates it visually from the parent table without
   needing a card. .expand-popout is the inner wrapper that holds either
   a cloned mini-table (project report) or an API-rendered one (recon). */
.expand-row > td {
  background: #F8FAFC;       /* slate-50 — subtle tint */
  padding: 0.5rem 0.75rem;
  border-top: 0;
}
.expand-popout-table {
  background: #fff;
  margin-bottom: 0 !important;
}
.expand-popout-table thead th {
  background: #F1F5F9;       /* slate-100 */
}

/* ==========================================================================
   Per-element colour palette
   Used for Gantt bars (fill) and PO-code badge pills (background).
   ========================================================================== */
:root {
  --el-sitework:         #1A1A1A;  /* black */
  --el-soil:             #A0826D;  /* warm tan */
  --el-hydroseed:        #B8E6B0;  /* very light green */
  --el-site-furnishings: #7C8A99;  /* steel blue-grey */
  --el-softscapes:       #22C55E;  /* green */
  --el-specialty-rockery:#9CA3AF;  /* grey */
  --el-lighting:         #FACC15;  /* yellow */
  --el-cladding:         #D97706;  /* amber */
  --el-hardscapes:       #DC2626;  /* red */
  --el-fencing:          #78716C;  /* stone grey */
  --el-artificial-turf:  #16A34A;  /* darker green */
  --el-pool:             #38BDF8;  /* light blue */
  --el-kitchen:          #A855F7;  /* purple */
  --el-structures:       #0369A1;  /* dark blue */
  --el-special-features: #EC4899;  /* pink */
  --el-subcontractors:   #6366F1;  /* indigo */
  --el-extras:           #F97316;  /* orange */
  --el-utilities:        #0891B2;  /* teal */
  --el-equipment:        #2563EB;  /* blue — matches section-equipment */
  --el-mobilization:     #6C757D;  /* neutral grey */
  --el-irrigation:       #06B6D4;  /* cyan — scheduling-only element */
}

/* Gantt bar fills — scoped under .gantt to beat Frappe Gantt's default `.gantt .bar` rule */
.gantt .bar-sitework .bar-progress, .gantt .bar-sitework .bar             { fill: var(--el-sitework) !important; }
.gantt .bar-soil .bar-progress, .gantt .bar-soil .bar                     { fill: var(--el-soil) !important; }
.gantt .bar-hydroseed .bar-progress, .gantt .bar-hydroseed .bar           { fill: var(--el-hydroseed) !important; }
.gantt .bar-site-furnishings .bar-progress, .gantt .bar-site-furnishings .bar { fill: var(--el-site-furnishings) !important; }
.gantt .bar-softscapes .bar-progress, .gantt .bar-softscapes .bar         { fill: var(--el-softscapes) !important; }
.gantt .bar-specialty-rockery .bar-progress, .gantt .bar-specialty-rockery .bar { fill: var(--el-specialty-rockery) !important; }
.gantt .bar-lighting .bar-progress, .gantt .bar-lighting .bar             { fill: var(--el-lighting) !important; }
.gantt .bar-cladding .bar-progress, .gantt .bar-cladding .bar             { fill: var(--el-cladding) !important; }
.gantt .bar-hardscapes .bar-progress, .gantt .bar-hardscapes .bar         { fill: var(--el-hardscapes) !important; }
.gantt .bar-fencing .bar-progress, .gantt .bar-fencing .bar               { fill: var(--el-fencing) !important; }
.gantt .bar-artificial-turf .bar-progress, .gantt .bar-artificial-turf .bar { fill: var(--el-artificial-turf) !important; }
.gantt .bar-pool .bar-progress, .gantt .bar-pool .bar                     { fill: var(--el-pool) !important; }
.gantt .bar-kitchen .bar-progress, .gantt .bar-kitchen .bar               { fill: var(--el-kitchen) !important; }
.gantt .bar-structures .bar-progress, .gantt .bar-structures .bar         { fill: var(--el-structures) !important; }
.gantt .bar-special-features .bar-progress, .gantt .bar-special-features .bar { fill: var(--el-special-features) !important; }
.gantt .bar-subcontractors .bar-progress, .gantt .bar-subcontractors .bar { fill: var(--el-subcontractors) !important; }
.gantt .bar-extras .bar-progress, .gantt .bar-extras .bar                 { fill: var(--el-extras) !important; }
.gantt .bar-utilities .bar-progress, .gantt .bar-utilities .bar           { fill: var(--el-utilities) !important; }
.gantt .bar-equipment .bar-progress, .gantt .bar-equipment .bar           { fill: var(--el-equipment) !important; }
.gantt .bar-mobilization .bar-progress, .gantt .bar-mobilization .bar     { fill: var(--el-mobilization) !important; }
.gantt .bar-irrigation .bar-progress, .gantt .bar-irrigation .bar       { fill: var(--el-irrigation) !important; }
/* Override hover so bars keep their element colour (slightly brighter via opacity) */
.gantt .bar-wrapper.bar-sitework:hover .bar,
.gantt .bar-wrapper.bar-sitework.active .bar              { fill: var(--el-sitework) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-soil:hover .bar,
.gantt .bar-wrapper.bar-soil.active .bar                  { fill: var(--el-soil) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-hydroseed:hover .bar,
.gantt .bar-wrapper.bar-hydroseed.active .bar             { fill: var(--el-hydroseed) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-site-furnishings:hover .bar,
.gantt .bar-wrapper.bar-site-furnishings.active .bar      { fill: var(--el-site-furnishings) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-softscapes:hover .bar,
.gantt .bar-wrapper.bar-softscapes.active .bar            { fill: var(--el-softscapes) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-specialty-rockery:hover .bar,
.gantt .bar-wrapper.bar-specialty-rockery.active .bar     { fill: var(--el-specialty-rockery) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-lighting:hover .bar,
.gantt .bar-wrapper.bar-lighting.active .bar              { fill: var(--el-lighting) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-cladding:hover .bar,
.gantt .bar-wrapper.bar-cladding.active .bar              { fill: var(--el-cladding) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-hardscapes:hover .bar,
.gantt .bar-wrapper.bar-hardscapes.active .bar            { fill: var(--el-hardscapes) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-fencing:hover .bar,
.gantt .bar-wrapper.bar-fencing.active .bar               { fill: var(--el-fencing) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-artificial-turf:hover .bar,
.gantt .bar-wrapper.bar-artificial-turf.active .bar       { fill: var(--el-artificial-turf) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-pool:hover .bar,
.gantt .bar-wrapper.bar-pool.active .bar                  { fill: var(--el-pool) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-kitchen:hover .bar,
.gantt .bar-wrapper.bar-kitchen.active .bar               { fill: var(--el-kitchen) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-structures:hover .bar,
.gantt .bar-wrapper.bar-structures.active .bar            { fill: var(--el-structures) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-special-features:hover .bar,
.gantt .bar-wrapper.bar-special-features.active .bar      { fill: var(--el-special-features) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-subcontractors:hover .bar,
.gantt .bar-wrapper.bar-subcontractors.active .bar        { fill: var(--el-subcontractors) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-extras:hover .bar,
.gantt .bar-wrapper.bar-extras.active .bar                { fill: var(--el-extras) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-utilities:hover .bar,
.gantt .bar-wrapper.bar-utilities.active .bar             { fill: var(--el-utilities) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-equipment:hover .bar,
.gantt .bar-wrapper.bar-equipment.active .bar             { fill: var(--el-equipment) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-mobilization:hover .bar,
.gantt .bar-wrapper.bar-mobilization.active .bar          { fill: var(--el-mobilization) !important; opacity: 0.8; }
.gantt .bar-wrapper.bar-irrigation:hover .bar,
.gantt .bar-wrapper.bar-irrigation.active .bar            { fill: var(--el-irrigation) !important; opacity: 0.8; }

/* Task sub-bars — lighter opacity to differentiate from phase summary bars */
.gantt .bar-task .bar { opacity: 0.65; }
.gantt .bar-task .bar-label { font-size: 10px; }
.gantt .bar-task:hover .bar { opacity: 0.85; }

/* Change-order phases — visual treatment:
   - `.bar-has-co`     phase whose hours were extended by a CO (Case A).
                       Keep the element's normal fill but overlay a
                       diagonal yellow stripe pattern so it reads as
                       "this phase has a CO mixed in".
   - `.bar-appended-co` standalone CO phase appended at the project
                       tail (Case B). Plain warning-yellow fill with
                       a darker outline so it pops out as "this is a
                       free-floating CO phase, drag me wherever".  */
.gantt .bar-has-co .bar {
  /* Subtle yellow diagonal stripe overlay — keeps element color but
     marks "this has CO" without being loud. */
  stroke: #F59E0B !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6 3 !important;
}
.gantt .bar-appended-co .bar {
  fill: #F59E0B !important;
  stroke: #B45309 !important;
  stroke-width: 1 !important;
}
.gantt .bar-appended-co .bar-progress { fill: #B45309 !important; }
.gantt .bar-wrapper.bar-appended-co:hover .bar { opacity: 0.85; }

/* Hide the resize handles on appended-CO bars. The bar's length is
   tied to the change order's labour hours, owned by the CO record —
   resizing would silently desync the visual from the source of truth.
   The middle of the bar still drags so the PM can MOVE the CO phase
   anywhere; they just can't change its length here. To change CO
   hours, edit the CO on the estimate page. */
.gantt .bar-wrapper.bar-appended-co .handle {
  display: none !important;
}
.gantt .bar-wrapper.bar-appended-co .bar { cursor: move; }

/* Phase detail table — task rows */
.phase-row { transition: background 0.1s; }
.phase-row:hover { background: rgba(0,0,0,0.02); }
.phase-expand-chevron { display: inline-block; transition: transform 0.15s; }
tr.task-row { background: #fafbfc; }
tr.task-row td { padding-top: 2px; padding-bottom: 2px; font-size: 0.85rem; }
.task-name-input { border: 1px solid transparent; background: transparent; font-size: 0.85rem; }
.task-name-input:focus { border-color: #dee2e6; background: #fff; }
.task-hours-input { font-size: 0.85rem; }

/* Phase detail table — element/task name wrapping */
#phase-detail-table .col-element {
  width: 220px;
  min-width: 160px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#phase-detail-table .col-po { width: 100px; min-width: 80px; }
#phase-detail-table .task-name-input {
  white-space: normal;
  word-wrap: break-word;
}
/* Deferred task highlight */
tr.task-row.table-info { background: #e8f4fd !important; }
tr.task-row.table-info td { border-left: 2px solid #0d6efd; }

/* PO-code badge pills — coloured to match their element */
.badge-el-sitework         { background-color: var(--el-sitework) !important; color: #fff; }
.badge-el-soil             { background-color: var(--el-soil) !important; color: #fff; }
.badge-el-hydroseed        { background-color: var(--el-hydroseed) !important; color: #333; }
.badge-el-site-furnishings { background-color: var(--el-site-furnishings) !important; color: #fff; }
.badge-el-softscapes       { background-color: var(--el-softscapes) !important; color: #fff; }
.badge-el-specialty-rockery{ background-color: var(--el-specialty-rockery) !important; color: #fff; }
.badge-el-lighting         { background-color: var(--el-lighting) !important; color: #333; }
.badge-el-cladding         { background-color: var(--el-cladding) !important; color: #fff; }
.badge-el-hardscapes       { background-color: var(--el-hardscapes) !important; color: #fff; }
.badge-el-fencing          { background-color: var(--el-fencing) !important; color: #fff; }
.badge-el-artificial-turf  { background-color: var(--el-artificial-turf) !important; color: #fff; }
.badge-el-pool             { background-color: var(--el-pool) !important; color: #333; }
.badge-el-kitchen          { background-color: var(--el-kitchen) !important; color: #fff; }
.badge-el-structures       { background-color: var(--el-structures) !important; color: #fff; }
.badge-el-special-features { background-color: var(--el-special-features) !important; color: #fff; }
.badge-el-subcontractors   { background-color: var(--el-subcontractors) !important; color: #fff; }
.badge-el-extras           { background-color: var(--el-extras) !important; color: #fff; }
.badge-el-utilities        { background-color: var(--el-utilities) !important; color: #fff; }
.badge-el-equipment        { background-color: var(--el-equipment) !important; color: #fff; }
.badge-el-mobilization     { background-color: var(--el-mobilization) !important; color: #fff; }
.badge-el-irrigation       { background-color: var(--el-irrigation) !important; color: #fff; }

.gantt-popup {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ========================================================================
   Season Calendar — scrollable project timeline
   ======================================================================== */

.season-cal-wrapper {
  display: flex;
  position: relative;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
  max-height: 80vh;
}

/* Left panel: project names (fixed) */
.season-cal-left {
  flex: 0 0 260px;
  min-width: 260px;
  border-right: 2px solid #dee2e6;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  z-index: 3;
}

/* Middle panel: scrollable timeline */
.season-cal-timeline {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  background: #fafafa;
}

/* Right panel: foreman + metrics (fixed) */
.season-cal-right {
  flex: 0 0 316px;
  min-width: 316px;
  border-left: 2px solid #dee2e6;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  z-index: 3;
}

/* Header row */
.season-cal-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  min-height: 52px;
  align-items: stretch;
}
/* Timeline header stacks month + week rows vertically */
#cal-timeline-header.season-cal-header-row {
  display: block;
}

/* Month row inside timeline header */
.season-cal-month-row {
  position: relative;
  height: 28px;
  border-bottom: 1px solid #dee2e6;
}
.season-cal-month-cell {
  position: absolute;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #212529;
  border-right: 1px solid #dee2e6;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.season-cal-week-row {
  position: relative;
  height: 24px;
}
.season-cal-week-tick {
  position: absolute;
  top: 0;
  height: 24px;
  font-size: 0.65rem;
  color: #868e96;
  display: flex;
  align-items: center;
  padding-left: 3px;
  border-left: 1px solid #e9ecef;
}

/* Header cells for left/right panels */
.season-cal-name-header {
  flex: 1;
  font-weight: 600;
  font-size: 0.8rem;
  color: #495057;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.season-cal-div-header {
  flex: 0 0 44px;
  font-weight: 600;
  font-size: 0.8rem;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}
.season-cal-status-header {
  flex: 0 0 76px;
  font-weight: 600;
  font-size: 0.8rem;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.season-cal-sortable {
  cursor: pointer;
  user-select: none;
}
.season-cal-sortable:hover {
  background: rgba(0,0,0,0.04);
}
.season-cal-sortable i {
  font-size: 0.65rem;
  margin-left: 2px;
}
.season-cal-sortable .sort-priority {
  font-size: 0.6rem;
  color: #868e96;
  margin-left: 1px;
}
.season-cal-foreman-header,
.season-cal-rplh-header,
.season-cal-track-header {
  font-weight: 600;
  font-size: 0.8rem;
  color: #495057;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.season-cal-foreman-header { flex: 1 1 100px; }
.season-cal-rplh-header { flex: 0 0 60px; text-align: right; justify-content: flex-end; }
.season-cal-track-header { flex: 0 0 60px; text-align: center; justify-content: center; }

/* Data rows */
.season-cal-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}
.season-cal-row.even {
  background: rgba(0, 0, 0, 0.015);
}

/* Name row (left panel) */
.season-cal-name-row {
  padding: 0 8px 0 12px;
  gap: 6px;
  overflow: hidden;
}
.season-cal-project-link {
  flex: 1 1 auto;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.season-cal-project-link:hover {
  color: #D6001C;
  text-decoration: underline;
}
.season-cal-project-name {
  flex: 1 1 auto;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.season-cal-div-badge {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.season-cal-div-cell {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}
.season-cal-status-cell {
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.season-cal-status-cell .badge {
  font-size: 0.6rem;
  padding: 2px 5px;
  font-weight: 500;
}

/* Bar row (timeline panel) */
.season-cal-bar-row {
  position: relative;
}
.season-cal-bar {
  position: absolute;
  top: 8px;
  height: 20px;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.season-cal-bar:hover {
  opacity: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Right panel cells */
.season-cal-right-row {
  padding: 0 8px;
}
.season-cal-cell {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.season-cal-foreman-cell {
  flex: 1 1 100px;
  font-size: 0.78rem;
  color: #495057;
  overflow: hidden;
  text-overflow: ellipsis;
}
.season-cal-foreman-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.4;
}
.season-cal-rplh-cell {
  flex: 0 0 60px;
  font-size: 0.78rem;
  justify-content: flex-end;
  text-align: right;
  font-weight: 500;
}
.season-cal-track-cell {
  flex: 0 0 60px;
  justify-content: center;
  text-align: center;
}
.season-cal-track-cell .badge {
  font-size: 0.65rem;
  padding: 2px 6px;
}

/* Today line */
.season-cal-today-line {
  position: absolute;
  top: 0;
  width: 2px;
  background: #D6001C;
  z-index: 2;
  pointer-events: none;
}

/* Month separator lines */
.season-cal-month-line {
  position: absolute;
  top: 0;
  width: 1px;
  background: #dee2e6;
  z-index: 1;
  pointer-events: none;
}