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

/* ========== API STATUS BAR ========== */
.api-status-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: #F8FAFC;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
}
.api-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.status-dot {
    /* Standard status indicator - plain circle, no checkmarks */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.status-dot::before,
.status-dot::after {
    content: none !important;
    display: none !important;
}
.status-dot.pending { background: #FCD34D; animation: pulse 1.5s infinite; }
.status-dot.connected {
    background: #22C55E;
    box-shadow: 0 0 6px #22C55E;
}
.status-dot.error { background: #EF4444; }
.status-dot.refreshing { background: #60A5FA; animation: pulse 0.8s infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
.status-label {
    font-weight: 600;
    color: var(--text-dark);
}
.status-text {
    color: var(--text-muted);
    font-size: 11px;
}


/* ========== TOP SUMMARY BAR ========== */
.summary-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
}

.summary-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.report-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
}

.date-picker-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-picker-group label {
    font-size: 12px;
    color: var(--text-muted);
}

.date-picker-group input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
}

.date-picker-group input[type="date"]:disabled {
    background: #F3F4F6;
    color: var(--text-muted);
}

.date-range-separator {
    color: var(--text-muted);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-btn:hover {
    background: var(--bg-light);
}

.header-btn.primary {
    background: var(--green-primary);
    color: #fff;
    border-color: var(--green-primary);
}

/* Toolbar divider between action groups */
.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 4px;
}

/* Summary Stats Boxes - matching screenshot layout exactly */
.summary-stats {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* Stat box cursor */
.stat-box {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}
.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99999;
}

/* Decimal portion styling - 3 sizes smaller */
.stat-box .value .decimal {
    font-size: 0.55em;
    opacity: 1.0;
}

/* Tooltip table for stat boxes - positioned to right and below */
.stat-box .stat-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    background: #1A1A1A;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 99999;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 180px;
}
.stat-box .stat-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-bottom-color: #1A1A1A;
}
.stat-box:hover .stat-tooltip {
    opacity: 1;
    visibility: visible;
}
.stat-tooltip-table {
    width: 100%;
    border-collapse: collapse;
}
.stat-tooltip-table td {
    padding: 3px 0;
    border-bottom: 1px solid #333;
}
.stat-tooltip-table tr:last-child td {
    border-bottom: none;
    font-weight: 600;
    padding-top: 6px;
}
.stat-tooltip-table td:first-child {
    text-align: left;
}
.stat-tooltip-table td:last-child {
    text-align: right;
    padding-left: 12px;
}
.stat-tooltip-table tr.tooltip-total td {
    border-bottom: none;
    border-top: 1px solid #555;
    font-weight: 600;
    padding-top: 6px;
    color: #22C55E;
}
.stat-tooltip .no-data {
    color: #999;
    font-style: italic;
}
/* Dollar tooltip columns - right justified */
.stat-tooltip-table.dollar-table th.dollar-col,
.stat-tooltip-table.dollar-table td.dollar-col {
    text-align: right;
    padding-left: 12px;
    font-variant-numeric: tabular-nums;
}
.stat-tooltip-table.dollar-table thead th {
    font-size: 10px;
    color: #999;
    font-weight: 400;
    padding-bottom: 4px;
    border-bottom: 1px solid #444;
}
.stat-tooltip-table.dollar-table {
    min-width: 200px;
}

/* v20 | 2026-03-19 | BB - Employee stat tile mileage tooltip (per jobsite)
   Uses JS-positioned fixed tooltip to escape overflow:hidden parents.
   See: .emp-mileage-tooltip-floating in index.html */
.emp-mileage-tooltip-floating {
    position: fixed;
    background: #1A1A1A;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 180px;
    pointer-events: none;
}
.emp-mileage-tooltip-floating.visible {
    opacity: 1;
    visibility: visible;
}
.emp-mileage-tooltip-floating::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1A1A1A;
}
.emp-mileage-tooltip-floating .no-data {
    color: #999;
    font-style: italic;
}

