/* Budgeting & Forecasting Tool — app-specific styles on top of the Intricate base css/ */

/* ── Sidebar ──────────────────────────────────────────────────────────── */
/* NOTE: css/new-style.css defines its OWN unrelated tree-widget sidebar
   under the same .sidebar-new class name, keyed off an "expanded" class
   (opposite convention from ours, which keys off "collapsed"). Since our
   nav never carries "expanded", its `.sidebar-new:not(.expanded)` rule
   always matches and fights our width at equal specificity. Every rule
   here that could collide with it is !important to guarantee ours wins. */
.sidebar-new {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 27rem !important;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: width 0.3s ease;
  overflow: hidden;
}
.sidebar-new.collapsed {
  width: 5.66rem !important;
}
.sidebar-new.collapsed .sidebar-label,
.sidebar-new.collapsed .sidebar-section-label {
  display: none !important;
}
.sidebar-toggle-row {
  display: flex;
  align-items: center;
  height: 4.5rem;
  padding: 0 var(--size-5);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar-toggle-btn {
  color: #fff;
  font-size: 1.5rem;
}
.sidebar-toggle-btn:hover { color: #FFDB9F; }
.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav-item a,
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem var(--size-6);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.sidebar-nav-item a:hover,
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.12);
  color: #FFDB9F;
}
.sidebar-nav-item.active a,
.sidebar-nav-item.active {
  border-left-color: #FFDB9F;
  background: rgba(255,255,255,0.15);
  color: #FFDB9F;
}
.sidebar-nav-item i { font-size: 1.1rem; min-width: 1.2rem; text-align: center; }
.sidebar-section-label {
  padding: 0.75rem var(--size-6) 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--size-4) 0;
}

/* Wrapper shifts with sidebar. .content is nested inside .wrapper (see
   base.html) and deliberately carries NO sidebar-collapsed/expanded class
   of its own -- css/new-style.css defines .content.sidebar-collapsed/
   .sidebar-expanded with its own margin-left, which would double the
   offset if .content also carried that class. */
.wrapper.sidebar-collapsed { margin-left: 5.66rem !important; transition: margin-left 0.3s; }
.wrapper.sidebar-expanded  { margin-left: 27rem !important;   transition: margin-left 0.3s; }

