/* CompanyStatsPopup
   ----------------------------------------------------------------
   Company-wide revenue dashboard. Four stacked sections (days, weeks,
   months, years) each rendering paired bars per bucket: revenue plus
   a user-selectable secondary metric (internal revenue, invoices
   paid, …) chosen from the toolbar. */


/* ---- Overlay & panel ---- */

.companyStatsPopup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
}
.companyStatsPopup .background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.45;
}
.companyStatsPopup .content{
	position: relative;
	width: 1100px;
	max-width: calc(100vw - 80px);
	max-height: calc(100vh - 80px);
	margin: 40px auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}


/* ---- Top bar ---- */

.companyStatsPopup .topBar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 26px;
	border-bottom: 1px solid #eaeaea;
	flex: 0 0 auto;
}
.companyStatsPopup .topBar .title{
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.2px;
}
.companyStatsPopup .topBar .closeBtn{
	cursor: pointer;
	color: #888;
	font-size: 18px;
	padding: 4px 8px;
	border-radius: 4px;
}
.companyStatsPopup .topBar .closeBtn:hover{
	color: #222;
	background: #f3f3f3;
}


/* ---- Tabs ---- */
/* Strip below the topBar. Each tab is a clickable label with an active
   underline in the brand blue; the matching tabPanel is shown via .active. */

.companyStatsPopup .tabsBar{
	display: flex;
	gap: 4px;
	padding: 0 26px;
	border-bottom: 1px solid #eaeaea;
	background: #fff;
	flex: 0 0 auto;
}
.companyStatsPopup .tabsBar .tab{
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #888;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;		/* sit on top of the strip's border */
	transition: color 100ms ease;
}
.companyStatsPopup .tabsBar .tab:hover{
	color: #444;
}
.companyStatsPopup .tabsBar .tab.active{
	color: #2f80ed;
	border-bottom-color: #2f80ed;
}

.companyStatsPopup .tabPanels{
	flex: 1 1 auto;
	display: flex;
	min-height: 0;			/* let the inner panel scroll */
}
.companyStatsPopup .tabPanel{
	flex: 1 1 auto;
	display: none;
	flex-direction: column;
	min-height: 0;
}
.companyStatsPopup .tabPanel.active{
	display: flex;
}
.companyStatsPopup .tabPanel .placeholder{
	margin: auto;
	padding: 60px 20px;
	color: #999;
	font-size: 14px;
}


/* ---- Toolbar ---- */

.companyStatsPopup .toolbar{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 26px;
	border-bottom: 1px solid #eaeaea;
	background: #fafafa;
	flex: 0 0 auto;
}
.companyStatsPopup .toolbar .control{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #555;
}
.companyStatsPopup .toolbar .controlLabel{
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 600;
	color: #888;
}
.companyStatsPopup .toolbar select{
	font-size: 13px;
	padding: 4px 8px;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	background: #fff;
	color: #222;
	cursor: pointer;
}
.companyStatsPopup .toolbar select:focus{
	outline: none;
	border-color: #2f80ed;
}

/* Segmented toggle (Count / $) used by the Pipeline tab toolbar. */
.companyStatsPopup .toggle{
	display: inline-flex;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	overflow: hidden;
}
.companyStatsPopup .toggle .toggleBtn{
	background: #fff;
	border: 0;
	padding: 4px 12px;
	font-size: 12px;
	color: #444;
	cursor: pointer;
	min-width: 36px;
}
.companyStatsPopup .toggle .toggleBtn + .toggleBtn{
	border-left: 1px solid #d6d6d6;
}
.companyStatsPopup .toggle .toggleBtn:hover{
	background: #f5f5f5;
}
.companyStatsPopup .toggle .toggleBtn.active,
.companyStatsPopup .toggle .toggleBtn.active:hover{
	background: #2f80ed;
	color: #fff;
}


/* ---- Sections ---- */

.companyStatsPopup .sections{
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px 26px 26px;
	position: relative;		/* positioning context for the hover tooltip */
}
.companyStatsPopup .metricsSection{
	margin-top: 22px;
}
.companyStatsPopup .metricsSection header{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
	gap: 16px;
	flex-wrap: wrap;
}
.companyStatsPopup .metricsSection .sectionTitle{
	font-size: 14px;
	font-weight: 600;
	color: #222;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.companyStatsPopup .metricsSection .totals{
	display: flex;
	gap: 14px;
	font-size: 13px;
}
.companyStatsPopup .metricsSection .totalChip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #222;
	font-weight: 600;
}
.companyStatsPopup .metricsSection .totalChip em{
	font-style: normal;
	font-weight: 400;
	color: #888;
	margin-left: 4px;
}
.companyStatsPopup .metricsSection .totalChip .swatch{
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
}
/* See "Color palette" below for the swatch colors — same color classes
   that style the chart bars also style the chip swatches. */


/* ---- Chart (paired bars per bucket) ---- */

.companyStatsPopup .chart{
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 180px;
	padding: 6px 4px 0;
	border-bottom: 1px solid #ececec;
	position: relative;
}
.companyStatsPopup .chart .loading,
.companyStatsPopup .chart .empty{
	color: #999;
	font-size: 13px;
	margin: auto;
}