/* Billable tile tooltips - dynamic left/right based on mouse position */
.stat-box.billable .billable-tooltip-left,
.stat-box.billable .billable-tooltip-right {
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Left tooltip - opens to left of tile (employee breakdown) */
.stat-box.billable .billable-tooltip-left {
    left: auto;
    right: 100%;
    top: 0;
    margin-right: 8px;
    margin-top: 0;
}
.stat-box.billable .billable-tooltip-left::before {
    left: auto;
    right: -12px;
    top: 16px;
    bottom: auto;
    border: 6px solid transparent;
    border-left-color: #1A1A1A;
    border-bottom-color: transparent;
}
/* Right tooltip - opens to right with position:fixed to escape stacking context */
.stat-box.billable .billable-tooltip-right {
    position: fixed;
    z-index: 9999999;
}
.stat-box.billable .billable-tooltip-right::before {
    left: -12px;
    right: auto;
    top: 16px;
    bottom: auto;
    border: 6px solid transparent;
    border-right-color: #1A1A1A;
    border-bottom-color: transparent;
}
/* Show appropriate tooltip based on data attribute */
.stat-box.billable[data-tooltip-side="left"] .billable-tooltip-left {
    opacity: 1;
    visibility: visible;
}
.stat-box.billable[data-tooltip-side="right"] .billable-tooltip-right {
    opacity: 1;
    visibility: visible;
}
/* Billable $ tooltip - opens LEFT of tile */
.tile-stack.billable-stack .billable-dollars .stat-tooltip {
    right: 100%;
    left: auto;
    top: 0;
    margin-right: 8px;
    margin-top: 0;
    z-index: 999999;
}
.tile-stack.billable-stack .billable-dollars .stat-tooltip::before {
    right: -12px;
    left: auto;
    top: 16px;
    bottom: auto;
    border: 6px solid transparent;
    border-left-color: #1A1A1A;
    border-bottom-color: transparent;
}

/* Validation Check Category Tooltips */
.val-check-tooltip {
    position: fixed;
    background: #1A1A1A;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 11px;
    z-index: 999999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    max-width: 340px;
    min-width: 260px;
}
.val-check-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.val-check-tooltip.pinned {
    pointer-events: auto;
}
/* Severity badge — clickable cycling badge */
.sev-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.15s;
    user-select: none;
}
.sev-badge:hover { filter: brightness(1.2); }
.sev-badge.sev-critical { background: rgba(239,68,68,0.2); color: #EF4444; }
.sev-badge.sev-warning  { background: rgba(245,158,11,0.2); color: #F59E0B; }
.sev-badge.sev-info     { background: rgba(96,165,250,0.2); color: #60A5FA; }
.sev-badge.overridden { outline: 1px dashed currentColor; outline-offset: 1px; }
.val-check-tooltip .vct-title {
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 6px;
    color: #ddd;
    letter-spacing: 0.3px;
}
.val-check-tooltip table {
    width: 100%;
    border-collapse: collapse;
}
.val-check-tooltip th {
    font-size: 9px;
    color: #999;
    font-weight: 400;
    text-align: left;
    padding: 2px 0 4px;
    border-bottom: 1px solid #444;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.val-check-tooltip th:last-child {
    text-align: right;
}
.val-check-tooltip td {
    padding: 3px 0;
    border-bottom: 1px solid #2a2a2a;
    font-size: 10.5px;
}
.val-check-tooltip tr:last-child td {
    border-bottom: none;
}
.val-check-tooltip td:first-child {
    color: #aaa;
    font-family: monospace;
    font-size: 10px;
    width: 42px;
}
.val-check-tooltip td:last-child {
    text-align: right;
    font-size: 9.5px;
    font-weight: 500;
}
.val-check-tooltip .sev-critical { color: #EF4444; }
.val-check-tooltip .sev-warning { color: #F59E0B; }
.val-check-tooltip .sev-info { color: #60A5FA; }
.val-cat-label {
    position: relative;
}
.val-cat-label .val-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
    cursor: help;
    border: 1px solid var(--border-color);
    transition: background 0.15s, color 0.15s;
}
.val-cat-label:hover .val-info-icon {
    background: #3B82F6;
    color: white;
    border-color: #3B82F6;
}

/* Stat Detail Modal */
.stat-detail-modal {
    display: none;
    z-index: 2000;
}
.stat-detail-modal.active {
    display: flex;
}
.stat-detail-content {
    background: #fff;
    border-radius: 8px;
    width: 400px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.stat-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
}
.stat-detail-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.stat-detail-body {
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
}
.stat-detail-table {
    width: 100%;
    border-collapse: collapse;
}
.stat-detail-table th,
.stat-detail-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.stat-detail-table th {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.stat-detail-table td {
    font-size: 14px;
}
.stat-detail-table tbody tr:last-child td {
    border-bottom: none;
}
.stat-detail-table .total-row td {
    font-weight: 600;
    border-top: 2px solid var(--border-color);
    padding-top: 12px;
}

/* Custom Range button */
.custom-range-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 4px;
}
.custom-range-btn:hover {
    background: var(--bg-light);
}
.custom-range-btn.active {
    background: var(--bb-red);
    color: #fff;
    border-color: var(--bb-red);
}

/* v10 | 2026-01-31 | BB - Payroll period navigation arrows */
.payroll-nav-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.payroll-nav-btn:hover {
    background: var(--green-primary);
    color: #fff;
    border-color: var(--green-primary);
}
.payroll-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.payroll-nav-btn:disabled:hover {
    background: var(--bg-white);
    color: var(--text-dark);
    border-color: var(--border-color);
}

/* Straight box - tan/brown */
.stat-box.straight {
    background: #C9A86C;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 100px;
}
.stat-box.straight .value {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    display: block;
}
.stat-box.straight .label {
    font-size: 13px;
    color: #333;
    font-weight: 400;
}

/* Regular - green */
.stat-box.regular {
    background: #9CB89F;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 90px;
}
.stat-box.regular .value {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    display: block;
}
.stat-box.regular .label {
    font-size: 13px;
    color: #333;
    font-weight: 400;
}

/* Vacation + Sick - split teal box */
.stat-box.timeoff-split {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 90px;
}
.stat-box.timeoff-split .top-half,
.stat-box.timeoff-split .bottom-half {
    padding: 8px 12px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-box.timeoff-split .top-half {
    background: #5DBDBD;
}
.stat-box.timeoff-split .bottom-half {
    background: #7DD3E8;
}
.stat-box.timeoff-split .value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-align: right;
}
.stat-box.timeoff-split .label {
    font-size: 11px;
    color: #000;
}

/* Overtime - salmon/red */
.stat-box.overtime {
    background: #C9908F;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 80px;
}
.stat-box.overtime .value {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    display: block;
}
.stat-box.overtime .label {
    font-size: 13px;
    color: #333;
    font-weight: 400;
}

/* Paid Hours - gray with red border */
.stat-box.totalhours {
    background: #8F8F8F;
    border: 3px solid #EF4444;
    border-radius: var(--radius-md);
    padding: 9px 13px;
    min-width: 100px;
}
.stat-box.totalhours .value {
    font-size: 32px;
    font-weight: 400;
    color: #1a1a1a;
    display: block;
}
.stat-box.totalhours .label {
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 400;
}

/* TileStyle3 - Stacked tile group (e.g., Paid Hours + $) */
.tile-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
}
.tile-stack.billable-stack {
    margin-left: auto;
}

/* Dollar tiles - independent half-height tiles with own hover */
.stat-box.paid-dollars,
.stat-box.ot-dollars,
.stat-box.pto-total,
.stat-box.mileage-dollars,
.stat-box.billable.billable-dollars {
    padding: 4px 16px 6px 16px;
    min-height: auto;
    min-width: 100px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
}
.stat-box.paid-dollars { background: #8F8F8F; }
.stat-box.ot-dollars { background: #C9908F; }
.stat-box.pto-total { background: #5DBDBD; }
.stat-box.mileage-dollars { background: #E8E854; }
.stat-box.paid-dollars:hover,
.stat-box.ot-dollars:hover,
.stat-box.pto-total:hover,
.stat-box.mileage-dollars:hover,
.stat-box.billable.billable-dollars:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99999;
}
.stat-box.paid-dollars .value,
.stat-box.ot-dollars .value,
.stat-box.pto-total .value,
.stat-box.mileage-dollars .value,
.stat-box.billable.billable-dollars .value {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    display: block;
    color: #1a1a1a;
}

/* Billable - blue with red border (right-justified) */
/* Click: employee breakdown modal | Right-click: jobsite breakdown menu */
.stat-box.billable {
    background: #60A5FA;
    border: 3px solid #EF4444;
    border-radius: var(--radius-md);
    padding: 9px 13px;
    min-width: 90px;
}
.stat-box.billable .value {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    display: block;
}
.stat-box.billable .label {
    font-size: 13px;
    color: #333;
    font-weight: 400;
}

/* Breaks - split box (same proportion as vacation/sick) */
.stat-box.breaks-split {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 90px;
}
.stat-box.breaks-split .top-half,
.stat-box.breaks-split .bottom-half {
    padding: 8px 12px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-box.breaks-split .top-half {
    background: #F5A65B;
}
.stat-box.breaks-split .bottom-half {
    background: #F8D5A8;
}
.stat-box.breaks-split .value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-align: right;
}
.stat-box.breaks-split .label {
    font-size: 11px;
    color: #000;
}

/* Lunch Billing - split box (Assigned/Unassigned for customer billing) */
/* Colors match Paid/Unpaid breaks: orange top, tan bottom */
.stat-box.lunch-billing-split {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 90px;
}
.stat-box.lunch-billing-split .top-half,
.stat-box.lunch-billing-split .bottom-half {
    padding: 8px 12px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-box.lunch-billing-split .top-half {
    background: #F5A65B;
}
.stat-box.lunch-billing-split .bottom-half {
    background: #F8D5A8;
}
.stat-box.lunch-billing-split .value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-align: right;
}
.stat-box.lunch-billing-split .label {
    font-size: 11px;
    color: #333;
}

/* Mileage - yellow */
.stat-box.mileage {
    background: #E8E854;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-width: 80px;
}
.stat-box.mileage .value {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    display: block;
}
.stat-box.mileage .label {
    font-size: 13px;
    color: #333;
    font-weight: 400;
}

/* Stat separator - vertical line between tile groups */
/* v2025-12-26: Height matches single large stat tile (~72px with padding) */
.stat-separator {
    width: 1px;
    height: 72px;
    background: #CCC;
    margin: 0 8px;
    border-radius: 1px;
    align-self: center;
    margin-top: -5px;
}

/* Lunch notation for billable tile - inline with label */
.stat-box.billable .label-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-box.billable .lunch-notation {
    font-size: 10px;
    color: #333;
    font-weight: 500;
}


/* ========== TOOLBAR BUTTONS ========== */
.toolbar-btn {
    padding: 6px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-btn:hover {
    background: var(--bg-light);
}

.toolbar-btn svg {
    width: 14px;
    height: 14px;
}

/* v7 | 2026-02-06 | BB - Restored notesToggleBtn for snapshot display toggle */
/* v2026-03-19 RcodexUI-4: #9CA3AF = 2.85:1 on white, fails WCAG AA; use var(--text-muted) = #6B7280 (4.5:1) */
#notesToggleBtn {
    position: relative;
    transition: all 0.2s;
    font-size: 11px;
    gap: 4px;
    color: var(--text-muted);
}
#notesToggleBtn.active {
    background: #6366F1;
    color: white;
    border-color: #6366F1;
}
/* Note cell indicators for changed notes */
.note-changed {
    background: rgba(234, 179, 8, 0.15);
    border-left: 3px solid #EAB308;
}
.note-original {
    background: rgba(99, 102, 241, 0.15);
    border-left: 3px solid #6366F1;
    font-style: italic;
}

/* Auto-Note Button States */
#autoNoteBtn {
    position: relative;
    transition: all 0.2s;
}
#autoNoteBtn.active {
    background: #22C55E;
    border-color: #16A34A;
    color: #fff;
}
#autoNoteBtn.active:hover {
    background: #16A34A;
}
#autoNoteBtn.processing {
    opacity: 0.7;
    pointer-events: none;
}
.auto-note-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #EF4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
#autoNoteBtn.active .auto-note-badge {
    background: #fff;
    color: #16A34A;
}

/* Auto-Note modified cell indicator - right-justified 15ch wide highlight */
.notes-cell.auto-note-modified {
    position: relative;
}
.notes-cell.auto-note-modified::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(34, 197, 94, 0.25);
    border-right: 3px solid #22C55E;
    pointer-events: none;
}

