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

/* ========== VERSION WATERMARK ========== */
.version-watermark {
    position: fixed;
    bottom: 8px;
    left: 8px;
    font-size: 10px;
    color: #9a9a9a; /* was var(--text-muted)/#5A6270 which failed WCAG AA 4.5:1 on #2d2d2d bg */
    z-index: 9999;
    font-family: monospace;
}


/* ========== 3-COLUMN LAYOUT ========== */
.app-container {
    display: flex;
    min-height: 100dvh;
}


/* ========== LEFT SIDEBAR ========== */
.left-sidebar {
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    position: relative;
    width: max-content;
    min-width: 180px;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.sidebar-header-text h1 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.sidebar-header-text span {
    color: var(--text-light);
    font-size: 11px;
}

/* Dark themed scrollbars for sidebars */
.left-sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar,
.employee-list::-webkit-scrollbar {
    width: 8px;
}
.left-sidebar::-webkit-scrollbar-track,
.right-sidebar::-webkit-scrollbar-track,
.employee-list::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.left-sidebar::-webkit-scrollbar-thumb,
.right-sidebar::-webkit-scrollbar-thumb,
.employee-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}
.left-sidebar::-webkit-scrollbar-thumb:hover,
.right-sidebar::-webkit-scrollbar-thumb:hover,
.employee-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Sidebar API Status Bar */
.sidebar-status-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 12px;
    background: #2a2a2a;
    border-bottom: 1px solid #3a3a3a;
}
.sidebar-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar-status-item .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FCD34D;
}
.sidebar-status-item .status-dot.connected {
    background: #22C55E;
}
.sidebar-status-item .status-dot.error {
    background: #EF4444;
}
.sidebar-status-item .status-dot.pending {
    background: #FCD34D;
    animation: pulse 1.5s infinite;
}
.sidebar-status-item .status-label {
    color: #9CA3AF;
    font-size: 11px;
    font-weight: 500;
}

/* Employee List in Sidebar */
.employee-list {
    padding: 8px;
    flex: 1;
    overflow-y: auto;
}

.employee-list-title {
    color: var(--text-light);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

/* Select All checkbox in title - matches employee item checkboxes */
/* v2025-12-26: Increased to 24px to match tile checkboxes */
.employee-list-title .emp-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
    accent-color: var(--green-primary);
    flex-shrink: 0;
}

.employee-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid #444;
    color: #D1D5DB;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 4px;
    min-height: 44px;
    text-align: right;
}

.employee-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: #666;
}

.employee-item.active {
    background: var(--bg-darker);
    color: #fff;
    border-color: var(--green-primary);
    border-width: 2px;
}

/* Checkbox for multi-select */
/* v2026-02-19: Increased to 24px to match select-all checkbox */
.employee-item .emp-checkbox {
    margin-right: auto;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
    accent-color: var(--green-primary);
}
/* Override accessibility-v2.css #selectAllEmployees 44px min-size */
#selectAllEmployees {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.employee-item .employee-name-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.employee-item .employee-name-sidebar .first-name {
    font-size: 14px;
}

.employee-item .employee-name-sidebar .last-name {
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 400;
}

/* Day-by-day hours display under employee name */
.employee-item .daily-hours-row {
    display: flex;
    gap: 4px;
    width: 100%;
    flex-wrap: wrap;
}

.employee-item .day-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
}

.employee-item .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;
}

.employee-item .day-hours {
    background: #6B7280;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    min-width: 28px;
    text-align: center;
}

.employee-item .day-hours.exact-8 {
    background: #22C55E;
    color: #1A1A1A; /* v2026-03-11 RcodexE2E: dark text on green passes WCAG AA */
}

.employee-item .day-hours.over-8 {
    background: #F97316;
    color: #1A1A1A; /* v2026-03-11 RcodexE2E: dark text on orange passes WCAG AA */
}

.employee-item .day-date {
    font-size: 8px;
    color: #9CA3AF; /* v2026-03-12 RcodexUI-4: #6B7280 fails WCAG AA on dark sidebar (#2D2D2D = 2.3:1); #9CA3AF = 5.4:1 */
    margin-top: 1px;
}

