/* History (#/history). Page-only classes are prefixed hist-.
 * The table fits its card at any width: js/pages/history.js measures it and adds fit-1 … fit-4 to .hist-card
 * (cumulative) until nothing overflows, so less important columns fold into the Month and Total Gaji cells
 * and the row actions collapse into a menu only when they really don't fit. */

.hist { min-width: 0; }
.hist-card { min-width: 0; }

.hist-table th, .hist-table td { white-space: nowrap; }
.hist-table tbody th { font-weight: var(--fw-regular); text-align: left; }
.hist-table thead th.hist-c-actions { width: 1%; }

/* month rows */
.hist-row > * { height: 52px; }
.hist-month { display: inline-flex; align-items: center; gap: var(--space-2); }
.hist-month-name { font-weight: var(--fw-medium); color: var(--text); }
.hist-total { font-weight: var(--fw-medium); color: var(--text); }
.hist-c-calc { color: var(--text-muted); }
.hist-c-calc time { font-variant-numeric: tabular-nums; }
.hist-none { color: var(--text-subtle); }
.hist-change { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.hist-diff { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hist-actions-wide { display: inline-flex; align-items: center; gap: var(--space-1); }
.hist-actions-wide .btn-secondary { margin-right: var(--space-1); }
.hist-actions-narrow { display: none; }
.hist-row.is-clickable:hover .hist-month-name { color: var(--primary-text); }

/* details folded into the Month / Total Gaji cells (hidden until a fit level needs them) */
.hist-sub, .hist-sub > *, .hist-sub-delta, .hist-year-slips { display: none; }
.hist-sub { flex-direction: column; gap: 2px; margin-top: 2px; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-muted); }
.hist-sub time { font-variant-numeric: tabular-nums; }
.hist-sub-delta { justify-content: flex-end; margin-top: 2px; font-size: var(--fs-sm); }

/* Telegram status as a wrapping dot + text line (phone layout) */
.hist-status-line {
  display: inline-flex; align-items: baseline; gap: var(--space-1-5); white-space: normal;
  font-weight: var(--fw-medium); color: var(--neutral-text);
}
.hist-status-line::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  transform: translateY(-1px);
}
.hist-status-line.is-success { color: var(--success-text); }
.hist-status-line.is-warning { color: var(--warning-text); }
.hist-status-line.is-info { color: var(--info-text); }

/* year group rows */
.hist-year > * {
  background: var(--surface-2); border-bottom: 1px solid var(--border); height: 44px;
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.hist-year-group + .hist-year-group .hist-year > * { border-top: 1px solid var(--border); }
.table tbody tr.hist-year:hover > * { background: var(--surface-2); }
.hist-year th { font-weight: var(--fw-semibold); }
.hist-year-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.hist-year-sub { margin-left: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }
.hist-year .hist-c-count { color: var(--text-muted); }
/* the pill's padding + border hang into the cell padding, so its digits line up with the month totals */
.hist-year-total {
  display: inline-block; padding: 2px var(--space-2); margin-right: calc(-1 * (var(--space-2) + 1px));
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-soft-text);
  border: 1px solid var(--accent-border); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}

/* change vs previous month (same look as on the Dashboard; chart.js builds it). Neutral ink: the arrow, the
 * sign and the words carry the direction — a payroll rise is not a warning, and amber/green are status colours. */
.dash-delta { display: inline-flex; align-items: baseline; gap: 3px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.dash-delta-arrow { font-size: 0.8em; line-height: 1; color: var(--text-muted); }
.dash-delta.is-flat { color: var(--text-muted); }
.dash-delta-diff { margin-left: var(--space-1-5); font-weight: var(--fw-regular); color: var(--text-muted); }

/* ---- fit-1: "Calculated" moves under the month name */
.hist-card.fit-1 .hist-c-calc { display: none; }
.hist-card.fit-1 .hist-sub { display: flex; }
.hist-card.fit-1 .hist-sub-calc { display: block; }
.hist-card.fit-1 .hist-row > * { padding-top: var(--space-2); padding-bottom: var(--space-2); }

/* ---- fit-2: row actions go into a menu */
.hist-card.fit-2 .hist-actions-wide { display: none; }
.hist-card.fit-2 .hist-actions-narrow { display: inline-flex; }

/* ---- fit-3: the change moves under the Total Gaji */
.hist-card.fit-3 .hist-c-change { display: none; }
.hist-card.fit-3 .hist-sub-delta { display: flex; }
.hist-card.fit-3 .hist-row .hist-c-total { vertical-align: top; }
.hist-card.fit-3 .hist-row .hist-c-month { vertical-align: top; }

/* ---- fit-4: the Telegram status moves under the month name */
.hist-card.fit-4 .hist-c-status { display: none; }
.hist-card.fit-4 .hist-sub-status { display: block; }
.hist-card.fit-4 .hist-sub { gap: 3px; margin-top: var(--space-1); }
.hist-card.fit-4 .hist-row > * { height: auto; padding-top: var(--space-2-5); padding-bottom: var(--space-2-5); }

/* ---- fit-5: phone layout — Month (+ status, payslips) | Total Gaji (+ change) | menu */
.hist-card.fit-5 .hist-c-count { display: none; }
.hist-card.fit-5 .hist-sub-calc { display: none; }
.hist-card.fit-5 .hist-sub-count { display: block; }
.hist-card.fit-5 .hist-year-slips { display: inline; }
.hist-card.fit-5 .hist-table th, .hist-card.fit-5 .hist-table td { padding-left: var(--space-3); padding-right: var(--space-3); }
.hist-card.fit-5 .hist-row .hist-c-month { white-space: normal; }
.hist-card.fit-5 .hist-month { display: flex; flex-wrap: wrap; column-gap: var(--space-2); row-gap: 2px; }
.hist-card.fit-5 .hist-row .hist-c-actions { vertical-align: middle; padding-left: 0; }
.hist-card.fit-5 .hist-year th { white-space: normal; }
.hist-card.fit-5 .hist-year-sub { display: block; margin-left: 0; font-size: var(--fs-xs); }

/* ---- fit-6: very narrow (320px) */
.hist-card.fit-6 .hist-table th, .hist-card.fit-6 .hist-table td { padding-left: var(--space-2); padding-right: var(--space-2); }
.hist-card.fit-6 .hist-table tr > :first-child { padding-left: var(--space-3); }
.hist-card.fit-6 .hist-year-total { padding: 1px var(--space-1-5); margin-right: calc(-1 * (var(--space-1-5) + 1px)); }
.hist-card.fit-6 .hist-c-total { font-size: var(--fs-sm); }