/* Lunch Toggle Button States (similar to auto-note) */
#lunchToggleBtn {
    position: relative;
    transition: all 0.2s;
}
#lunchToggleBtn.active {
    background: #EF4444;
    border-color: #DC2626;
    color: #fff;
}
#lunchToggleBtn.active:hover {
    background: #DC2626;
}
#lunchToggleBtn.processing {
    opacity: 0.7;
    pointer-events: none;
}
/* Button badge - scoped to toolbar only */
#lunchToggleBtn .lunch-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #22C55E;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
#lunchToggleBtn.active .lunch-badge {
    background: #fff;
    color: #DC2626;
}

/* Upload Lunches Button */
#uploadLunchesBtn {
    position: relative;
    transition: all 0.2s;
}
#uploadLunchesBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
#uploadLunchesBtn.ready {
    color: #22C55E;
}
#uploadLunchesBtn.published {
    color: #3B82F6;
}
#uploadLunchesBtn.processing {
    opacity: 0.7;
    pointer-events: none;
}

/* v20 | 2026-02-01 | BB - Context Menu for right-click actions (billable dark-theme) */
#billableContextMenu {
    position: fixed;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100000;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
/* v22 | 2026-02-01 | BB - Added display:block to fix visibility */
#billableContextMenu.visible {
    display: block !important;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
