/* WIDGET: bod-dashboard — bars move by transform: scaleX only */
.bd-body { display: flex; flex-direction: column; gap: 18px; container-type: inline-size; }

.bd-clock {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-4);
  white-space: nowrap;
}

.bd-block-title {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-4);
  text-transform: uppercase;
}

/* Today's headline figures */
.bd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.bd-metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-1);
  background: var(--surface-3);
}

.bd-metric-lbl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--text-4);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bd-metric-val { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.bd-metric-val strong { font-size: 1.02rem; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bd-metric-unit { font-size: 0.68rem; color: var(--text-3); white-space: nowrap; }

/* Progress / team / project bar blocks */
.bd-progress, .bd-teams, .bd-projects { padding-top: 12px; border-top: 1px solid var(--line-1); }

.bd-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 68px);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 0;
}

/* Labels wrap to a second line rather than being cut off */
.bd-bar-name {
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-3);
}

.bd-bar-track {
  position: relative;
  height: 6px;
  min-width: 0;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}

.bd-bar-fill {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--v, 0));
  transition: transform var(--dur-4) var(--ease-out);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 51, 102, 0.35), var(--accent));
}

.bd-bar-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Phones: two metric columns, and each bar's name sits on its own line above
   the bar so long names ("Đối soát hoa hồng với chủ đầu tư") never wrap 4 times */
@container (max-width: 420px) {
  .bd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-bar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 56px); row-gap: 4px; padding: 4px 0; }
  .bd-bar-name { grid-column: 1 / -1; }
}