/* Timesheet Express | css/employee-stats.css | v1 | 2026-09-02 | BB
 * The employee summary row of the multi-employee table: the collapsible employee
 * header and the stat tiles (Straight / Regular / breaks / time off / OT / Paid Hrs /
 * Miles / day tiles / lunch billing / Billable). Moved VERBATIM out of layout.css so
 * PP_Upload_Harness can import exactly these rules with js/employee-stats.js and
 * render the same row. Linked right after layout.css — same cascade position.
 * Uses the tokens from css/variables.css (--radius-md, --text-muted, --text-dark,
 * --primary-red). */

/* Employee section collapse toggle (multi-employee view) */
/* v13 | 2026-02-01 | BB - LEFT JUSTIFIED employee names, no black bar */
.employee-section-header {
    cursor: pointer;
}
.employee-section-header td {
    background: transparent !important;
    padding: 12px 0 4px 0 !important;
    text-align: left !important;
}
/* v24 | 2026-02-01 | BB - Removed CSS transform, using direct character changes instead */
.employee-section-header .employee-toggle {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.employee-section-header .employee-section-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-dark);
}
.employee-section-header:hover .employee-section-name {
    color: var(--primary-red);
}

.employee-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Employee stat stack - groups tile + $ half-tile */
.emp-stat-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: flex-start;
}

/*─────────────────────────────────────────────────────────────────────────────
 * SINGLE TILES (Straight, Regular, Overtime, Mileage main)
 *─────────────────────────────────────────────────────────────────────────────*/
.emp-stat-tile {
    border-radius: var(--radius-md);
    padding: 7px 10px;
    min-width: 60px;
    text-align: center;
    border: none;
}
.emp-stat-tile .emp-stat-value {
    display: block;
    font-size: 19px;
    font-weight: 400;
    color: #333;
}
.emp-stat-tile .emp-stat-label {
    display: block;
    font-size: 8px;
    color: #333;
    font-weight: 400;
}