#billableContextMenu .context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
#billableContextMenu .context-menu-item:hover {
    background: rgba(255,255,255,0.08);
}
#billableContextMenu .context-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
#billableContextMenu .context-menu-item.qbo {
    color: #22C55E;
}
#billableContextMenu .context-menu-item.qbt {
    color: #3B82F6;
}
#billableContextMenu .context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* v24 | 2026-04-01 | BB - Toolbar context menu for right-click lunch/notes actions (compact tooltip style) */
#toolbarContextMenu {
    position: fixed;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100000;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
    display: none;
}
#toolbarContextMenu.visible {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
#toolbarContextMenu .context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}
#toolbarContextMenu .context-menu-item:hover {
    background: rgba(255,255,255,0.08);
}
#toolbarContextMenu .context-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
#toolbarContextMenu .context-menu-item.qbo {
    color: #22C55E;
}
#toolbarContextMenu .context-menu-item.qbt {
    color: #3B82F6;
}

/* Context menu hint badge on buttons */
.context-hint {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #64748B;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none;
}
#lunchToggleBtn.active .context-hint,
#autoNoteBtn.active .context-hint {
    background: #fff;
    color: #1A1A1A;
}


/* ========== LUNCH CONTEXT MENU ========== */
.lunch-badge {
    cursor: context-menu;
}
.lunch-badge.billable-assigned {
    background: #34D399 !important;
    color: #065F46 !important;
}
.lunch-badge.published {
    background: #9CA3AF !important;
    color: #4B5563 !important;
    cursor: not-allowed;
    opacity: 0.7;
}
.lunch-badge.published::after {
    content: ' ✓';
    font-size: 10px;
}

