/* tables.css - Extracted from inline <style> | 2026-03-11 | BB */

/* ========== EXPANDED CONTENT (TIMESHEET) ========== */
.employee-details {
    display: none;
    background: var(--bg-light);
    padding: 0 20px 20px 52px;
}

.employee-row.expanded .employee-details {
    display: block;
}

.detail-table {
    width: 100%;
    min-width: 1200px; /* Ensure all 13 columns are visible */
    border-collapse: collapse;
    font-size: 12px;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.detail-table th {
    background: #F9FAFB;
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
}

.detail-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #F3F4F6;
    text-align: center;
    font-size: 12px;
}

.detail-table tbody tr:hover td {
    background: #FAFAFA;
}

/* Day Separator Row */
.day-row td {
    background: #E5E7EB !important;
    height: 10px !important;
    padding: 0 !important;
    line-height: 10px !important;
}

/* Grayed out rows (before data start) */
.grayed-row td {
    background: #F3F4F6 !important;
    color: #9CA3AF !important;
}
.grayed-row td span {
    color: #9CA3AF !important;
}

/* Badges in table */
.lunch-badge {
    display: inline-block;
    background: #F5A65B;
    color: #333;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.sick-badge {
    background: #7DD3E8;
    color: #333;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.vacation-badge {
    background: #5DBDBD;
    color: #333;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.unpaid-badge {
    background: #B45309;
    color: #FEF3C7;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

tr.unpaid-entry td {
    color: #92400E !important;
    font-style: italic;
}

.yes-text {
    color: var(--green-primary);
    font-weight: 500;
}

/* Billable toggle button - click to change state */
.billable-toggle {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 48px;
}
.billable-toggle.is-yes {
    background: var(--green-primary);
    color: #fff;
}
.billable-toggle.is-yes:hover {
    background: var(--green-dark);
}
.billable-toggle.is-no {
    background: #E5E7EB;
    color: #4B5563; /* v2026-03-19 RcodexUI-3: #6B7280 = 4.0:1 on #E5E7EB, fails WCAG AA; #4B5563 = 5.4:1 */
}
.billable-toggle.is-no:hover {
    background: #D1D5DB;
    color: #374151;
}
.billable-toggle:active {
    transform: scale(0.95);
}

.flag-link {
    color: #C0C0C0;
    text-decoration: none;
    cursor: default;
}

/* Day Total and Week Total max bold with caution */
.max-day-total {
    font-weight: 700 !important;
}

.max-week-total {
    font-weight: 700 !important;
}

.caution-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #C9908F;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

.caution-badge::before {
    content: '!';
}

.check-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #22C55E;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

.check-badge::before {
    content: '✓';
}