/* Single tile colors */
.emp-stat-tile.straight { background: #C9A86C; }
.emp-stat-tile.regular { background: #9CB89F; }
.emp-stat-tile.overtime { background: #C9908F; }
.emp-stat-tile.mileage { background: #E8E854; }

/* Bordered tiles (60% of 3px border = 2px, reduced padding to compensate) */
.emp-stat-tile.paidhours {
    background: #8F8F8F;
    border: 2px solid #EF4444;
    padding: 5px 8px;
    color: #000;
}
.emp-stat-tile.paidhours .emp-stat-value,
.emp-stat-tile.paidhours .emp-stat-label {
    color: #000;
}
.emp-stat-tile.billable {
    background: #60A5FA;
    border: 2px solid #EF4444;
    padding: 5px 8px;
}

/*─────────────────────────────────────────────────────────────────────────────
 * $ COMPANION TILES (below Paid Hours, Mileage, Billable)
 *─────────────────────────────────────────────────────────────────────────────*/
.emp-stat-tile.emp-paid-dollars,
.emp-stat-tile.emp-mileage-dollars,
.emp-stat-tile.emp-billable-dollars {
    padding: 2px 10px 4px 10px;
    min-height: auto;
    border-radius: var(--radius-md);
    border: none;
}
.emp-stat-tile.emp-paid-dollars { background: #8F8F8F; }
.emp-stat-tile.emp-mileage-dollars { background: #E8E854; }
.emp-stat-tile.emp-billable-dollars { background: #60A5FA; }

.emp-stat-tile.emp-paid-dollars .emp-stat-value,
.emp-stat-tile.emp-mileage-dollars .emp-stat-value,
.emp-stat-tile.emp-billable-dollars .emp-stat-value {
    font-size: 10px;
    font-weight: 600;
}
.emp-stat-tile.emp-paid-dollars .emp-stat-value {
    color: #000;
    text-align: center;
}

/*─────────────────────────────────────────────────────────────────────────────
 * SPLIT TILES (Timeoff: Vac/Sick, Breaks: Paid/Unpaid, Lunch Billing)
 *─────────────────────────────────────────────────────────────────────────────*/
.emp-stat-tile.timeoff-split,
.emp-stat-tile.breaks-split,
.emp-stat-tile.lunch-billing-split {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-width: 54px;
    overflow: hidden;
    border: none;
}

.emp-stat-tile .split-top,
.emp-stat-tile .split-bottom {
    padding: 5px 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.emp-stat-tile .split-top .emp-stat-value,
.emp-stat-tile .split-bottom .emp-stat-value {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-align: right;
}

.emp-stat-tile .split-top .emp-stat-label,
.emp-stat-tile .split-bottom .emp-stat-label {
    font-size: 7px;
    color: #000;
}

/* Timeoff split - teal top (#5DBDBD), lighter teal bottom (#7DD3E8) */
.emp-stat-tile.timeoff-split .split-top { background: #5DBDBD; }
.emp-stat-tile.timeoff-split .split-bottom { background: #7DD3E8; }

/* Breaks split - orange top (#F5A65B), tan bottom (#F8D5A8) */
.emp-stat-tile.breaks-split .split-top { background: #F5A65B; }
.emp-stat-tile.breaks-split .split-bottom { background: #F8D5A8; }

/* Lunch Billing split - same as breaks */
.emp-stat-tile.lunch-billing-split .split-top { background: #F5A65B; }
.emp-stat-tile.lunch-billing-split .split-bottom { background: #F8D5A8; }

/*─────────────────────────────────────────────────────────────────────────────
 * SEPARATOR (vertical line between groups)
 * v2025-12-26: Height matches single employee tile (~43px at 60% scale)
 *─────────────────────────────────────────────────────────────────────────────*/
.emp-stat-separator {
    width: 1px;
    height: 43px;
    background: #CCC;
    margin: 0 5px;
    align-self: center;
    margin-top: -5px;
}

/* Spacer to push day badges + billable to far right */
.emp-stat-spacer {
    flex: 1;
}

/* Daily badges container - inline row, right-justified against billable */
/* v16 | 2026-02-01 | BB - Added min-width for column alignment across all employee rows */
.daily-badges-container {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-right: 8px;
    min-width: 340px;  /* Space for 10 day blocks + separator + gaps */
}
/* Scrollable day badges - main header container only */
#dailyBadgesContainer {
    max-width: 411px;  /* Exact measured width of standard 10-day range */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB transparent;
}
#dailyBadgesContainer::-webkit-scrollbar {
    height: 3px;
}
#dailyBadgesContainer::-webkit-scrollbar-track {
    background: transparent;
}
#dailyBadgesContainer::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 2px;
}
#dailyBadgesContainer::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}
.daily-badges-container .day-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 36px;
    flex-shrink: 0;
}
.daily-badges-container .day-label {
    font-size: 9px;
    color: #767676; /* v2026-03-11 RcodexE2E: #9CA3AF fails WCAG AA on white bg; #767676 = 4.54:1 */
    font-weight: 500;
    text-transform: uppercase;
}
.daily-badges-container .day-hours {
    background: #6B7280;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 2px;
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.daily-badges-container .day-hours.exact-8 {
    background: #22C55E;
    color: #1A1A1A; /* v2026-03-11 RcodexE2E: white on #22C55E = 4.4:1 (fails AA); dark = 8.2:1 */
}
.daily-badges-container .day-hours.over-8 {
    background: #F97316;
    color: #1A1A1A; /* v2026-03-11 RcodexE2E: white on #F97316 = 2.6:1 (fails AA); dark = 8.4:1 */
}
.daily-badges-container .day-hours.empty-slot {
    background: transparent;
    border: 1px solid #4B5563;
    color: #6B7280;
}
/* Red dot: this day is not confirmed yet (Bouncie mode). | 2026-09-25 | BB
   v2 | 2026-09-27 | BB - drawn as CalExp5's pay-period strip draws it: a plain dot just
   left of the day name ("• FRI"), no ring, not on the hours tile. Absolutely placed so
   it takes no width from the label and the day name stays centred over its tile. */
.daily-badges-container .day-label {
    position: relative; /* anchors .unconfirmed-dot */
}
.daily-badges-container .day-label .unconfirmed-dot {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 2px;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C8102E; /* CalExp5 DAY_CHIP_COLORS.unconfirmedDot */
    pointer-events: none;
}
.daily-badges-container .day-date {
    font-size: 8px;
    color: #6B7280;
    margin-top: 1px;
}
/* Week separator between weeks */
.daily-badges-container .week-separator {
    width: 1px;
    height: 32px;
    background: #D1D5DB;
    margin: 0 4px;
    flex-shrink: 0;
}