/* v6 | 2026-01-23 | BB - Locked record styles (records in closed payroll period) */
tr.locked-record {
    background-color: #F3F4F6 !important;
    opacity: 0.65;
}
tr.locked-record td {
    color: #9CA3AF !important;
}
tr.locked-record .lunch-badge {
    cursor: not-allowed;
    pointer-events: none;
}
tr.locked-record .billable-cell,
tr.locked-record .miles-cell {
    pointer-events: none;
    cursor: not-allowed;
}
.lock-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.5;
}

/* Light-theme context menus — scoped to avoid cascade conflict with #billableContextMenu dark-theme block */
#lunchContextMenu,
#milesContextMenu {
    position: fixed;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 220px;
    z-index: 10000;
    display: none;
    font-size: 12px;
}

#lunchContextMenu.show,
#milesContextMenu.show {
    display: block;
}

/* Shared header style used by all context menus */
.context-menu-header {
    padding: 10px 12px;
    background: #F9FAFB;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-dark);
    font-size: 11px;
}

#lunchContextMenu .context-menu-suggestion {
    padding: 8px 12px;
    background: #ECFDF5;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

#lunchContextMenu .context-menu-suggestion .suggestion-label {
    font-size: 10px;
    color: #059669;
    font-weight: 600;
}

#lunchContextMenu .context-menu-suggestion .suggestion-job {
    font-size: 12px;
    color: #065F46;
    cursor: pointer;
}