/* ── Header overrides ─────────────────────────────────────────────────── */
.new-ui-topheader {
  background: #878a91;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding: 0 var(--size-6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
}
.new-ui-topheader.sidebar-collapsed { padding-left: calc(5.66rem + var(--size-6)) !important; transition: padding-left 0.3s; }
.new-ui-topheader.sidebar-expanded  { padding-left: calc(27rem + var(--size-6)) !important; transition: padding-left 0.3s; }
.new-logo { height: 2.5rem; }
#new-toprightnav { display: flex; align-items: center; gap: var(--size-5); }
.header-dialog-button { border:none; background:none; font-size:2rem; color:#EFEFEF; transition:color 0.3s; cursor:pointer; }
.header-dialog-button:hover { color:#fff; }
.header-icon-background { opacity: 0; color: #ACAEB3; transition: opacity 0.3s; }
.header-dialog-button:hover .header-icon-background { opacity: 1; }
.header-icon { color: #EFEFEF; }

/* Breadcrumb */
div.breadcrumb {
  background: #eee;
  font-style: italic;
  font-size: 1rem;
  color: #7F7F7F;
  height: 2.8rem;
  border-bottom: 0.075rem solid #ccc;
  display: flex;
  align-items: center;
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
  z-index: 8;
}
/* Matches .new-ui-topheader's own sidebar-state padding -- without this the
   breadcrumb text sits at the collapsed-width offset even when the sidebar
   is expanded, rendering underneath it (sidebar has a higher z-index). */
div.breadcrumb.sidebar-collapsed { padding-left: 5.66rem !important; transition: padding-left 0.3s; }
div.breadcrumb.sidebar-expanded  { padding-left: 27rem !important;   transition: padding-left 0.3s; }
div.breadcrumb a { color: var(--primary); }

/* Content area — wrapper's margin-top already clears header + breadcrumb */
.content {
  padding-top: var(--size-6);
  min-height: calc(100vh - 7.3rem);
}

/* Alert overlays */
.alert-overlay {
  position: fixed;
  bottom: var(--size-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: var(--size-5) var(--size-7);
  border-radius: 0.4rem;
  box-shadow: var(--shadow);
  background: #eee;
  max-width: 36rem;
  width: 90%;
}
.alert-overlay.error { background: #fee; color: #f44; }
.alert-overlay.warning { background: #878a91; color: #fff400; }
.alert-overlay-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ── Status messages ──────────────────────────────────────────────────── */
.error_message   { color:#f00; background:#fee; border:1px solid #fcc; padding: 0.6rem; border-radius: 0.3rem; }
.success_message { color:#0a0; background:#efe; border:1px solid #cfc; padding: 0.6rem; border-radius: 0.3rem; }

.header-user-name {
  color: #fff;
  margin-right: 1rem;
  font-size: 1.2rem;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-7);
  margin-bottom: var(--size-7);
}

.stat-card {
  background: #fff;
  border-radius: var(--size-6);
  box-shadow: var(--shadow);
  padding: var(--size-6) var(--size-7);
  flex: 1;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stat-card .stat-label {
  color: var(--accent);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: var(--size-4);
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary);
}

.gap-positive { color: #0a0; }
.gap-warning  { color: #D07B18; }
.gap-negative { color: #f00; }

.scenario-toggle .button.active {
  background-color: var(--primary-darker);
  border-color: var(--primary-darker);
}

.discretionary-tag {
  background-color: #FFF3E0;
  border-radius: 0.3rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.9rem;
}

.incomplete-badge {
  background-color: #fdecea;
  color: #b3261e;
  border-radius: 1rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.na-badge {
  background-color: var(--accent-faded);
  color: var(--accent);
  border-radius: 1rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

tr.na-filtered-out { display: none !important; }

/* A line item shown on a GROUP's P&L that actually belongs to one of its
   children. Tinted rather than hidden: the group's total includes it, so
   leaving it out of the expansion is what made the total look unbacked. */
tr.gl-child-item > td { background-color: var(--accent-faded); }

.child-bu-badge {
  background-color: var(--accent-faded);
  color: var(--accent);
  border-radius: 1rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
}

.child-bu-badge:hover { color: var(--primary); }

.gl-active-scenario-col {
  background: var(--accent-faded);
  font-weight: bold;
}

.sga-only-badge {
  display: inline-block;
  background-color: var(--primary-faded);
  color: var(--primary-darker);
  border-radius: 1rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-top: 0.15rem;
}

.locked-cycle-banner {
  background-color: var(--accent-faded);
  color: var(--dark);
  border-radius: var(--size-4);
  padding: var(--size-6);
  margin-bottom: var(--size-7);
  font-style: italic;
}

/* Collapsible info box (CSV format / import notes, etc.) -- collapsed by
   default, an (i) icon expands it in place. */
.info-box {
  margin-bottom: var(--size-6);
}

.info-box-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.95rem;
}

.info-box-toggle .fa-chevron-down,
.info-box-toggle .fa-chevron-up {
  font-size: 0.75rem;
  color: var(--accent);
}

.info-box-body {
  display: none;
  background: #f8f8f8;
  border: 1px solid var(--accent-faded);
  border-radius: 0.3rem;
  padding: var(--size-6);
  font-size: 0.9rem;
  line-height: 1.7;
}

.info-box-body p {
  margin: 0 0 0.75rem;
}

.info-box-body p:last-child {
  margin-bottom: 0;
}

.info-box.expanded .info-box-body {
  display: block;
}

/* Dashboard org chart -- Total Company at the root, then BU Groups, then their
   BUs, nested to whatever depth business_units.parent_business_unit_id goes.
   Classic pure-CSS tree: table-cell layout + pseudo-element connector lines. */
.org-chart-hero {
  background: #fff;
  border-radius: var(--size-4);
  box-shadow: var(--shadow);
  padding: var(--size-7);
  max-width: 22rem;
  margin: 0 auto var(--size-8);
  text-align: center;
}
.org-chart-hero .stat-label { color: var(--accent); font-size: 1.1rem; text-transform: uppercase; margin-bottom: var(--size-4); }
.org-chart-hero .stat-value { font-size: 2.6rem; font-weight: bold; color: var(--primary-darker); }

.org-chart, .org-chart ul {
  display: table;
  margin: 0 auto;
  padding: 0;
}
.org-chart ul { width: 100%; position: relative; }
.org-chart li {
  display: table-cell;
  list-style: none;
  vertical-align: top;
  position: relative;
  padding: var(--size-8) var(--size-5) 0 var(--size-5);
}
.org-chart li::before,
.org-chart li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: var(--size-8);
  border-top: 2px solid var(--accent-faded);
}
.org-chart li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--accent-faded);
}
.org-chart li:only-child { padding-top: 0; }
.org-chart li:only-child::before,
.org-chart li:only-child::after { display: none; }
.org-chart li:first-child::before,
.org-chart li:last-child::after { border: 0 none; }
.org-chart li:last-child::before { border-right: 2px solid var(--accent-faded); border-radius: 0 0.3rem 0 0; }
.org-chart li:first-child::after { border-radius: 0.3rem 0 0 0; }
.org-chart > li { padding-top: 0; }
.org-chart > li::before,
.org-chart > li::after { display: none; }
.org-chart ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--size-8);
  border-left: 2px solid var(--accent-faded);
}

.org-node {
  display: inline-block;
  min-width: 9.5rem;
  background: #fff;
  border-radius: var(--size-4);
  box-shadow: var(--shadow);
  padding: var(--size-5) var(--size-6);
  text-align: center;
}
.org-node .org-node-code { font-weight: 600; color: var(--primary); font-size: 0.95rem; }
.org-node .org-node-name { color: var(--dark); font-size: 0.8rem; margin: 0.1rem 0 var(--size-4); }
.org-node .org-node-amount { font-weight: bold; color: var(--primary-darker); font-size: 1.15rem; }
.org-node.org-node-group { background: var(--primary-faded); }

/* Percent-split slider: N segments whose widths always sum to 100%. */
.percent-split-slider { width: 100%; margin: 0.5rem 0 0.75rem; }
.percent-slider-track.ui-slider {
  position: relative;
  height: 0.4rem;
  border-radius: 0.2rem;
  background: var(--accent-faded);
  border: none;
  margin: 0 0 0.6rem;
}
.percent-slider-track .ui-slider-handle {
  width: 1rem;
  height: 1rem;
  top: -0.3rem;
  margin-left: -0.5rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow);
  cursor: ew-resize;
  outline: none;
}
.percent-slider-bar {
  display: flex;
  width: 100%;
  height: 1.4rem;
  border-radius: 0.3rem;
  overflow: hidden;
}
.percent-slider-seg {
  height: 100%;
  box-sizing: border-box;
  border-right: 2px solid #fff;
  transition: width 0.05s linear;
}
.percent-slider-seg:last-child { border-right: none; }
.percent-slider-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
}
.percent-slider-tag { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--dark); }
.percent-slider-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

/* Quantity x Rate block: a clean unit/effort header row + a real Base/Medium/
   Stretch table, replacing a wrapping soup of tiny label-over-input divs. */
.qty-rate-block { margin-top: 0.4rem; }
.qty-rate-header {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 0.6rem;
}
.qty-rate-table { border-collapse: collapse; margin-bottom: 0.4rem; }
.qty-rate-table th, .qty-rate-table td { padding: 0.25rem 0.6rem 0.25rem 0; text-align: left; }
.qty-rate-table thead th { font-size: 0.75rem; color: var(--accent); font-weight: 600; }
.qty-rate-table tbody th { font-size: 0.85rem; font-weight: 600; padding-right: 0.8rem; white-space: nowrap; }

/* Month distribution: bulk-assign tool (select months, give them a %, the
   rest split the remainder evenly) + a plain editable grid for hand-tuning. */
.month-distribution { width: 100%; margin-top: 0.4rem; }
.month-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.month-chip {
  border: 1px solid var(--accent-faded);
  background: #fff;
  border-radius: 1rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--dark);
}
.month-chip:hover { border-color: var(--primary); }
.month-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.month-bulk-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--accent-faded);
  border-radius: 0.3rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.6rem;
}
.month-bulk-label { font-size: 0.8rem; color: var(--dark); }
.month-pct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
}
.month-pct-field label { display: block; font-size: 0.75rem; color: var(--accent); margin-bottom: 0.15rem; }
.month-pct-input-wrap { display: flex; align-items: center; gap: 0.2rem; }
.month-pct-input { width: 3.6rem; }
.month-pct-total { font-size: 0.85rem; font-weight: 600; color: var(--primary); }
.month-pct-total-bad { color: #b23b3b; }

/* Typeahead multi-select: search box + chips + a filtered dropdown list. */
.typeahead-multiselect { position: relative; display: inline-block; vertical-align: top; }
.tas-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.25rem; }
.tas-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--primary-faded);
  color: var(--primary-darker);
  border-radius: 1rem;
  padding: 0.15rem 0.3rem 0.15rem 0.6rem;
  font-size: 0.8rem;
}
.tas-chip-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.2rem;
}
.tas-search { width: 100%; }
.tas-dropdown {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--accent-faded);
  border-radius: 0.3rem;
  box-shadow: var(--shadow);
  margin-top: 0.1rem;
}
.tas-option { padding: 0.35rem 0.6rem; font-size: 0.85rem; cursor: pointer; }
.tas-option:hover { background: var(--accent-faded); }

