/* ─────────────────────────────────────────────────────────────
   ReportByEmployeesByDay (V2, SIMPLE variant) — `re-` prefix.
   Used by `gmc_code` and `vektor_code` companies (per NavMenuBase
   routing). Sits on top of the shared `r-*` design system
   (reports-shared.css). Mirrors mock/ReportByEmployeesByDay.html.
   ───────────────────────────────────────────────────────────── */

/* Sticky left employee column */
.re-emp-th { left: 0; padding: 10px 12px; min-width: 280px; width: 280px; max-width: 280px; }
.re-emp-th__inner { display: flex; align-items: center; gap: 8px; }
.re-emp-th__label { font: 700 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; }
.re-emp-td { left: 0; padding: 8px 12px; min-width: 280px; width: 280px; max-width: 280px; }
.re-emp-td__inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.re-emp-td__idx { width: 22px; height: 22px; border-radius: 6px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); color: var(--is-fg-3); display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--is-font-mono); flex: none; font-variant-numeric: tabular-nums; }
.re-emp-td__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.re-emp-td__name { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-emp-td__meta { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-emp-td__meta-sep { width: 2px; height: 2px; border-radius: 999px; background: var(--is-border-2); flex: none; }
.re-emp-td__meta-role { color: var(--is-fg-2); font-weight: 600; }
.re-emp-td__meta-office i { font-size: 9px; margin-right: 3px; color: var(--is-fg-3); }

/* Right-side sum columns (sticky together as a group) */
.re-mtable .re-sum-col { min-width: 56px; width: 56px; padding: 0; }
.re-mtable thead th.re-sum-col { padding: 8px 6px; vertical-align: bottom; background: var(--is-bg-surface); }
.re-mtable .re-sum-col__th-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.05; cursor: help; }
.re-sum-col__lbl-short { font: 800 12px var(--is-font-mono); color: var(--is-fg-1); }
.re-sum-col__lbl-name { font: 600 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .04em; max-width: 70px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.re-sum-col__val { text-align: center; font: 700 13px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; padding: 6px 6px; }
/* Σh / Ukupno renders HH:MM values that need right-alignment so digit columns
   line up vertically across rows. The other three (B#, X#, RD) keep center
   alignment — they show single-digit counts where centering reads better. */
.re-mtable .re-sum-col.re-sum-col--first .re-sum-col__val { text-align: right; padding-right: 10px; }
.re-sum-col__val.is-bo { color: var(--is-warning); }
.re-sum-col__val.is-no { color: var(--is-danger); }
.re-sum-col__val.is-zero { color: var(--is-fg-muted); font-weight: 500; }
.re-sum-col__val.is-clickable { cursor: pointer; }
.re-sum-col__val.is-clickable:hover { background: var(--is-bg-surface-3); }
/* The first sum column (Σh / Ukupno) is significantly wider — must fit BOTH
   per-row HH:MM values (6 chars max) AND the footer grand total which sums
   across all employees × all days and routinely runs to 7–8 chars
   (e.g. "4800:00", "12345:30"). With the previous 72px, content overflowed
   and got visually clipped on the right by the sticky B# column. At 96px
   minus 12px padding minus 1px border, the 83px content area handles up to
   ~9 characters comfortably. The other three (B#, X#, RD) stay at 56px
   since they only render small integer counts. */
.re-mtable .re-sum-col.re-sum-col--first { min-width: 96px; width: 96px; border-left: 1px solid var(--is-border-2); position: sticky; right: calc(56px * 3); z-index: 1; background: var(--is-bg-surface); }
.re-mtable thead .re-sum-col.re-sum-col--first { z-index: 5; background: var(--is-bg-surface); }
.re-mtable .re-sum-col.re-sum-col--2 { position: sticky; right: calc(56px * 2); z-index: 1; background: var(--is-bg-surface); }
.re-mtable thead .re-sum-col.re-sum-col--2 { z-index: 5; background: var(--is-bg-surface); }
.re-mtable .re-sum-col.re-sum-col--3 { position: sticky; right: 56px; z-index: 1; background: var(--is-bg-surface); }
.re-mtable thead .re-sum-col.re-sum-col--3 { z-index: 5; background: var(--is-bg-surface); }
.re-mtable .re-sum-col.re-sum-col--last { position: sticky; right: 0; z-index: 1; background: var(--is-brand-blue-100); border-left: 1px solid var(--is-border-2); }
.re-mtable thead .re-sum-col.re-sum-col--last { z-index: 5; background: var(--is-bg-surface); }
.re-mtable tbody .re-sum-col.re-sum-col--last { background: var(--is-brand-blue-100); }
.re-mtable tbody tr:hover .re-sum-col.re-sum-col--last { background: oklch(94% .05 232); }

/* Cell hours pill — uses server ColorHex via inline style; falls back to plain bg */
.re-cell { position: relative; }
.re-cell__pill { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 26px; padding: 0 7px; margin: 5px 0; border-radius: 6px; font: 600 12px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; cursor: pointer; transition: filter .12s, box-shadow .12s; border: 0; }
.re-cell__pill:hover { filter: brightness(.96); box-shadow: 0 0 0 2px var(--is-action-blue); }
/* Pill text gets a translucent white scrim so it stays readable on any HEX bg */
.re-cell__pill.has-color { background: var(--re-pill-bg, transparent); }
.re-cell__pill.has-color.is-dark { color: #fff; }
.re-cell.is-zero .re-cell__pill { color: var(--is-fg-muted); background: transparent; cursor: default; font-weight: 500; }
.re-cell.is-zero .re-cell__pill:hover { box-shadow: none; filter: none; }
/* When color coding is OFF: keep neutral pills */
.re-cell.no-color .re-cell__pill { background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); }

/* Today + weekend hints in the cell column itself */
.re-cell.is-weekend { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(122, 131, 149, .055) 6px 7px); }
.re-cell.is-today { box-shadow: inset 2px 0 0 var(--is-brand-blue); }

/* Per-office footer group — collapsible accordion */
.re-footgroup-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--is-bg-surface-3); border: 0; border-top: 1px solid var(--is-border-1); cursor: pointer; font: 700 12px var(--is-font-sans); color: var(--is-fg-2); text-transform: uppercase; letter-spacing: .05em; }
.re-footgroup-toggle:hover { background: var(--is-bg-surface-2); color: var(--is-fg-1); }
.re-footgroup-toggle i { font-size: 11px; transition: transform .15s; color: var(--is-fg-3); }
.re-footgroup-toggle.is-open i { transform: rotate(90deg); }
.re-footgroup-toggle__count { font: 700 11px var(--is-font-mono); color: var(--is-fg-3); }