#lunchContextMenu .context-menu-suggestion .suggestion-job:hover {
    text-decoration: underline;
}

#lunchContextMenu .context-menu-divider {
    padding: 6px 12px;
    background: #F9FAFB;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

#lunchContextMenu .context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#lunchContextMenu .context-menu-item:hover {
    background: #F3F4F6;
}

#lunchContextMenu .context-menu-item .job-name {
    color: var(--text-dark);
}

#lunchContextMenu .context-menu-unassign {
    padding: 8px 12px;
    cursor: pointer;
    color: #DC2626;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    display: none;
}

#lunchContextMenu .context-menu-unassign:hover {
    background: #FEF2F2;
}

#lunchContextMenu .context-menu-unassign.show {
    display: block;
}

/* Billable context menu styles */
.billable-yes .check-icon,
.billable-no .check-icon {
    width: 16px;
    height: 16px;
    display: none;
}
.billable-yes.selected .check-icon::before,
.billable-no.selected .check-icon::before {
    content: '✓';
    color: var(--green-primary);
    font-weight: 700;
}
.billable-yes.selected .check-icon,
.billable-no.selected .check-icon {
    display: inline;
}
.billable-cell {
    cursor: pointer;
    transition: background 0.15s;
}
.billable-cell:hover {
    background: rgba(255,255,255,0.1);
}

/* v7 | 2026-01-23 | BB - Week header collapsed text hidden */
.week-header-row.collapsed td {
    color: #F59E0B !important;  /* Match orange background - hides text */
}
.week-header-row.collapsed th {
    color: #F59E0B !important;  /* Match orange background - hides text */
}
.week-header-row.collapsed .week-toggle {
    color: #fff !important;  /* Keep arrow visible */
}

/* v6 | 2026-01-23 | BB - Customer list styles */
.customer-list-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #F3F4F6;
    font-size: 13px;
    transition: background 0.15s;
}
.customer-list-item:hover {
    background: #F3F4F6;
}
.customer-list-item.selected {
    background: #EBF5FF;
    color: #1D4ED8;
}
.customer-list-item:last-child {
    border-bottom: none;
}

/* Miles edit menu styles */
.miles-edit-content {
    padding: 12px;
}
.miles-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: monospace;
    margin-bottom: 10px;
}
.miles-input:focus {
    outline: 2px solid #3B82F6; /* v2026-03-12 RcodexUI-4: was 'transparent' — invisible outline fails WCAG 2.4.7; use visible color */
    outline-offset: 1px;
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.miles-edit-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.miles-cell {
    cursor: context-menu;
}

/* v6 | 2026-01-23 | BB - Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CBD5E1;
    transition: 0.3s;
    border-radius: 24px;
}
.toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
    background-color: #F59E0B;
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Table wrapper with its own scroll - thead sticky inside */
.table-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--text-light) transparent;
}
.table-scroll-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.table-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: 4px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
.table-scroll-wrapper::-webkit-scrollbar-corner {
    background: transparent;
}

