/* --google-border-strong is ALSO empty on this page (verified live) -- the
 * pre-existing "Print report" / "Reset filters" buttons render with no
 * border at all. Fixed alongside the other two empty-token bugs below. */
.gc-report-head-actions button,
.gc-report-reset {
  border-color: var(--google-border, #ddd) !important;
}

/* Additions for the 2026-09-19 Detailed Performance Report revamp. Kept
 * separate from trygc-google-ui.css (which styles gc-report-* across other
 * pages too) so this only ever touches the new pieces: the health badge, the
 * date-window chips, KPI icons, the owner-workload row (CSS for the row
 * itself already existed and was unused -- only the flag/empty state here
 * are new), the risk pill, and ledger row tinting. */

.gc-report-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.gc-report-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.gc-report-health i {
  font-style: normal;
  font-size: 10px;
}

.gc-report-health.is-good {
  color: var(--google-success);
  background: color-mix(in srgb, var(--google-success) 14%, transparent);
}

.gc-report-health.is-watch {
  color: var(--google-warning);
  background: color-mix(in srgb, var(--google-warning) 14%, transparent);
}

.gc-report-health.is-risk {
  color: var(--google-danger);
  background: color-mix(in srgb, var(--google-danger) 14%, transparent);
}

/* Date-window quick chips, replacing a bare <select> for the four choices
 * people actually pick. */
.gc-report-window {
  display: grid;
  align-content: start;
  gap: 5px;
}

.gc-report-window > span {
  color: var(--google-muted-foreground);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gc-report-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.gc-report-chips button {
  min-width: 0;
  min-height: 20px;
  padding: 4px 2px;
  overflow: hidden;
  color: var(--google-muted-foreground);
  background: var(--google-background);
  border: 1px solid var(--google-input);
  border-radius: var(--google-radius);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.gc-report-chips button.is-active {
  /* --google-primary-solid resolves empty on this page (verified live) --
   * using it renders invisible white-on-transparent. --gcui-primary is the
   * token that actually carries the brand orange everywhere else on the
   * page, so it is what every new rule here uses instead. */
  color: #fff;
  background: var(--gcui-primary, #E8630C);
  border-color: var(--gcui-primary, #E8630C);
}

/* The report's own "Export filtered CSV" button has the same empty-token
 * bug -- it has rendered as invisible white-on-white since this file was
 * first written, not something introduced today. Fixed here since this
 * surface is being revamped anyway. */
.gc-report-head-actions button:first-child {
  color: #fff !important;
  background: var(--gcui-primary, #E8630C) !important;
  border-color: var(--gcui-primary, #E8630C) !important;
}

/* KPI icon, leading the label instead of a bare colored top border being the
 * only signal of what a tile means. */
.gc-report-kpi-head {
  display: flex !important;
  align-items: center;
  gap: 5px;
}

.gc-report-kpi-head i {
  font-style: normal;
  font-size: 10px;
}

.gc-report-kpi.is-good .gc-report-kpi-head i { color: var(--google-success); }
.gc-report-kpi.is-watch .gc-report-kpi-head i { color: var(--google-warning); }
.gc-report-kpi.is-risk .gc-report-kpi-head i { color: var(--google-danger); }
.gc-report-kpi.is-info .gc-report-kpi-head i { color: var(--google-chart-1); }
/* Same empty-token bug on the pre-existing "Confirmation rate" tile border. */
.gc-report-kpi.is-info { border-top-color: var(--google-chart-1) !important; }

/* The funnel row's own drop label, tinted when it is actually losing people
 * rather than reading identically to "Baseline". */
.gc-report-funnel-meta span.is-drop {
  color: var(--google-danger);
  font-weight: 700;
}

.gc-report-funnel-card {
  margin: 0 24px 12px;
}

.gc-report-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.gc-report-section-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* Owner workload: the row layout already existed in the shared sheet; this
 * is only the "overdue" flag and the empty state, both new. */
.gc-report-owner-flag {
  color: var(--google-danger);
  font-style: normal;
  font-weight: 700;
}

.gc-report-empty-inline {
  margin: 0;
  padding: 12px 0;
  color: var(--google-muted-foreground);
  font-size: 12px;
}

/* Scope facts card -- a small fact list, reusing the existing dl look the
 * app already uses elsewhere rather than inventing another pattern. */
.gc-report-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.gc-report-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--google-border);
}

.gc-report-facts > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.gc-report-facts dt {
  color: var(--google-muted-foreground);
  font-size: 11px;
  font-weight: 600;
}

.gc-report-facts dd {
  margin: 0;
  color: var(--google-foreground);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.gc-report-facts dd.is-risk {
  color: var(--google-danger);
}

/* Ledger: a collapse toggle (the table can run past a hundred rows) and
 * per-row tinting so an overdue or breached task doesn't read the same as
 * one that's fine. */
.gc-report-ledger-toggle {
  min-height: 34px;
  padding: 0 12px;
  color: var(--google-primary);
  background: color-mix(in srgb, var(--google-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--google-primary) 30%, var(--google-border));
  border-radius: var(--google-radius);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.gc-report-table-wrap tr.is-overdue-row {
  background: color-mix(in srgb, var(--google-warning) 6%, transparent);
}

.gc-report-table-wrap tr.is-breached-row {
  background: color-mix(in srgb, var(--google-danger) 7%, transparent);
}

.gc-report-risk {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.gc-report-risk.is-good {
  color: var(--google-success);
  background: color-mix(in srgb, var(--google-success) 12%, transparent);
}

.gc-report-risk.is-watch {
  color: var(--google-warning);
  background: color-mix(in srgb, var(--google-warning) 14%, transparent);
}

.gc-report-risk.is-risk {
  color: var(--google-danger);
  background: color-mix(in srgb, var(--google-danger) 14%, transparent);
}

.gc-report-risk.is-neutral {
  color: var(--google-muted-foreground);
  background: var(--google-muted);
}

@media (max-width: 900px) {
  .gc-report-grid { grid-template-columns: 1fr !important; }
  .gc-report-title-row { align-items: flex-start; }
  .gc-report-chips { flex-wrap: wrap; }
  .gc-report-chips button { flex: 1 1 70px; }
}