/* ─────────────────────────────────────────────────────────────
   ReportByEmployeesByDayDetails (V2, ADVANCED variant) — `red-` prefix.
   Used by every customer EXCEPT gmc_code and vektor_code. Mirrors
   mock/ReportByEmployeesByDayDetails.html. Sits on top of shared `r-*`.
   ───────────────────────────────────────────────────────────── */

/* Elmont "Plata" chip — appears next to title when Elmont + ShowWorkingDays */
.red-salary-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 9px;
    border-radius: 999px;
    background: oklch(95% .04 280);
    color: oklch(40% .12 280);
    border: 1px solid oklch(86% .07 280);
    font: 700 10px var(--is-font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.red-salary-chip i { font-size: 9px; }

/* Toolbar mode badges */
.red-toolbar-badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 8px;
    border-radius: 999px;
    font: 700 10.5px var(--is-font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: 6px;
}
.red-toolbar-badge--dn {
    background: var(--is-info-bg);
    color: var(--is-info);
    border: 1px solid rgba(13, 143, 217, .25);
}
.red-toolbar-badge--elmont {
    background: oklch(95% .04 280);
    color: oklch(40% .12 280);
    border: 1px solid oklch(86% .07 280);
}

/* Sticky left employee column */
.red-emp-th { left: 0; padding: 10px 12px; min-width: 240px; width: 240px; max-width: 240px; }
.red-emp-th__label { font: 700 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; }
.red-emp-td { left: 0; padding: 8px 12px; min-width: 240px; width: 240px; max-width: 240px; }
.red-emp-td__inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.red-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;
}
.red-emp-td__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.red-emp-td__name {
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
.red-emp-td__warn { color: var(--is-danger); font-size: 11px; cursor: help; }

/* Section header (top row, with colspan) */
.red-section-th {
    padding: 8px 6px;
    text-align: center;
    font: 700 11px var(--is-font-sans);
    color: var(--is-fg-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--is-bg-surface);
    border-bottom: 1px solid var(--is-border-1);
}
.red-section-th--target {
    background: oklch(96% .03 232);
    color: var(--is-brand-blue-700);
}
.red-section-th--rd {
    background: var(--is-bg-surface-3);
}

/* Sub-header row */
.red-sub-th {
    padding: 6px 4px;
    text-align: center;
    font: 600 9.5px var(--is-font-sans);
    color: var(--is-fg-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--is-bg-surface);
    min-width: 52px;
}
.red-sub-th--elmont {
    background: oklch(95% .04 280);
    color: oklch(40% .12 280);
}
.red-factor-chip {
    display: inline-block;
    padding: 1px 5px;
    background: oklch(90% .05 280);
    color: oklch(40% .12 280);
    border-radius: 4px;
    font: 700 9px var(--is-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Σh stable column on the right.
   Wide enough for footer grand totals (7–8 chars like "12345:30"). The
   sub-cols (per-type, Cilj, RD) use .red-sub-td which sizes independently. */
.red-mtable .red-sum-col {
    min-width: 96px; width: 96px;
    padding: 0;
}
.red-mtable thead th.red-sum-col {
    padding: 8px 6px;
    vertical-align: bottom;
    background: var(--is-bg-surface);
}
.red-sum-col__th-inner {
    display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.05;
}
.red-sum-col__lbl-short {
    font: 800 12px var(--is-font-mono);
    color: var(--is-fg-1);
}
.red-sum-col__lbl-name {
    font: 600 9.5px var(--is-font-sans);
    color: var(--is-fg-3);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.red-sum-col__val {
    /* HH:MM values right-align so digit columns line up across rows. */
    text-align: right;
    font: 700 13px var(--is-font-mono);
    color: var(--is-fg-1);
    font-variant-numeric: tabular-nums;
    padding: 6px 10px 6px 6px;
}
.red-mtable .red-sum-col.red-sum-col--first {
    border-left: 1px solid var(--is-border-2);
}

/* Sub-cells (per-type, Cilj, RD) */
.red-mtable tbody .red-sub-td {
    text-align: center;
    min-width: 52px;
    padding: 6px 4px;
    font: 700 12px var(--is-font-mono);
    color: var(--is-fg-1);
    font-variant-numeric: tabular-nums;
}
.red-mtable tbody .red-sub-td--elmont {
    background: oklch(96% .03 280) !important;
    color: oklch(40% .12 280);
    font-weight: 700;
}
.red-sub-td--diff-neg { color: var(--is-danger); }
.red-sub-td--diff-pos { color: var(--is-success); }

/* Cell warning glyph (multi-type) */
.red-cell { position: relative; }
.red-cell__warn {
    position: absolute;
    top: 2px; left: 4px;
    font-size: 9px;
    color: var(--is-danger);
    z-index: 2;
}

/* Day vs Night split cell */
.red-dn-cell {
    text-align: center;
    min-width: 52px;
    padding: 0;
    position: relative;
}
.red-dn-cell__inner {
    display: flex; flex-direction: column; align-items: center; padding: 4px 0; gap: 1px;
}
.red-dn-cell__day-val {
    font: 600 11px var(--is-font-mono);
    color: var(--is-fg-1);
    font-variant-numeric: tabular-nums;
}

/* Footer label */
.red-foot__label {
    padding: 0 12px;
    font: 800 12px var(--is-font-sans);
    color: var(--is-brand-blue-700);
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--is-brand-blue-100);
    border-top: 2px solid var(--is-brand-blue);
    height: 42px;
}

/* Table wrap — allow horizontal scroll for the dynamic right side */
.red-tablewrap { max-height: 72vh; overflow: auto; position: relative; background: var(--is-bg-surface); }
.red-mtable { border-collapse: separate; border-spacing: 0; min-width: 100%; }

/* Number input wrapper used by Cilj sati */
.r-num input[type=number] {
    -moz-appearance: textfield;
    width: 50px;
    border: 0; outline: 0;
    font: 700 14px var(--is-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--is-fg-1);
    text-align: right;
    background: transparent;
}
.r-num input[type=number]::-webkit-outer-spin-button,
.r-num input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}