/* ── Period grid (Monthly P&L / Forecasting monthly): a "Show:" checkbox
   row picks which period-type column-groups (month/quarter/ytd/annual) are
   visible -- replaces an earlier per-quarter chevron toggle that left
   months and quarter totals sitting side by side with only a faint shade
   difference, reading as one blended block instead of quarter-summarizes-
   its-3-months. A left border on each group's first column plus a distinct
   background on summary (non-month) columns makes the grouping visible
   whichever combination is checked. */
.period-toggle-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.75rem; font-size: 0.85rem;
}
.period-toggle-bar .toggle-group { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.period-toggle-bar label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; white-space: nowrap; }
.period-toggle-divider { width: 1px; height: 1.1rem; background: var(--accent-faded); }

.period-grid-col { text-align: right; white-space: nowrap; width: 5.5rem; padding: 0.35rem 0.5rem !important; }
.period-grid-table th.period-group-start, .period-grid-table td.period-group-start { border-left: 2px solid var(--accent-faded); }
.period-grid-table th.period-summary-col, .period-grid-table td.period-summary-col { background: var(--primary-faded); }

.delta-pct { display: none; }
.show-delta-pct .delta-dollar { display: none; }
.show-delta-pct .delta-pct { display: inline; }

/* ── P&L Plan: keep Base/Medium/Stretch columns lined up across the GL
   table, its nested item-detail table, and the Add/Edit form's amount
   inputs -- three independently-laid-out elements that used to size
   themselves with no shared reference. */
