/* ============================================================
   HOURS WORKED — the chart and summary on Shift Management.

   Self-contained on purpose. The admin portal has an equivalent chart, but
   every rule there is scoped to `body.pro` and several of its fills point at
   gradient defs that only exist in admin.html. Reaching for those from the
   user portal would mean either unscoping admin CSS or copying a <defs>
   block into index.html — both worse than thirty lines that stand alone.
============================================================ */

/* ---- Range switcher ---- */
.hw-filter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.hw-filter button {
  border: none;
  background: transparent;
  color: var(--text3);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.hw-filter button:hover { color: var(--text); }
.hw-filter button.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---- Summary numbers ---- */
.hw-totals {
  display: grid;
  /* minmax(0,…) so a four-digit total can't widen the column past the card. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.hw-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 0;
}
.hw-stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hw-stat-label { font-size: 0.76rem; color: var(--text3); margin-top: 2px; }

@media (max-width: 560px) {
  .hw-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hw-stat { padding: 10px 11px; }
  .hw-stat-num { font-size: 1.4rem; }
  .hw-stat-label { font-size: 0.68rem; }
}

/* ---- Chart ---- */
.hw-chart svg { width: 100%; height: auto; display: block; }
.hw-chart .hw-axis { fill: var(--text3); font-size: 10px; font-family: inherit; }
.hw-chart .hw-grid { stroke: var(--border); stroke-dasharray: 3 4; }
.hw-chart .hw-bar {
  fill: var(--accent);
  /* The bar grows from the baseline when the range changes, so switching
     period reads as the same data re-measured rather than a new page. */
  transition: height 0.6s cubic-bezier(0.33, 1, 0.68, 1), y 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.hw-chart .hw-bar:hover { fill: var(--accent-hover); }

.hw-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text3);
  font-size: 0.88rem;
  line-height: 1.6;
  background: var(--bg2);
  border-radius: var(--radius);
}