.companyStatsPopup .barPair{
	flex: 1 1 0;
	min-width: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	cursor: default;
}
.companyStatsPopup .barPair .bars{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: calc(100% - 18px);		/* leave room for the axis label */
}
.companyStatsPopup .barPair .bar{
	flex: 1 1 0;
	max-width: 14px;
	min-height: 1px;
	border-radius: 2px 2px 0 0;
	transition: opacity 120ms ease-in-out;
}
.companyStatsPopup .barPair:hover .bar{
	opacity: 0.75;
}
.companyStatsPopup .barPair .barLabel{
	font-size: 10px;
	color: #888;
	margin-top: 4px;
	height: 14px;
	line-height: 14px;
	white-space: nowrap;
}


/* Days view has 30 buckets — labels get cramped, and we stack a weekday letter
   under the day number so the weekly cadence is scannable. */
.companyStatsPopup .daysSection .barPair .bars{
	height: calc(100% - 32px);		/* extra room for the two-line label */
}
.companyStatsPopup .daysSection .barPair .barLabel{
	height: 28px;
	line-height: 13px;
	font-size: 10px;
	text-align: center;
}
.companyStatsPopup .daysSection .barPair .barLabel .dayNum{
	display: block;
	color: #555;
	font-weight: 500;
}
.companyStatsPopup .daysSection .barPair .barLabel .weekday{
	display: block;
	color: #b0b0b0;
	font-size: 9px;
	text-transform: uppercase;
}

/* Full-height vertical line between Sunday and Monday in the days chart,
   so each week reads as its own visual chunk. Same treatment for the months
   chart, where the divider falls before each January to chunk by year. */
.companyStatsPopup .daysSection .weekDivider,
.companyStatsPopup .monthsSection .yearDivider{
	flex: 0 0 1px;
	align-self: stretch;
	background: #d8d8d8;
	pointer-events: none;
	margin: 0 3px;			/* breathing room so bars don't kiss the line */
}


/* ---- Hover tooltip ---- */
/* Single shared element, positioned by JS relative to .sections (the
   scroll-content positioning context). pointer-events:none so hovering the
   tooltip itself never re-fires bar mouseenter/leave. */

.companyStatsPopup .barTooltip{
	position: absolute;
	z-index: 2;
	min-width: 200px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.10);
	font-size: 12px;
	color: #222;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 80ms ease;
}
.companyStatsPopup .barTooltip.show{
	opacity: 1;
	visibility: visible;
}
.companyStatsPopup .barTooltip .tipHeader{
	font-weight: 600;
	font-size: 12px;
	color: #222;
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid #f0f0f0;
}
.companyStatsPopup .barTooltip .tipRow{
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.7;
}
.companyStatsPopup .barTooltip .tipRow .swatch{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: 0 0 8px;
}
/* Tooltip swatches use the shared color classes — see palette below. */
.companyStatsPopup .barTooltip .tipRow .tipLabel{
	color: #666;
	flex: 1 1 auto;
}
.companyStatsPopup .barTooltip .tipRow .tipValue{
	color: #222;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.companyStatsPopup .barTooltip .tipRow.tipHours{
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid #f0f0f0;
}


/* ---- Color palette ---- */
/* Single source of truth for the colors used in the chart. Each rule
   styles both .bar (chart bars) and .swatch (totals chip + tooltip
   row dots), so flipping a metric/status uses one consistent color
   in all three places. Names mirror the palette in style.css where
   possible (--rfqColor, --paidColor, etc) so the dashboard tracks
   the rest of Trackr's status visuals.

   "Lead" and "Approved" use diagonal-stripe fills (matching the
   striped Lead ribbon in trackrTasks.css and the originally-intended
   Approved stripe pattern from trackrProjects.css). The bars get a
   slightly larger stripe period than the swatches, since 8px swatches
   can only fit one or two cycles. */

.companyStatsPopup .bar.colorRevenue,
.companyStatsPopup .swatch.colorRevenue    { background: #2f80ed; }

.companyStatsPopup .bar.colorInternal,
.companyStatsPopup .swatch.colorInternal   { background: #f2c94c; }

.companyStatsPopup .bar.colorPaid,
.companyStatsPopup .swatch.colorPaid       { background: var(--paidColor); }

.companyStatsPopup .bar.colorRfq,
.companyStatsPopup .swatch.colorRfq        { background: var(--rfqColor); }

.companyStatsPopup .bar.colorQuoted,
.companyStatsPopup .swatch.colorQuoted     { background: var(--quotedColor); }

.companyStatsPopup .bar.colorInProgress,
.companyStatsPopup .swatch.colorInProgress { background: var(--inProgressColor); }

.companyStatsPopup .bar.colorPaused,
.companyStatsPopup .swatch.colorPaused     { background: #9c9c9c; }	/* --pausedColor is empty in style.css */

.companyStatsPopup .bar.colorComplete,
.companyStatsPopup .swatch.colorComplete   { background: var(--completeColor); }

.companyStatsPopup .bar.colorDeclined,
.companyStatsPopup .swatch.colorDeclined   { background: var(--declinedColor); }

/* Striped fills — separate rules per element so each gets a stripe
   period that reads at its size. */
.companyStatsPopup .bar.colorLead       { background: repeating-linear-gradient(45deg, #d6d6d6 0 2px, #e6e6e6 2px 5px); }
.companyStatsPopup .swatch.colorLead    { background: repeating-linear-gradient(45deg, #d6d6d6 0 1px, #e6e6e6 1px 3px); }

.companyStatsPopup .bar.colorApproved   { background: repeating-linear-gradient(45deg, #fdd690 0 2px, #f9b334 2px 5px); }
.companyStatsPopup .swatch.colorApproved{ background: repeating-linear-gradient(45deg, #fdd690 0 1px, #f9b334 1px 3px); }