/* Sticky table header within table-scroll-wrapper */
.detail-table thead {
    position: sticky;
    top: 0;
    z-index: 50;
}
.detail-table thead th {
    background: #F5A65B !important;
    color: #333 !important;
    font-weight: 600;
    padding: 8px 10px !important;
    text-align: center;
    font-size: 11px;
    border-bottom: none !important;
}
/* sr-only thead: stay in table flow (for column sizing) but zero-height + clipped */
.detail-table thead.sr-only {
    position: static !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
}
.detail-table thead.sr-only th {
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* v17 | 2026-02-01 | BB - Fixed column widths for consistent alignment across all employee tables */
.detail-table,
.employee-section {
    table-layout: fixed;
}
/* Column widths: Date(85) Day(45) In(70) Out(70) Hours(55) DayTotal(75) WeekTotal(80) Customer(100) Billable(65) ServiceItem(85) Flags(90) Miles(55) Notes(auto) */
.detail-table th:nth-child(1), .detail-table td:nth-child(1),
.employee-section th:nth-child(1), .employee-section td:nth-child(1) { width: 85px; min-width: 85px; }
.detail-table th:nth-child(2), .detail-table td:nth-child(2),
.employee-section th:nth-child(2), .employee-section td:nth-child(2) { width: 45px; min-width: 45px; }
.detail-table th:nth-child(3), .detail-table td:nth-child(3),
.employee-section th:nth-child(3), .employee-section td:nth-child(3) { width: 70px; min-width: 70px; }
.detail-table th:nth-child(4), .detail-table td:nth-child(4),
.employee-section th:nth-child(4), .employee-section td:nth-child(4) { width: 70px; min-width: 70px; }
.detail-table th:nth-child(5), .detail-table td:nth-child(5),
.employee-section th:nth-child(5), .employee-section td:nth-child(5) { width: 55px; min-width: 55px; }
.detail-table th:nth-child(6), .detail-table td:nth-child(6),
.employee-section th:nth-child(6), .employee-section td:nth-child(6) { width: 75px; min-width: 75px; }
.detail-table th:nth-child(7), .detail-table td:nth-child(7),
.employee-section th:nth-child(7), .employee-section td:nth-child(7) { width: 80px; min-width: 80px; }
.detail-table th:nth-child(8), .detail-table td:nth-child(8),
.employee-section th:nth-child(8), .employee-section td:nth-child(8) { width: 100px; min-width: 100px; }
.detail-table th:nth-child(9), .detail-table td:nth-child(9),
.employee-section th:nth-child(9), .employee-section td:nth-child(9) { width: 65px; min-width: 65px; }
.detail-table th:nth-child(10), .detail-table td:nth-child(10),
.employee-section th:nth-child(10), .employee-section td:nth-child(10) { width: 85px; min-width: 85px; }
.detail-table th:nth-child(11), .detail-table td:nth-child(11),
.employee-section th:nth-child(11), .employee-section td:nth-child(11) { width: 90px; min-width: 90px; }
.detail-table th:nth-child(12), .detail-table td:nth-child(12),
.employee-section th:nth-child(12), .employee-section td:nth-child(12) { width: 55px; min-width: 55px; }
.detail-table th:nth-child(13), .detail-table td:nth-child(13),
.employee-section th:nth-child(13), .employee-section td:nth-child(13) { width: auto; min-width: 160px; }
/* v7 | 2026-02-07 | BB - Notes column (14) also needs width */
.detail-table th:nth-child(14), .detail-table td:nth-child(14),
.employee-section th:nth-child(14), .employee-section td:nth-child(14) { width: auto; min-width: 160px; }
/* Ensure text overflow is handled gracefully */
.detail-table td, .employee-section td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Original Note (13) and Notes (14) columns can wrap */
.detail-table td:nth-child(13), .employee-section td:nth-child(13),
.detail-table td:nth-child(14), .employee-section td:nth-child(14) {
    white-space: normal;
    word-wrap: break-word;
}