.re-footgroup-rows { background: var(--is-bg-surface); border-top: 1px solid var(--is-border-1); padding: 4px 0; }
.re-footgroup-row { display: grid; align-items: center; padding: 4px 12px; font: 500 11px var(--is-font-sans); color: var(--is-fg-2); }
.re-footgroup-row__label { padding-left: 16px; }
.re-footgroup-row__label .re-office-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--is-brand-blue); margin-right: 8px; vertical-align: middle; }
.re-footgroup-row__cell { text-align: center; font: 500 11px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; }
.re-footgroup-row__total { text-align: center; font: 700 12px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; }

/* Anomaly chip on data row's right edge */
.re-emp-td__warn { color: var(--is-danger); font-size: 11px; }

/* Footer-cell typography varies by row tier (Total > Per-office > Daily workers count) */
.re-mtable tfoot td.r-stickyleft.is-tier1 { padding: 0 12px; font: 800 12px var(--is-font-sans); color: var(--is-brand-blue-700); text-transform: uppercase; letter-spacing: .05em; }
.re-mtable tfoot td.r-stickyleft.is-tier2 { padding: 0 12px; font: 700 11px var(--is-font-sans); color: var(--is-fg-1); text-transform: uppercase; letter-spacing: .04em; background: var(--is-bg-surface-3); }
.re-mtable tfoot td.is-tier2 { font: 600 11px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; }

/* "Unapproved hours" warning bar */
.re-unapproved-alert { font-size: 13px; padding: 8px 14px; background: var(--is-warning-bg); border: 1px solid #f1d784; border-left: 4px solid var(--is-warning); border-radius: var(--is-radius-md); color: #6b4d00; margin-bottom: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.re-unapproved-alert b { color: #4d3700; font-weight: 700; }
.re-unapproved-alert i.fa-solid { font-size: 14px; color: var(--is-warning); }