.gl-amount-col { text-align: right; width: 9rem; }
.scenario-scaling-amount-input { width: 9rem !important; }

/* ── Per-row status icons -- a small colored icon + tooltip flagging a
   condition (missing data, over/under a target, a deficit) in place of a
   full-row background highlight, which reads as "hard to see" at a glance
   and doesn't explain itself without hovering the whole row. Originated on
   Employee Plan's completeness checks; reused wherever a row needs a
   quiet, explained warning instead of shouting via background color. */
/* All status icons render with the "fas" solid weight (not "fal" light --
   that's for ordinary action buttons like edit/delete, a deliberately
   quieter category). Solid glyphs + a larger size + saturated colors is
   what actually reads as bold at a glance; the original thin lines and
   muted tones (esp. --accent gray for "info") didn't. */
.status-icon { font-size: 1.2rem; margin-right: 0.35rem; cursor: help; }
.status-icon-critical { color: #d32f2f; }
.status-icon-warning { color: #cc7a00; }
.status-icon-info { color: #0b5ed7; }
.status-icon-good { color: #0a8a2e; }

/* ── Icon legend (employees/list.html) ─────────────────────────────────────
   A <details> rather than a JS popup: it expands with no script, is keyboard
   accessible and focus-visible for free, and degrades to plain open/close
   markup if anything about the page's JS breaks. Collapsed by default -- the
   per-row tooltips already answer "what is THIS one?", so the legend is for
   the first-time or occasional reader and should not push the table down the
   screen for everyone else. */
.icon-legend { border: 1px solid var(--accent-faded); border-radius: 0.4rem; max-width: 62rem; }
.icon-legend > summary {
    cursor: pointer;
    padding: 0.55rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    /* The default triangle is kept -- it is the affordance that says this
       expands, and browsers already rotate it on open. */
}
.icon-legend > summary:hover { color: var(--primary); }
.icon-legend[open] > summary { border-bottom: 1px solid var(--accent-faded); }
.icon-legend-body { padding: 0.7rem 0.9rem 0.9rem; }

/* The colour key. Inline-flex with wrap so it collapses to two lines on a
   narrow window instead of forcing the panel to scroll sideways. */
.icon-legend-severities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
    background: var(--accent-faded);
    border-radius: 0.3rem;
}
.icon-legend-severities .status-icon { margin-right: 0.2rem; }

.icon-legend-table { width: 100%; border-collapse: collapse; }
/* No zebra striping or borders: this is a reference list, and the table is
   here only to keep the icons in a column aligned with their descriptions. */
.icon-legend-table td { border: none; padding: 0.22rem 0.3rem; }
.icon-legend-table .status-icon { margin-right: 0; }

/* ── Fixed Costs/SG&A/OPEX BU rollup tree (costs/list.html) ────────────── */
.cost-tree-toggle { margin-right: 0.3rem; }
.cost-tree-bu-row.cost-tree-empty td { color: var(--accent); }
.cost-tree-item-row td:first-child { color: var(--dark); }

/* ── Dashboard "Needs Attention" panels ─────────────────────────────────── */
.dashboard-panel {
  background: #fff;
  border: 1px solid var(--accent-faded);
  border-radius: 0.3rem;
  padding: var(--size-6);
}
.dashboard-panel h4 { margin-top: 0; margin-bottom: var(--size-5); display: flex; align-items: center; }
.dashboard-panel table { width: 100%; font-size: 0.9rem; border-collapse: collapse; }
.dashboard-panel table td { padding: 0.35rem 0; border-bottom: 1px solid var(--accent-faded); }
.dashboard-panel table tr:last-child td { border-bottom: none; }

/* ── Workflow progress widget (dashboard + header popup) ────────────────── */
.workflow-steps-row { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-bottom: var(--size-6); }
.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 8rem;
  background: #fff;
  border: var(--size-1) solid var(--accent-faded);
  border-radius: var(--size-6);
  padding: var(--size-6) var(--size-5);
  text-decoration: none;
  color: var(--dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.workflow-step:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.workflow-step-icon { font-size: 1.6rem; color: var(--accent); margin-bottom: 0.15rem; }
.workflow-step-label { font-weight: 700; font-size: 0.95rem; }
.workflow-step-sublabel { color: var(--accent); font-size: 0.75rem; }
.workflow-step-pct { font-weight: 700; color: var(--primary); font-size: 0.9rem; margin-top: 0.2rem; }
.workflow-step-done { border-color: #0a8a2e; background: #f2fbf4; }
.workflow-step-done .workflow-step-icon { color: #0a8a2e; }
.workflow-step-done .workflow-step-pct { color: #0a8a2e; }
.workflow-step-current { border-color: var(--secondary); box-shadow: var(--shadow); }
.workflow-step-current .workflow-step-icon { color: var(--secondary); }
.workflow-step-arrow { display: flex; align-items: center; justify-content: center; color: var(--accent-faded); font-size: 1.3rem; padding: 0 0.4rem; }
@media only screen and (max-width: 850px) {
  .workflow-step-arrow { display: none; }
  .workflow-step { min-width: 45%; }
}

.workflow-next-step {
  display: flex;
  align-items: center;
  gap: var(--size-6);
  background: var(--primary-faded);
  border-radius: var(--size-6);
  padding: var(--size-6) var(--size-7);
  font-size: 0.9rem;
}
.workflow-next-step > i { font-size: 1.8rem; color: var(--primary); }
.workflow-next-step-complete { background: #f2fbf4; }
.workflow-next-step-complete > i { color: #0a8a2e; }

/* ── Header % complete helper button + popup ─────────────────────────────── */
.header-progress-popup {
  position: fixed;
  z-index: 5;
  top: 5.5rem;
  right: 2rem;
  width: min(40rem, calc(100vw - 2rem));
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.7), inset 0 0 0 0.08rem #a8a8a8;
  display: none;
}
.header-progress-popup-header {
  background-color: #227b99;
  color: #fff;
  border-radius: 1rem 1rem 0 0;
  padding: var(--size-6) var(--size-7);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-progress-popup-body { padding: var(--size-7); }

/* ── Generic centered modal (Capacity Planning demand-detail popup) ──────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
}
.modal-box {
  background: #fff;
  border-radius: 1rem;
  width: min(44rem, calc(100vw - 2rem));
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.7), inset 0 0 0 0.08rem #a8a8a8;
}
.modal-header {
  background-color: #227b99;
  color: #fff;
  border-radius: 1rem 1rem 0 0;
  padding: var(--size-6) var(--size-7);
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}
.modal-body { padding: var(--size-7); }
/* The popup is a fixed ~40rem box regardless of screen width, so the
   dashboard's flex-wrap-with-arrows layout (fine at full page width) breaks
   into an orphaned last tile + stray arrow here -- always run it as a grid. */
.header-progress-popup .workflow-steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem; }
.header-progress-popup .workflow-step-arrow { display: none; }
.header-progress-popup .workflow-step { min-width: 0; padding: var(--size-5) var(--size-4); }
.header-progress-popup .workflow-step-label { font-size: 0.82rem; }
.header-progress-popup .workflow-step-sublabel { font-size: 0.68rem; }

/* ── Dashboard charts ─────────────────────────────────────────────────── */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--size-7);
}
@media only screen and (max-width: 1110px) {
  .viz-grid { grid-template-columns: 1fr; }
}
.chart-bu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: var(--size-5) var(--size-6);
  background: var(--primary-faded);
  border-radius: var(--size-4);
  margin-bottom: var(--size-6);
  font-size: 0.85rem;
}
.chart-bu-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.chart-bu-legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chart-card {
  background: #fff;
  border: var(--size-1) solid var(--accent-faded);
  border-radius: var(--size-6);
  padding: var(--size-6);
}
.chart-card h4 { margin-top: 0; margin-bottom: var(--size-5); }
.chart-canvas-wrap { position: relative; width: 100%; }
.chart-canvas-wrap canvas { display: block; }
.chart-metric-toggle { display: flex; gap: 0.2rem; }
.chart-metric-toggle .button { margin: 0; padding: var(--size-4) var(--size-6); font-size: 0.8rem; }
.chart-metric-toggle .button.active {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.chart-data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: var(--size-5); }
.chart-data-table th, .chart-data-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--accent-faded); text-align: right; }
.chart-data-table th:first-child, .chart-data-table td:first-child { text-align: left; }

/* ── Plan completion widget ───────────────────────────────────────────── */
.completion-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.completion-table th { padding: 0.3rem 0.5rem; text-align: left; }
.completion-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--accent-faded); vertical-align: middle; white-space: nowrap; }
.completion-table th:nth-child(2), .completion-table td:nth-child(2) { width: 8rem; }
.completion-table th:nth-child(3), .completion-table td:nth-child(3) { width: 11rem; }
.completion-row-group td:first-child { font-weight: 600; }
.completion-row-child { display: none; }
.completion-row-child.expanded { display: table-row; }
.completion-row-child td:first-child { padding-left: 1.75rem; color: var(--accent); font-weight: 400; }
.completion-toggle {
  background: none; border: none; cursor: pointer; color: var(--accent); padding: 0 0.4rem 0 0;
  width: 1rem; display: inline-flex; align-items: center; justify-content: center;
}
.completion-toggle i { transition: transform 0.15s ease; }
.completion-row-group.expanded .completion-toggle i { transform: rotate(90deg); }
.completion-toggle-spacer { display: inline-block; width: 1.4rem; }
.completion-badge {
  display: inline-block; padding: 0.05rem 0.5rem; border-radius: 1rem; font-size: 0.68rem; font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.completion-badge-complete { background: #e3f7e3; color: #0a0; }
.completion-badge-in_progress { background: #fff3e0; color: #BD4B00; }
.completion-badge-not_started { background: var(--accent-faded); color: var(--accent); }
.completion-bar-track {
  background: var(--accent-faded); border-radius: 1rem; height: 0.45rem; width: 6rem; overflow: hidden;
  display: inline-block; vertical-align: middle;
}
.completion-bar-fill { height: 100%; border-radius: 1rem; display: block; }
.completion-bar-fill-complete { background: #0a0; }
.completion-bar-fill-in_progress { background: #BD4B00; }
.completion-bar-fill-not_started { background: var(--accent); }
.completion-pct-value { display: inline-block; width: 2.5rem; text-align: right; margin-left: 0.5rem; color: var(--accent); }

/* ── Group View breakdown tooltip (hover a BU-group bar/slice) ───────────── */
.chart-custom-tooltip {
  position: absolute;
  z-index: 4;
  background: #fff;
  border-radius: var(--size-5);
  box-shadow: var(--shadow);
  border: var(--size-1) solid var(--accent-faded);
  padding: var(--size-5) var(--size-6);
  font-size: 0.85rem;
  min-width: 12rem;
  pointer-events: auto;
  transform: translate(-50%, -100%);
  margin-top: -0.6rem;
}
.chart-tooltip-title { font-weight: 700; margin-bottom: var(--size-4); color: var(--dark); }
.chart-tooltip-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; white-space: nowrap; }
.chart-tooltip-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; }
.chart-tooltip-value { margin-left: auto; font-weight: 600; padding-left: 1rem; }
.chart-tooltip-filter-btn { margin: var(--size-5) 0 0 0; padding: var(--size-4) var(--size-6); font-size: 0.78rem; width: 100%; }

/* ── Horizontal tabs (per CSS.md #12, widths adapted to real label lengths
   instead of the spec's fixed 25rem/tab -- that width assumes 2 wide tabs,
   not the 4+ short ones a settings-style page like Master Data needs) ──── */
.horizontal-tabs-bar {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  border-bottom: 0.15rem solid var(--accent-faded);
  margin-bottom: var(--size-7);
}
.horizontal-tab-button {
  background-color: #ddd;
  border: none;
  border-radius: 10px 10px 0 0;
  padding: var(--size-5) var(--size-7);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  white-space: nowrap;
}
.horizontal-tab-button.active {
  background-color: #FFFFFF;
  color: var(--primary);
  box-shadow: var(--shadow);
  z-index: 4;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* CRM pipeline rollup: business unit x stage, expected value per cell.
   The matrix is the entry point to the deals list, so a cell has to read as
   clickable and a drilled-in cell has to stay visible once the page reloads
   under it. */
.pipe-matrix td.num, .pipe-matrix th.num { text-align: right; white-space: nowrap; }
.pipe-matrix .pipe-cell { text-align: right; white-space: nowrap; padding: 0.25rem 0.5rem; }
.pipe-matrix .pipe-cell a { text-decoration: none; display: block; }
.pipe-matrix .pipe-cell a:hover { text-decoration: underline; }
.pipe-matrix .pipe-val { display: block; }
.pipe-matrix .pipe-cnt { display: block; font-size: 0.72rem; color: var(--accent); }
.pipe-matrix .pipe-empty { color: var(--accent); text-align: right; }
/* Won is the committed column -- it is the one people look for first. */
.pipe-matrix th.pipe-won-col { border-left: 2px solid var(--light, #ddd); }
.pipe-matrix .pipe-drilled { outline: 2px solid var(--primary, #06c); outline-offset: -2px; }
.pipe-matrix .pipe-row-drilled td { background: var(--lightest, #f6f8fa); }
/* Separator label between quick-select chip groups. */
.bulk-quick .pipe-sep { font-size: 0.72rem; color: var(--accent); text-transform: uppercase;
                        letter-spacing: 0.04em; margin-left: 0.4rem; }

/* Transient confirmation for actions that no longer reload the page.
   A save that redirected used to prove itself by the banner on the page that
   came back; without the reload there is nothing to say it landed, and silence
   reads as a dead button. Errors sit five times longer than confirmations and
   are also written into the row, because a message that fades is no way to
   report a failure. */
#deal-toast {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: min(40rem, 90vw);
  padding: 0.6rem 1.1rem;
  border-radius: 0.3rem;
  background: var(--primary, #1f2d3d);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
#deal-toast.deal-toast-error { background: #a00; }

/* Why a P&L Plan form did not save, shown on the form itself. Previously a
   refused save, an unreachable server and a post-save script error were all
   either an alert() with no indication of which form it meant, or a silent
   page reload that threw the reason away. */
.plan-form-error {
  display: none;
  flex-basis: 100%;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid #c00;
  background: rgba(204, 0, 0, 0.06);
  color: #a00;
  font-size: 0.82rem;
}

/* ── Typeahead single-select ────────────────────────────────────────────────
   One field that searches more than one kind of thing at once and resolves to
   exactly one of them. The multi-select above holds several values so it shows
   chips; this holds one, so the chosen label sits in the field itself with a
   tag saying which kind it is.
   Built because the first version of the revenue linking UI used a native
   <datalist>, which cannot be styled at all -- it ignores the design system
   and renders as the browser's own grey list, which is what made that row look
   unlike the rest of the app. */
.typeahead-select { position: relative; display: inline-block; vertical-align: top; }
.ts-input { width: 100%; }
/* The dropdown deliberately shares .tas-dropdown's geometry so the two widgets
   read as one control in two forms. */
.ts-dropdown {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  max-height: 15rem; overflow-y: auto; background: #fff;
  border: var(--size-1) solid var(--accent-faded); border-radius: var(--size-4);
  box-shadow: var(--shadow); margin-top: var(--size-2);
}
.ts-option {
  display: flex; align-items: baseline; gap: var(--size-4);
  padding: var(--size-4) var(--size-5); font-size: 0.85rem; cursor: pointer;
}
.ts-option:hover, .ts-option.is-active { background: var(--primary-faded); }
.ts-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-option-hint { color: var(--accent); font-size: 0.75rem; white-space: nowrap; }
.ts-empty { padding: var(--size-5); font-size: 0.8rem; color: var(--accent); }
/* Which kind of thing an option is -- a project or a CRM opportunity. Also
   shown next to the field once something is chosen, so the row says what it
   was linked to without opening the list again. */
.ts-kind {
  flex: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 0 var(--size-4); border-radius: var(--size-6);
  background: var(--accent-faded); color: var(--accent);
}
.ts-kind.is-project { background: var(--primary-faded); color: var(--primary-darker); }
.ts-kind.is-deal { background: #fdeee4; color: var(--secondary); }
.ts-chosen { display: inline-flex; align-items: center; gap: var(--size-3); margin-left: var(--size-3); }
.ts-clear {
  border: none; background: none; cursor: pointer; color: var(--accent);
  font-size: 0.95rem; line-height: 1; padding: 0 var(--size-3);
}
.ts-clear:hover { color: var(--secondary); }

/* The total row under a GL category listing. Sits above the stat card that
   repeats the same figure, so it has to agree with it: N/A accounts are
   excluded from both. */
tr.gl-section-total > td {
  border-top: 2px solid var(--light, #ddd);
  background: var(--lightest, #fafafa);
}

/* Revenue list: client grouping and the running totals.
   Three weights so the eye can tell them apart at a glance -- a client header
   opens a block, a subtotal closes one, and the grand total closes the table.
   Same tokens as tr.gl-section-total above, so the P&L and the revenue screen
   read the same way. */
tr.rev-client-group > td {
  border-top: 2px solid var(--light, #ddd);
  background: var(--lightest, #fafafa);
  padding-top: 0.6rem;
}
tr.rev-client-subtotal > td {
  border-top: 1px solid var(--light, #ddd);
  font-weight: 600;
}
tr.rev-grand-total > td {
  border-top: 2px solid var(--accent, #888);
  background: var(--lightest, #fafafa);
  font-weight: 700;
}

/* A grouped revenue list opens collapsed: the group line carries the totals and
   its detail rows are hidden until it is clicked. */
tr.rev-grp-toggle { cursor: pointer; }
tr.rev-grp-toggle:hover > td { background: var(--light, #eee); }
.rev-grp-caret {
  width: 0.9rem;
  margin-right: 0.35rem;
  color: var(--accent, #888);
}

/* Revenue list, second drill level and the editable prior-year cells. */
tr.rev-l2-group > td { background: var(--lightest, #fcfcfc); }
tr.rev-l2-toggle { cursor: pointer; }
tr.rev-l2-toggle:hover > td { background: var(--light, #eee); }
.rev-l2-caret { width: 0.9rem; margin-right: 0.35rem; color: var(--accent, #888); }
.rev-actuals-cell { cursor: text; }
.rev-actuals-cell:hover { outline: 1px dashed var(--accent, #888); }
.rev-note-cell { min-width: 12rem; max-width: 22rem; }