/* 5x2 Grid layout for day blocks */
.employee-item .daily-hours-row.grid-5x2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    width: 100%;
}

/* Empty slot styling */
.employee-item .day-hours.empty-slot {
    background: transparent;
    border: 1px solid #4B5563;
    color: #9CA3AF; /* v2026-03-12 RcodexUI-4: #6B7280 fails WCAG AA on dark sidebar; #9CA3AF = 5.4:1 */
}

/* Legacy badge styles (kept for backwards compatibility) */
.employee-item .employee-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    justify-content: flex-start;
}

.employee-item .emp-badge {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}

.employee-item .emp-badge.straight { background: #C9A86C; color: #333; }
.employee-item .emp-badge.regular { background: #9CB89F; color: #333; }
.employee-item .emp-badge.vacation { background: #5DBDBD; color: #333; }
.employee-item .emp-badge.sick { background: #7DD3E8; color: #333; }
.employee-item .emp-badge.overtime { background: #C9908F; color: #333; }
.employee-item .emp-badge.total { background: #9A9A9A; color: #333; }
.employee-item .emp-badge.breaks { background: #F5A65B; color: #333; }
.employee-item .emp-badge.mileage { background: #E8E854; color: #333; }

/* All Employees tile - distinctive styling */
.employee-item.all-employees {
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.3);
    margin-bottom: 12px;
}
.employee-item.all-employees.active {
    background: var(--bg-darker);
    border: 1px solid var(--green-primary);
}

/* Legacy single badge support */
.employee-item .hours-badge {
    background: #9CB89F;
    color: #333;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}


/* ========== MAIN CONTENT ========== */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-white);
    height: 100dvh;
}


/* ========== MAIN CONTENT AREA ========== */
.content-area {
    flex: 1;
    overflow: hidden;
    background: var(--bg-white);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.timesheet-container {
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Employee Header in Central Pane */
.employee-header {
    margin-bottom: 0;
    padding: 20px 0 24px 0;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 120px;
}

/* Sticky week header below employee header */
.sticky-week-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f0f0f0;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    padding: 8px 0;
}

.sticky-week-header table {
    width: 100%;
    border-collapse: collapse;
}

.sticky-week-header th {
    text-align: center;
    padding: 6px 8px;
    font-size: 10px;
    color: #374151;
    background: #f0f0f0;
    white-space: nowrap;
}

/* Collapsible week sections */
.week-header-row {
    cursor: pointer;
}
.week-header-row th:first-child {
    position: relative;
    padding-left: 28px;
}
.week-header-row .week-toggle {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #333;
    transition: transform 0.2s;
}
.week-header-row.collapsed .week-toggle {
    transform: translateY(-50%) rotate(-90deg);
}
.week-content-row {
    transition: opacity 0.2s;
}
.week-content-row.week-hidden {
    display: none;
}

/* 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-header-left {
    flex: 1;
}

.employee-header-right {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

/* v13 | 2026-02-01 | BB - LEFT JUSTIFIED employee name */
.selected-employee-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-align: left;
    padding-left: 0;
}

/*═══════════════════════════════════════════════════════════════════════════════
 * EMPLOYEE STAT TILES - 60% scale of large header tiles (40% reduction)
 *
 * LARGE TILES:                      EMPLOYEE TILES (60%):
 * Single: padding 12px 16px         → 7px 10px
 * Single: value 32px, label 13px    → 19px, 8px
 * Single: min-width 100px           → 60px
 * Split: padding 8px 12px           → 5px 7px
 * Split: value 20px, label 11px     → 12px, 7px
 * Split: min-width 90px             → 54px
 * $ tile: padding 4px 16px 6px      → 2px 10px 4px
 * $ tile: value 16px                → 10px
 * Border: 3px                       → 2px
 * Stack gap: 4px                    → 2px
 * Row gap: 6px                      → 4px
 *═══════════════════════════════════════════════════════════════════════════════*/

/* Employee header layout */
.employee-stat-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

/* 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;
}
.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;
}

/* Average daily hours tile (sits outside scrollable badges container) */
.avg-daily-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 2px 4px;
    margin-right: 4px;
    border-right: 1px solid #4B5563;
}
.avg-daily-tile .avg-value {
    font-size: 13px;
    font-weight: 700;
    color: #767676; /* v2026-03-11 RcodexE2E: #9CA3AF fails WCAG AA on white bg; #767676 = 4.54:1 */
}
.avg-daily-tile .avg-label {
    font-size: 7px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Legacy badge styles (kept for backwards compatibility) */
.employee-badges-header {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.employee-badges-header .emp-badge {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.employee-badges-header .emp-badge.straight { background: #C9A86C; color: #333; }
.employee-badges-header .emp-badge.regular { background: #9CB89F; color: #333; }
.employee-badges-header .emp-badge.vacation { background: #5DBDBD; color: #333; }
.employee-badges-header .emp-badge.sick { background: #7DD3E8; color: #333; }
.employee-badges-header .emp-badge.overtime { background: #C9908F; color: #333; }
.employee-badges-header .emp-badge.total { background: #9A9A9A; color: #333; }
.employee-badges-header .emp-badge.breaks { background: #F5A65B; color: #333; }

.mileage-badge-right {
    background: #E8E854;
    color: #333;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

/* Hour Badges - matching stat box color scheme */
.hour-badges {
    display: flex;
    gap: 6px;
}

.hour-badge {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

/* Straight - tan/brown */
.hour-badge.straight {
    background: #C9A86C;
    color: #333;
}

/* Regular - green */
.hour-badge.regular {
    background: #9CB89F;
    color: #333;
}

/* Time Off - green (same as regular) */
.hour-badge.timeoff {
    background: #9CB89F;
    color: #333;
}

/* Overtime - salmon/red */
.hour-badge.overtime {
    background: #C9908F;
    color: #333;
}

/* Total Hours - gray */
.hour-badge.total {
    background: #9A9A9A;
    color: #333;
}

/* Paid Breaks - orange */
.hour-badge.breaks {
    background: #F5A65B;
    color: #333;
}

/* Mileage - yellow */
.hour-badge.mileage {
    background: #E8E854;
    color: #333;
}

/* Legacy support */
.hour-badge.green {
    background: #9CB89F;
    color: #333;
}

.hour-badge.gray {
    background: #9A9A9A;
    color: #333;
}

.hour-badge.yellow {
    background: #C9908F;
    color: #333;
}

.hour-badge.orange {
    background: #F5A65B;
    color: #333;
}

.hour-badge.teal {
    background: #5DBDBD;
    color: #333;
}

.hour-badge.blue {
    background: #60A5FA;
    color: #333;
}


/* ========== SIDEBAR RESIZE HANDLES ========== */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: transparent;
    cursor: col-resize;
    z-index: 100;
    transition: background 0.2s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background: rgba(200, 16, 46, 0.4);
}
.left-sidebar .sidebar-resize-handle {
    right: -3px;
}
.right-sidebar .sidebar-resize-handle {
    left: -3px;
}


/* ========== RIGHT SIDEBAR (Dark Theme) ========== */
.right-sidebar {
    background: var(--bg-dark);
    border-left: 1px solid var(--border-dark);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    width: fit-content;
    min-width: 280px;
    max-width: 420px;
    flex-shrink: 0;
}

.sidebar-section {
    padding: 0;
    border-bottom: 1px solid var(--border-dark);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    white-space: nowrap;
}

.section-title:hover {
    background: rgba(255,255,255,0.05);
}

.section-title::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.2s ease;
}

.sidebar-section.collapsed .section-title::after {
    transform: rotate(-90deg);
}

.section-content {
    padding: 0 20px 16px 20px;
    overflow: visible;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Custom scrollbar for sidebar sections */
.section-content::-webkit-scrollbar {
    width: 6px;
}
.section-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}
.section-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}
.section-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}

.sidebar-section.collapsed .section-content {
    display: none;
}

/* Ensure content text is visible in dark sidebar */
.billed-lunch-content,
.flagged-content,
.overtime-content,
.mileage-content {
    color: #D1D5DB !important;
}

/* Zero values in sidebar - no grayout per user request */
/* .zero-value class is still applied but has no visual effect */
.zero-value-row {
    opacity: 0.5;
}

/* Pie Chart */
.pie-chart-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.pie-chart {
    width: 182px;
    height: 182px;
}

/* Pie Chart Floating Tooltip - matches stat-tooltip style */
/* v14 | 2026-02-01 | BB - Added max-width to prevent edge overflow */
.pie-tooltip {
    position: fixed;
    background: #1A1A1A;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 9999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 180px;
    max-width: 280px;
}
.pie-tooltip.visible {
    opacity: 1;
}
.pie-tooltip .tooltip-header {
    font-weight: 600;
    color: #22C55E;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
}
.pie-tooltip .tooltip-header .hours-pct {
    font-weight: 400;
    color: #D1D5DB;
    font-size: 11px;
    display: block;
    margin-top: 2px;
}
.pie-tooltip .pie-tooltip-table {
    width: 100%;
    border-collapse: collapse;
}
.pie-tooltip .pie-tooltip-table td {
    padding: 3px 0;
    border-bottom: 1px solid #333;
}
.pie-tooltip .pie-tooltip-table tr:last-child td {
    border-bottom: none;
}
.pie-tooltip .pie-tooltip-table td:first-child {
    text-align: left;
    color: #9CA3AF;
}
.pie-tooltip .pie-tooltip-table td:last-child {
    text-align: right;
    padding-left: 12px;
    color: #fff;
}

/* Job Breakout List */
.breakout-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    white-space: nowrap;
    gap: 12px;
}

.breakout-item .name {
    color: #D1D5DB;
}

.breakout-item .value {
    font-weight: 600;
    color: #fff;
}

/* Overtime Text */
.overtime-text {
    font-size: 12px;
    color: #9CA3AF;
}

/* Overtime and Mileage Content - ensure text is visible in dark sidebar */
.overtime-content,
.mileage-content {
    color: #D1D5DB;
    font-size: 12px;
    white-space: nowrap;
}

.overtime-content .breakout-item,
.overtime-content span,
.mileage-content span,
.mileage-content div {
    color: #D1D5DB;
}

.overtime-content .breakout-item span:last-child,
.mileage-content div span:last-child {
    color: #fff;
    font-weight: 600;
}

/* Billed Lunch Content */
.billed-lunch-content {
    color: #D1D5DB;
    font-size: 12px;
    white-space: nowrap;
}

.billed-lunch-content .breakout-item,
.billed-lunch-content span,
.billed-lunch-content div {
    color: #D1D5DB;
}

.billed-lunch-content .breakout-item span:last-child {
    color: #fff;
    font-weight: 600;
}

/* Flagged Items */
.flagged-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 11px;
    border-bottom: 1px solid var(--border-dark);
    white-space: nowrap;
    gap: 12px;
}

.flagged-item:last-child {
    border-bottom: none;
}

.flagged-info {
    color: #D1D5DB;
}

.flagged-type {
    color: #A0A0A0 !important;
    margin-left: 6px;
}

.view-link {
    color: #C0C0C0;
    text-decoration: none;
    font-weight: 500;
    cursor: default;
}


/* Mileage Details */
.mileage-detail-item {
    margin-bottom: 12px;
}

.mileage-value-large {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    display: block;
}

.mileage-label {
    font-size: 11px;
    color: #9CA3AF;
}

.mileage-breakdown {
    padding-top: 0;
}

.mileage-weeks {
    display: flex;
    gap: 16px;
}

.mileage-week {
    flex: 1;
}

.mileage-week-title {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    margin-bottom: 4px;
}

.mileage-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 11px;
}

.mileage-item .name {
    color: #9CA3AF;
}

.mileage-item .value {
    font-weight: 600;
    color: #fff;
}


/* ========== PRINT ========== */
@media print {
    .left-sidebar, .right-sidebar, .toolbar-spacer, .summary-header, .version-watermark, .context-menu, .modal-overlay {
        display: none !important;
    }
    .app-container { display: block; }
    .main-content { height: auto; overflow: visible; }
    .content-area { overflow: visible; padding: 0; }
}