@import '_content/HGOV.ADOReporting.NL2SQL.Blazor/HGOV.ADOReporting.NL2SQL.Blazor.s5lmns0fu4.bundle.scp.css';

/* /Components/AdjustAllocationsForecastDialog.razor.rz.scp.css */
.dialog-backdrop[b-8tl63k2keq] {
    position: fixed;
    inset: 0;
    background: var(--dialog-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.adjust-forecast-dialog[b-8tl63k2keq] {
    background: var(--dialog-bg);
    border-radius: 12px;
    box-shadow: var(--dialog-shadow);
    width: 800px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--dialog-header-purple);
    color: white;
}

.dialog-header h3[b-8tl63k2keq] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-header .btn-close[b-8tl63k2keq] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    opacity: 0.8;
}

.dialog-header .btn-close:hover[b-8tl63k2keq] {
    opacity: 1;
}

.dialog-body[b-8tl63k2keq] {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dialog-description[b-8tl63k2keq] {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.buffer-setting[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.buffer-setting label[b-8tl63k2keq] {
    font-weight: 500;
    color: var(--text-secondary);
}

.buffer-input-row[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buffer-input[b-8tl63k2keq] {
    width: 70px;
    text-align: center;
    padding: 0.4rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.buffer-hint[b-8tl63k2keq] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.select-all-row[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.checkbox-label[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.adjustment-count[b-8tl63k2keq] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.adjustments-table[b-8tl63k2keq] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.table-header[b-8tl63k2keq] {
    display: grid;
    grid-template-columns: 40px 1.5fr 1.2fr 100px 30px 100px 80px;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.table-body[b-8tl63k2keq] {
    max-height: 300px;
    overflow-y: auto;
}

.table-row[b-8tl63k2keq] {
    display: grid;
    grid-template-columns: 40px 1.5fr 1.2fr 100px 30px 100px 80px;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    font-size: 0.9rem;
}

.table-row:last-child[b-8tl63k2keq] {
    border-bottom: none;
}

.table-row:hover[b-8tl63k2keq] {
    background: var(--bg-secondary);
}

.table-row.selected[b-8tl63k2keq] {
    background: var(--selected-row-highlight);
}

.table-row.no-change[b-8tl63k2keq] {
    opacity: 0.6;
}

.col-project[b-8tl63k2keq], .col-resource[b-8tl63k2keq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-arrow[b-8tl63k2keq] {
    text-align: center;
    color: var(--text-muted);
}

.col-suggested.earlier[b-8tl63k2keq] {
    color: var(--success-text);
    font-weight: 500;
}

.col-savings[b-8tl63k2keq] {
    text-align: right;
    color: var(--text-muted);
}

.col-savings.high-savings[b-8tl63k2keq] {
    color: var(--success-text);
    font-weight: 600;
}

.no-change-icon[b-8tl63k2keq] {
    color: var(--text-muted);
}

.summary-section[b-8tl63k2keq] {
    display: flex;
    gap: 2rem;
    padding: 1rem 1.25rem;
    background: var(--total-with-buffer-bg);
    border-radius: 8px;
    border: 1px solid var(--success-color);
}

.summary-item[b-8tl63k2keq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-8tl63k2keq] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.summary-value[b-8tl63k2keq] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-value.highlight[b-8tl63k2keq] {
    color: var(--success-text);
}

.no-adjustments[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    background: var(--success-bg);
    border-radius: 8px;
    color: var(--success-text);
    font-size: 1rem;
}

.no-adjustments .oi[b-8tl63k2keq] {
    font-size: 1.5rem;
}

.dialog-footer[b-8tl63k2keq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    gap: 0.75rem;
}

.dialog-footer .btn[b-8tl63k2keq] {
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dialog-footer .btn-primary[b-8tl63k2keq] {
    background: var(--dialog-header-purple);
    border: none;
}

.dialog-footer .btn-primary:hover:not(:disabled)[b-8tl63k2keq] {
    filter: brightness(0.9);
}

.dialog-footer .btn-primary:disabled[b-8tl63k2keq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/AdjustResourceDatesDialog.razor.rz.scp.css */
.dialog-backdrop[b-sojku0qoam] {
    position: fixed;
    inset: 0;
    background: var(--dialog-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.adjust-dates-dialog[b-sojku0qoam] {
    background: var(--dialog-bg);
    border-radius: 12px;
    box-shadow: var(--dialog-shadow);
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header[b-sojku0qoam] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--dialog-header-primary);
    color: var(--text-on-primary);
}

.dialog-header h3[b-sojku0qoam] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-header .btn-close[b-sojku0qoam] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-on-primary);
    cursor: pointer;
    opacity: 0.8;
}

.dialog-header .btn-close:hover[b-sojku0qoam] {
    opacity: 1;
}

.dialog-body[b-sojku0qoam] {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.date-inputs-section[b-sojku0qoam] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.date-input-group[b-sojku0qoam] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.date-input-group label[b-sojku0qoam] {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.date-input-group input[b-sojku0qoam] {
    width: 160px;
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.quick-dates[b-sojku0qoam] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.quick-dates .btn[b-sojku0qoam] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.quick-dates .date-hint[b-sojku0qoam] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.update-options[b-sojku0qoam] {
    display: flex;
    gap: 1.5rem;
}

.option-label[b-sojku0qoam] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.resources-section[b-sojku0qoam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-header[b-sojku0qoam] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-header h5[b-sojku0qoam] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.select-controls[b-sojku0qoam] {
    display: flex;
    gap: 0.5rem;
}

.select-controls .btn-link[b-sojku0qoam] {
    padding: 0;
    font-size: 0.85rem;
}

.resources-list[b-sojku0qoam] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.resource-row[b-sojku0qoam] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.resource-row:last-child[b-sojku0qoam] {
    border-bottom: none;
}

.resource-row:hover[b-sojku0qoam] {
    background: var(--bg-secondary);
}

.resource-row.selected[b-sojku0qoam] {
    background: var(--selected-row-highlight);
}

.resource-row.no-change[b-sojku0qoam] {
    opacity: 0.7;
}

.resource-row.will-change.selected[b-sojku0qoam] {
    background: var(--will-change-highlight);
}

.resource-checkbox[b-sojku0qoam] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    min-width: 0;
}

.resource-name[b-sojku0qoam] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resource-dates[b-sojku0qoam] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.current-dates[b-sojku0qoam] {
    white-space: nowrap;
}

.arrow[b-sojku0qoam] {
    color: var(--primary-color);
    font-weight: bold;
}

.new-dates[b-sojku0qoam] {
    color: var(--success-text);
    font-weight: 500;
    white-space: nowrap;
}

.summary-section[b-sojku0qoam] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.summary-text[b-sojku0qoam] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.dialog-footer[b-sojku0qoam] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    gap: 0.75rem;
}

.dialog-footer .btn[b-sojku0qoam] {
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dialog-footer .btn-primary[b-sojku0qoam] {
    background: var(--dialog-header-primary);
    border: none;
}

.dialog-footer .btn-primary:hover:not(:disabled)[b-sojku0qoam] {
    filter: brightness(0.9);
}

.dialog-footer .btn-primary:disabled[b-sojku0qoam] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/CapacityAllocations.razor.rz.scp.css */
/* ========================================
   PORTFOLIO ALLOCATIONS COMPONENT
   ======================================== */

.portfolio-allocations[b-nn1s1zy9ef] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.empty-state[b-nn1s1zy9ef] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
}

.empty-state i[b-nn1s1zy9ef] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Header */
.allocations-header[b-nn1s1zy9ef] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.allocations-filter[b-nn1s1zy9ef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.allocations-filter label[b-nn1s1zy9ef] {
    font-size: 0.875rem;
    margin: 0;
}

.allocations-filter select[b-nn1s1zy9ef] {
    width: 200px;
}

/* Table */
.allocations-table-wrapper[b-nn1s1zy9ef] {
    flex: 1;
    overflow: auto;
}

.allocations-table[b-nn1s1zy9ef] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.allocations-table th[b-nn1s1zy9ef],
.allocations-table td[b-nn1s1zy9ef] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.allocations-table thead th[b-nn1s1zy9ef] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 5;
}

.allocations-table tbody tr:hover[b-nn1s1zy9ef] {
    background: var(--bg-secondary);
}

/* Columns */
.col-resource[b-nn1s1zy9ef] { min-width: 160px; }
.col-project[b-nn1s1zy9ef] { min-width: 160px; }
.col-workstream[b-nn1s1zy9ef] { min-width: 120px; }
.col-date[b-nn1s1zy9ef] { min-width: 100px; white-space: nowrap; }
.col-allocation[b-nn1s1zy9ef] { min-width: 150px; }
.col-source[b-nn1s1zy9ef] { min-width: 80px; text-align: center; }
.col-actions[b-nn1s1zy9ef] { min-width: 80px; text-align: center; }

/* Resource Cell */
.resource-name[b-nn1s1zy9ef] {
    font-weight: 500;
    display: block;
    color: var(--text-primary);
}

.resource-role[b-nn1s1zy9ef] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Project Cell */
.project-name[b-nn1s1zy9ef] {
    font-weight: 500;
    color: var(--text-primary);
}

/* Allocation Bar */
.allocation-bar-container[b-nn1s1zy9ef] {
    width: 80px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.allocation-bar[b-nn1s1zy9ef] {
    height: 100%;
    transition: width 0.3s;
}

.allocation-bar.low[b-nn1s1zy9ef] { background: var(--allocation-bar-low); }
.allocation-bar.medium[b-nn1s1zy9ef] { background: var(--allocation-bar-medium); }
.allocation-bar.high[b-nn1s1zy9ef] { background: var(--allocation-bar-high); }
.allocation-bar.over[b-nn1s1zy9ef] { background: var(--allocation-bar-over); }

.allocation-value[b-nn1s1zy9ef] {
    font-weight: 500;
    margin-left: 0.5rem;
    color: var(--text-primary);
}

/* Source Badge */
.source-badge[b-nn1s1zy9ef] {
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.source-badge.auto[b-nn1s1zy9ef] {
    background: var(--badge-auto-bg);
    color: var(--badge-auto-text);
}

.source-badge.manual[b-nn1s1zy9ef] {
    background: var(--badge-manual-bg);
    color: var(--badge-manual-text);
}

/* Action Buttons */
.btn-icon[b-nn1s1zy9ef] {
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

.btn-icon i[b-nn1s1zy9ef] {
    font-size: 0.8rem;
}

.btn-danger[b-nn1s1zy9ef] {
    color: var(--danger-color);
}

.btn-danger:hover[b-nn1s1zy9ef] {
    background: var(--danger-bg);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .portfolio-allocations[b-nn1s1zy9ef] {
        height: auto;
        min-height: 300px;
    }

    /* Header - Stack vertically */
    .allocations-header[b-nn1s1zy9ef] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.375rem 0;
    }

    .allocations-filter[b-nn1s1zy9ef] {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .allocations-filter label[b-nn1s1zy9ef] {
        font-size: 0.75rem;
    }

    .allocations-filter select[b-nn1s1zy9ef] {
        width: 100%;
        min-height: 40px;
    }

    /* Table - Horizontal scroll */
    .allocations-table-wrapper[b-nn1s1zy9ef] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .allocations-table[b-nn1s1zy9ef] {
        font-size: 0.75rem;
        min-width: 600px;
    }

    .allocations-table th[b-nn1s1zy9ef],
    .allocations-table td[b-nn1s1zy9ef] {
        padding: 0.4rem 0.375rem;
    }

    /* Column sizing */
    .col-resource[b-nn1s1zy9ef] { min-width: 120px; }
    .col-project[b-nn1s1zy9ef] { min-width: 120px; }
    .col-workstream[b-nn1s1zy9ef] { min-width: 80px; }
    .col-date[b-nn1s1zy9ef] { min-width: 75px; }
    .col-allocation[b-nn1s1zy9ef] { min-width: 100px; }
    .col-source[b-nn1s1zy9ef] { min-width: 60px; }
    .col-actions[b-nn1s1zy9ef] { min-width: 60px; }

    .resource-name[b-nn1s1zy9ef] {
        font-size: 0.6875rem;
    }

    .resource-role[b-nn1s1zy9ef] {
        font-size: 0.625rem;
    }

    .project-name[b-nn1s1zy9ef] {
        font-size: 0.6875rem;
    }

    .allocation-bar-container[b-nn1s1zy9ef] {
        width: 60px;
        height: 6px;
    }

    .allocation-value[b-nn1s1zy9ef] {
        font-size: 0.6875rem;
    }

    .source-badge[b-nn1s1zy9ef] {
        font-size: 0.625rem;
        padding: 0.1rem 0.3rem;
    }

    .btn-icon[b-nn1s1zy9ef] {
        padding: 0.2rem 0.3rem;
    }

    .btn-icon i[b-nn1s1zy9ef] {
        font-size: 0.7rem;
    }

    /* Empty state */
    .empty-state[b-nn1s1zy9ef] {
        height: 150px;
    }

    .empty-state i[b-nn1s1zy9ef] {
        font-size: 1.5rem;
    }

    .empty-state p[b-nn1s1zy9ef] {
        font-size: 0.8125rem;
    }
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/CapacityForecasts.razor.rz.scp.css */
/* ========================================
   PORTFOLIO FORECASTS COMPONENT
   ======================================== */

.portfolio-forecasts[b-s51d8c13d6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.empty-state[b-s51d8c13d6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
}

.empty-state i[b-s51d8c13d6] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Header */
.forecasts-header[b-s51d8c13d6] {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.forecast-summary[b-s51d8c13d6] {
    display: flex;
    gap: 1.5rem;
}

.summary-item[b-s51d8c13d6] {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.summary-item.green[b-s51d8c13d6] { color: var(--success-text); }
.summary-item.yellow[b-s51d8c13d6] { color: var(--warning-text); }
.summary-item.red[b-s51d8c13d6] { color: var(--danger-text); }

/* Table */
.forecasts-table-wrapper[b-s51d8c13d6] {
    flex: 1;
    overflow: auto;
}

.forecasts-table[b-s51d8c13d6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.forecasts-table th[b-s51d8c13d6],
.forecasts-table td[b-s51d8c13d6] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.forecasts-table thead th[b-s51d8c13d6] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 5;
}

.forecasts-table tbody tr[b-s51d8c13d6] {
    cursor: pointer;
    transition: background 0.2s;
}

.forecasts-table tbody tr:hover[b-s51d8c13d6] {
    background: var(--bg-secondary);
}

.forecasts-table tbody tr.green[b-s51d8c13d6] { border-left: 3px solid var(--success-color); }
.forecasts-table tbody tr.yellow[b-s51d8c13d6] { border-left: 3px solid var(--warning-color); }
.forecasts-table tbody tr.red[b-s51d8c13d6] { border-left: 3px solid var(--danger-color); }

/* Columns */
.col-project[b-s51d8c13d6] { min-width: 160px; }
.col-date[b-s51d8c13d6] { min-width: 75px; white-space: nowrap; font-size: 0.8rem; }
.col-phase[b-s51d8c13d6] { min-width: 100px; }
.col-variance[b-s51d8c13d6] { min-width: 70px; }
.col-hours[b-s51d8c13d6] { min-width: 65px; text-align: right; }
.col-resources[b-s51d8c13d6] { min-width: 60px; text-align: center; }
.col-confidence[b-s51d8c13d6] { min-width: 100px; }
.col-risk[b-s51d8c13d6] { min-width: 60px; text-align: center; }

/* Project Cell */
.project-name[b-s51d8c13d6] {
    font-weight: 500;
    display: block;
    color: var(--text-primary);
}

.project-code[b-s51d8c13d6] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.no-target[b-s51d8c13d6], .no-date[b-s51d8c13d6], .no-phases[b-s51d8c13d6] {
    color: var(--text-muted);
    font-style: italic;
}

/* Date styling */
.calculated-date[b-s51d8c13d6] {
    color: var(--text-secondary);
}

.projected-date[b-s51d8c13d6] {
    font-weight: 600;
    color: var(--primary-color);
}

/* Phase Badges */
.phase-badges[b-s51d8c13d6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.phase-badge[b-s51d8c13d6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.phase-badge.stabilization[b-s51d8c13d6] {
    background: var(--stabilization-bg);
    color: var(--stabilization-text);
    border: 1px solid var(--stabilization-border);
}

.phase-badge.buffer[b-s51d8c13d6] {
    background: var(--buffer-active-bg);
    color: var(--buffer-text);
    border: 1px solid var(--buffer-border);
}

/* Resource count */
.resource-count[b-s51d8c13d6] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Capacity reduction indicator */
.capacity-reduction[b-s51d8c13d6] {
    color: var(--warning-text);
    font-weight: bold;
    margin-left: 2px;
}

/* Variance */
.col-variance.on-track[b-s51d8c13d6] { color: var(--success-text); }
.col-variance.slight-delay[b-s51d8c13d6] { color: var(--warning-text); }
.col-variance.major-delay[b-s51d8c13d6] { color: var(--danger-text); font-weight: 600; }

/* Confidence Bar */
.confidence-bar[b-s51d8c13d6] {
    width: 60px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.confidence-fill[b-s51d8c13d6] {
    height: 100%;
    transition: width 0.3s;
}

.confidence-fill.high[b-s51d8c13d6] { background: var(--success-color); }
.confidence-fill.medium[b-s51d8c13d6] { background: var(--warning-color); }
.confidence-fill.low[b-s51d8c13d6] { background: var(--danger-color); }

.confidence-value[b-s51d8c13d6] {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    color: var(--text-secondary);
}

/* Risk Badge */
.risk-badge[b-s51d8c13d6] {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.risk-badge.green[b-s51d8c13d6] { background: var(--health-ok-bg); color: var(--health-ok-text); }
.risk-badge.yellow[b-s51d8c13d6] { background: var(--health-risk-bg); color: var(--health-risk-text); }
.risk-badge.red[b-s51d8c13d6] { background: var(--health-over-bg); color: var(--health-over-text); }

/* Risk Factors Row */
.risk-factors-row td[b-s51d8c13d6] {
    padding: 0.25rem 0.75rem !important;
    background: var(--warning-bg);
    border-left: 3px solid var(--warning-color);
}

.risk-factors[b-s51d8c13d6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--warning-text);
}

.risk-factor[b-s51d8c13d6] {
    background: var(--health-risk-bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .portfolio-forecasts[b-s51d8c13d6] {
        height: auto;
        min-height: 300px;
    }

    /* Header */
    .forecasts-header[b-s51d8c13d6] {
        padding: 0.375rem 0;
    }

    .forecast-summary[b-s51d8c13d6] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .summary-item[b-s51d8c13d6] {
        font-size: 0.75rem;
    }

    /* Table - Horizontal scroll */
    .forecasts-table-wrapper[b-s51d8c13d6] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .forecasts-table[b-s51d8c13d6] {
        font-size: 0.75rem;
        min-width: 700px;
    }

    .forecasts-table th[b-s51d8c13d6],
    .forecasts-table td[b-s51d8c13d6] {
        padding: 0.4rem 0.375rem;
    }

    /* Column sizing */
    .col-project[b-s51d8c13d6] { min-width: 120px; }
    .col-date[b-s51d8c13d6] { min-width: 65px; font-size: 0.6875rem; }
    .col-phase[b-s51d8c13d6] { min-width: 80px; }
    .col-variance[b-s51d8c13d6] { min-width: 60px; }
    .col-hours[b-s51d8c13d6] { min-width: 55px; }
    .col-resources[b-s51d8c13d6] { min-width: 50px; }
    .col-confidence[b-s51d8c13d6] { min-width: 80px; }
    .col-risk[b-s51d8c13d6] { min-width: 50px; }

    .project-name[b-s51d8c13d6] {
        font-size: 0.6875rem;
    }

    .project-code[b-s51d8c13d6] {
        font-size: 0.625rem;
    }

    .calculated-date[b-s51d8c13d6],
    .projected-date[b-s51d8c13d6] {
        font-size: 0.625rem;
    }

    /* Phase badges */
    .phase-badge[b-s51d8c13d6] {
        font-size: 0.625rem;
        padding: 1px 4px;
    }

    .resource-count[b-s51d8c13d6] {
        font-size: 0.6875rem;
    }

    /* Confidence bar */
    .confidence-bar[b-s51d8c13d6] {
        width: 50px;
        height: 6px;
    }

    .confidence-value[b-s51d8c13d6] {
        font-size: 0.625rem;
    }

    /* Risk badge */
    .risk-badge[b-s51d8c13d6] {
        font-size: 0.625rem;
        padding: 0.15rem 0.375rem;
    }

    /* Risk factors row */
    .risk-factors-row td[b-s51d8c13d6] {
        padding: 0.2rem 0.375rem !important;
    }

    .risk-factors[b-s51d8c13d6] {
        flex-wrap: wrap;
        font-size: 0.6875rem;
    }

    .risk-factor[b-s51d8c13d6] {
        padding: 0.1rem 0.3rem;
    }

    /* Empty state */
    .empty-state[b-s51d8c13d6] {
        height: 150px;
    }

    .empty-state i[b-s51d8c13d6] {
        font-size: 1.5rem;
    }

    .empty-state p[b-s51d8c13d6] {
        font-size: 0.8125rem;
    }
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/CapacityGantt.razor.rz.scp.css */
/* ========================================
   PORTFOLIO GANTT CHART COMPONENT
   ======================================== */

.portfolio-gantt[b-hbgyz5bcov] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.empty-state[b-hbgyz5bcov] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

.empty-state i[b-hbgyz5bcov] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Header */
.gantt-header[b-hbgyz5bcov] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.gantt-controls[b-hbgyz5bcov] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gantt-controls .date-range-label[b-hbgyz5bcov] {
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}

.gantt-legend[b-hbgyz5bcov] {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
}

.legend-item[b-hbgyz5bcov] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dot[b-hbgyz5bcov] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.green[b-hbgyz5bcov] { background: var(--status-dot-green); }
.dot.yellow[b-hbgyz5bcov] { background: var(--status-dot-yellow); }
.dot.red[b-hbgyz5bcov] { background: var(--status-dot-red); }

/* Container */
.gantt-container[b-hbgyz5bcov] {
    display: flex;
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Projects Panel */
.gantt-projects[b-hbgyz5bcov] {
    width: 460px;
    flex-shrink: 0;
    border-right: 2px solid var(--border-color);
    overflow-y: auto;
}

.gantt-projects-header[b-hbgyz5bcov] {
    display: flex;
    align-items: center;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    position: sticky;
    top: 0;
    gap: 0.5rem;
}

.gantt-projects-header .col-project[b-hbgyz5bcov] { width: 220px; }
.gantt-projects-header .col-dates[b-hbgyz5bcov] { width: 110px; }
.gantt-projects-header .col-resources[b-hbgyz5bcov] { width: 80px; text-align: center; }
.gantt-projects-header .col-status[b-hbgyz5bcov] { width: 90px; text-align: center; }

.gantt-project-row[b-hbgyz5bcov] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    height: 44px;
    gap: 0.5rem;
}

.gantt-project-row:hover[b-hbgyz5bcov] {
    background: var(--bg-secondary);
}

.gantt-project-row.selected[b-hbgyz5bcov] {
    background: var(--selected-row-bg);
}

.gantt-project-row .col-project[b-hbgyz5bcov] {
    width: 220px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gantt-project-row .col-dates[b-hbgyz5bcov] {
    width: 110px;
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
}

.gantt-project-row .col-resources[b-hbgyz5bcov] {
    width: 80px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gantt-project-row .col-status[b-hbgyz5bcov] {
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.project-name[b-hbgyz5bcov] {
    font-weight: 500;
    font-size: 0.8rem;
    white-space: normal;
    word-wrap: break-word;
}

.project-manager[b-hbgyz5bcov] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.date-range[b-hbgyz5bcov] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.calculated-dates-row[b-hbgyz5bcov] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.calculated-date[b-hbgyz5bcov] {
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.calculated-date.dev[b-hbgyz5bcov] {
    color: var(--calc-date-dev);
}

.calculated-date.projected[b-hbgyz5bcov] {
    color: var(--calc-date-projected);
}

.projected-date[b-hbgyz5bcov] {
    font-size: 0.65rem;
    color: var(--primary-color);
    font-weight: 600;
}

.target-date[b-hbgyz5bcov] {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.target-date.overdue[b-hbgyz5bcov] {
    color: var(--danger-color);
    font-weight: 500;
}

.resource-count[b-hbgyz5bcov] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 100%;
}

.resource-count i[b-hbgyz5bcov] {
    font-size: 0.7rem;
}

.progress-text[b-hbgyz5bcov] {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.status-badge[b-hbgyz5bcov] {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-weight: 500;
}

.status-badge.green[b-hbgyz5bcov] { background: var(--heatmap-green-bg); color: var(--heatmap-green-text); }
.status-badge.yellow[b-hbgyz5bcov] { background: var(--heatmap-yellow-bg); color: var(--heatmap-yellow-text); }
.status-badge.red[b-hbgyz5bcov] { background: var(--heatmap-red-bg); color: var(--heatmap-red-text); }

/* Timeline Panel */
.gantt-timeline[b-hbgyz5bcov] {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    background: var(--bg-primary);
}

.timeline-header[b-hbgyz5bcov] {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 5;
}

.month-header[b-hbgyz5bcov] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    border-right: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Timeline Content Area (for percentage-based positioning) */
.timeline-content[b-hbgyz5bcov] {
    position: relative;
    min-height: 200px;
    overflow: visible;
}

.timeline-body[b-hbgyz5bcov] {
    position: relative;
    min-height: 200px;
    overflow: visible;
    background: var(--bg-primary);
}

/* Vertical Grid Lines (flex-based) */
.grid-lines[b-hbgyz5bcov] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
    z-index: 1;
}

.grid-line-cell[b-hbgyz5bcov] {
    height: 100%;
    border-right: 1px solid var(--timeline-cell-border);
}

.grid-line-cell:last-child[b-hbgyz5bcov] {
    border-right: none;
}

.today-line[b-hbgyz5bcov] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--danger-color);
    z-index: 10;
}

/* Dependency Arrows SVG */
.dependency-arrows[b-hbgyz5bcov] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 5;
}

.gantt-bar-row[b-hbgyz5bcov] {
    position: relative;
    height: 44px;
    border-bottom: 1px solid var(--border-color);
    overflow: visible;
}

/* Gantt Bars */
.gantt-bar[b-hbgyz5bcov] {
    position: absolute;
    top: 8px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.2s;
    overflow: hidden;
}

/* Gantt bar inside popover wrapper - use relative positioning */
[b-hbgyz5bcov] .popover-wrapper {
    position: absolute;
    top: 8px;
    height: 28px;
    display: block;
}

[b-hbgyz5bcov] .popover-wrapper .popover-trigger {
    width: 100%;
    height: 100%;
    display: block;
}

[b-hbgyz5bcov] .popover-wrapper .gantt-bar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gantt-bar.green[b-hbgyz5bcov] { background: var(--success-color); border: 1px solid var(--status-dot-green); }
.gantt-bar.yellow[b-hbgyz5bcov] { background: var(--warning-color); border: 1px solid var(--status-dot-yellow); }
.gantt-bar.red[b-hbgyz5bcov] { background: var(--danger-color); border: 1px solid var(--status-dot-red); }

.gantt-bar:hover[b-hbgyz5bcov] {
    filter: brightness(0.9);
}

/* Red extension bar for overdue forecast */
.gantt-bar-extension[b-hbgyz5bcov] {
    position: absolute;
    top: 8px;
    height: 28px;
    background: var(--extension-bar-gradient);
    border-radius: 0 4px 4px 0;
    border: 2px solid var(--extension-bar-border);
    border-left: 2px dashed var(--danger-color);
    cursor: help;
    transition: all 0.2s ease;
    z-index: 2;
}

.gantt-bar-extension:hover[b-hbgyz5bcov] {
    transform: scaleY(1.1);
    box-shadow: var(--extension-bar-shadow);
    z-index: 10;
}

/* Striped pattern for extension bar */
.gantt-bar-extension[b-hbgyz5bcov]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--stripe-pattern-light);
    border-radius: 0 2px 2px 0;
}

.bar-progress[b-hbgyz5bcov] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--bar-progress-overlay);
    transition: width 0.3s;
}

.bar-label[b-hbgyz5bcov] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bar-label-color);
    padding-left: 4px;
}

.target-marker[b-hbgyz5bcov] {
    position: absolute;
    top: 14px;
    color: var(--info-color);
    font-size: 0.7rem;
    cursor: help;
    z-index: 5;
    transform: translateX(-50%);
}

/* Development Completion Marker */
.dev-complete-marker[b-hbgyz5bcov] {
    position: absolute;
    top: 4px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: help;
    z-index: 20;
    transform: translateX(-50%);
}

.dev-complete-marker .marker-line[b-hbgyz5bcov] {
    width: 2px;
    height: 28px;
    background: var(--calc-date-dev);
    border-radius: 1px;
}

.dev-complete-marker .marker-label[b-hbgyz5bcov] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--calc-date-dev);
    background: var(--bg-primary);
    border: 1px solid var(--calc-date-dev);
    border-radius: 3px;
    padding: 0 3px;
    line-height: 1.2;
    margin-top: -2px;
}

/* Projected Completion Marker */
.projected-complete-marker[b-hbgyz5bcov] {
    position: absolute;
    top: 4px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: help;
    z-index: 20;
    transform: translateX(-50%);
}

.projected-complete-marker .marker-line[b-hbgyz5bcov] {
    width: 2px;
    height: 28px;
    background: var(--calc-date-projected);
    border-radius: 1px;
}

.projected-complete-marker .marker-label[b-hbgyz5bcov] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--calc-date-projected);
    background: var(--bg-primary);
    border: 1px solid var(--calc-date-projected);
    border-radius: 3px;
    padding: 0 3px;
    line-height: 1.2;
    margin-top: -2px;
}

/* Legend markers for Dev Complete and Projected */
.legend-marker[b-hbgyz5bcov] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 4px;
}

.legend-marker.dev[b-hbgyz5bcov] {
    color: var(--calc-date-dev);
    background: var(--bg-primary);
    border: 1px solid var(--calc-date-dev);
}

.legend-marker.projected[b-hbgyz5bcov] {
    color: var(--calc-date-projected);
    background: var(--bg-primary);
    border: 1px solid var(--calc-date-projected);
}

.legend-marker.target[b-hbgyz5bcov] {
    color: var(--info-color);
    font-size: 0.7rem;
    border: none;
    width: auto;
}

/* Dependency Features */
.divider[b-hbgyz5bcov] {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 0.5rem;
}

.legend-item .arrow[b-hbgyz5bcov] {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Dependency Mode Bar */
.dependency-mode-bar[b-hbgyz5bcov] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.dependency-mode-bar i[b-hbgyz5bcov] {
    color: var(--warning-text);
}

/* Dependency Selection Classes */
.dependency-selectable[b-hbgyz5bcov] {
    cursor: crosshair !important;
}

.dependency-selectable .gantt-bar[b-hbgyz5bcov] {
    cursor: crosshair !important;
    animation: pulse-border-b-hbgyz5bcov 1.5s infinite;
}

.dependency-from[b-hbgyz5bcov] {
    cursor: not-allowed;
}

.dependency-from .gantt-bar[b-hbgyz5bcov] {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.gantt-project-row.dependency-from[b-hbgyz5bcov] {
    background: var(--info-bg);
}

.dependency-to-selectable[b-hbgyz5bcov] {
    cursor: crosshair !important;
}

.dependency-to-selectable .gantt-bar[b-hbgyz5bcov] {
    cursor: crosshair !important;
}

.dependency-to-selectable:hover .gantt-bar[b-hbgyz5bcov],
.dependency-to-selectable:hover[b-hbgyz5bcov] {
    background: var(--warning-bg);
    outline: 2px dashed var(--warning-color);
    outline-offset: 2px;
}

@keyframes pulse-border-b-hbgyz5bcov {
    0%, 100% { box-shadow: 0 0 0 0 var(--pulse-shadow-strong); }
    50% { box-shadow: 0 0 0 4px var(--pulse-shadow-light); }
}

/* Dependency Arrows SVG */
.dependency-arrows[b-hbgyz5bcov] {
    position: absolute;
    top: 36px; /* Account for header */
    left: 0;
    pointer-events: none;
    z-index: 4;
}

.dependency-arrow path[b-hbgyz5bcov] {
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
}

.dependency-arrow.finishtostart path[b-hbgyz5bcov] { stroke: var(--primary-color); }
.dependency-arrow.starttostart path[b-hbgyz5bcov] { stroke: var(--success-color); }
.dependency-arrow.finishtofinish path[b-hbgyz5bcov] { stroke: var(--warning-color); }
.dependency-arrow.starttofinish path[b-hbgyz5bcov] { stroke: var(--calc-date-projected); }

/* Toast Notification */
.gantt-toast[b-hbgyz5bcov] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 1000;
    animation: slideUp-b-hbgyz5bcov 0.3s ease-out;
}

.gantt-toast.success[b-hbgyz5bcov] {
    background: var(--status-dot-green);
    color: var(--text-on-primary);
}

.gantt-toast.error[b-hbgyz5bcov] {
    background: var(--status-dot-red);
    color: var(--text-on-primary);
}

@keyframes slideUp-b-hbgyz5bcov {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Drag and Drop Styles */
.gantt-bar.draggable[b-hbgyz5bcov] {
    cursor: grab;
}

.gantt-bar.draggable:active[b-hbgyz5bcov],
.gantt-bar.dragging[b-hbgyz5bcov] {
    cursor: grabbing;
    opacity: 0.8;
    box-shadow: var(--drag-shadow);
    z-index: 100;
}

.drag-handle[b-hbgyz5bcov] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    transition: background 0.2s;
}

.drag-handle:hover[b-hbgyz5bcov] {
    background: var(--drag-handle-hover);
}

.drag-handle.left[b-hbgyz5bcov] {
    left: 0;
    border-radius: 4px 0 0 4px;
}

.drag-handle.right[b-hbgyz5bcov] {
    right: 0;
    border-radius: 0 4px 4px 0;
}

.drag-info-tooltip[b-hbgyz5bcov] {
    position: fixed;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}

/* ========================================
   PROJECT PHASE BARS
   ======================================== */

/* Phase indicator in legend */
.phase-indicator[b-hbgyz5bcov] {
    width: 20px;
    height: 10px;
    border-radius: 2px;
}

.phase-indicator.stabilization[b-hbgyz5bcov] {
    background: transparent;
    border: 2px dashed var(--stabilization-border-color);
}

.phase-indicator.buffer[b-hbgyz5bcov] {
    background: var(--buffer-gradient);
    border: 1px solid var(--buffer-border-color);
}

/* Phase dates in project list */
.phase-dates[b-hbgyz5bcov] {
    font-size: 0.65rem;
    color: var(--stabilization-text);
    font-style: italic;
}

/* Phase bars on timeline */
.gantt-bar-phase[b-hbgyz5bcov] {
    position: absolute;
    top: 3px;
    height: 28px;
    border-radius: 4px;
    cursor: help;
    transition: all 0.2s ease;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gantt-bar-phase .phase-label[b-hbgyz5bcov] {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Stabilization Phase Bar - Outline only */
.gantt-bar-phase.stabilization[b-hbgyz5bcov] {
    background: transparent;
    border: 3px dashed var(--stabilization-border-color);
    border-bottom-width: 5px;
}

.gantt-bar-phase.stabilization:hover[b-hbgyz5bcov] {
    background: var(--stabilization-hover-bg);
    box-shadow: var(--stabilization-hover-shadow);
    z-index: 10;
}

/* Buffer Phase Bar */
.gantt-bar-phase.buffer[b-hbgyz5bcov] {
    background: var(--buffer-gradient);
    border: 2px solid var(--buffer-border-color);
    border-left: 2px dashed var(--buffer-border-dark);
}

.gantt-bar-phase.buffer:hover[b-hbgyz5bcov] {
    transform: scaleY(1.1);
    box-shadow: var(--buffer-hover-shadow);
    z-index: 10;
}

/* Diagonal stripes for buffer */
.gantt-bar-phase.buffer[b-hbgyz5bcov]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--buffer-stripe-pattern);
    border-radius: 2px;
}

/* ========================================
   GANTT BAR TOOLTIPS (CSS-based)
   ======================================== */

.gantt-bar[data-tooltip][b-hbgyz5bcov] {
    position: relative;
    cursor: pointer;
}

.gantt-bar[data-tooltip]:hover[b-hbgyz5bcov]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: normal;
    text-align: left;
    white-space: pre-line;
    min-width: 220px;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 8px;
    line-height: 1.5;
    pointer-events: none;
}

/* Arrow for tooltip (pointing down) */
.gantt-bar[data-tooltip]:hover[b-hbgyz5bcov]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    border: 8px solid transparent;
    border-top-color: var(--tooltip-bg);
    margin-bottom: -6px;
    pointer-events: none;
}

/* Adjust tooltip position for bars near left edge */
.gantt-bar[data-tooltip][style*="left: 0"][b-hbgyz5bcov],
.gantt-bar[data-tooltip][style*="left:0"][b-hbgyz5bcov] {
    /* Tooltip stays centered, but could add special handling if needed */
}

/* Phase popover styles */
[b-hbgyz5bcov] .phase-popover {
    min-width: 200px;
}

[b-hbgyz5bcov] .phase-popover-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

[b-hbgyz5bcov] .phase-popover-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-hbgyz5bcov] .phase-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

[b-hbgyz5bcov] .phase-label-text {
    color: var(--text-secondary);
}

[b-hbgyz5bcov] .phase-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Phase popover wrapper - positioned container for phase bars */
.phase-popover-wrapper[b-hbgyz5bcov] {
    position: absolute;
    top: 6px;
    height: 28px;
}

.phase-popover-wrapper[b-hbgyz5bcov]  .simple-popover-wrapper {
    width: 100%;
    height: 100%;
}

.phase-popover-wrapper[b-hbgyz5bcov]  .simple-popover-trigger {
    width: 100%;
    height: 100%;
}

.phase-popover-wrapper .gantt-bar-phase[b-hbgyz5bcov] {
    position: relative;
    left: 0 !important;
    width: 100% !important;
    height: 100%;
}

/* Resource popover styles */
[b-hbgyz5bcov] .resource-popover {
    width: fit-content;
    min-width: 220px;
}

[b-hbgyz5bcov] .resource-popover-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

[b-hbgyz5bcov] .resource-popover-body {
    display: table;
    border-collapse: separate;
    border-spacing: 0 4px;
}

[b-hbgyz5bcov] .resource-row {
    display: table-row;
}

[b-hbgyz5bcov] .resource-row > span {
    display: table-cell;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    white-space: nowrap;
    vertical-align: middle;
}

[b-hbgyz5bcov] .resource-row > span:first-child {
    border-radius: 4px 0 0 4px;
}

[b-hbgyz5bcov] .resource-row > span:last-child {
    border-radius: 0 4px 4px 0;
}

[b-hbgyz5bcov] .resource-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8rem;
}

[b-hbgyz5bcov] .resource-team {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

[b-hbgyz5bcov] .resource-alloc {
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: 500;
    font-family: monospace;
    text-align: right;
}

[b-hbgyz5bcov] .resource-popover-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
    padding: 8px;
}

/* Make resource count clickable-looking */
.col-resources .resource-count[b-hbgyz5bcov] {
    cursor: pointer;
}

.col-resources .resource-count:hover[b-hbgyz5bcov] {
    color: var(--primary-color);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .portfolio-gantt[b-hbgyz5bcov] {
        height: auto;
        min-height: 400px;
        margin: -0.625rem;
    }

    /* Header - Compact layout */
    .gantt-header[b-hbgyz5bcov] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
        padding: 0.5rem;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .gantt-controls[b-hbgyz5bcov] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.375rem;
        width: 100%;
    }

    .gantt-controls .date-range-label[b-hbgyz5bcov] {
        font-size: 0.75rem;
        min-width: 100px;
        text-align: center;
        padding: 0.25rem 0.5rem;
    }

    .gantt-controls .btn[b-hbgyz5bcov] {
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Hide button text on mobile, show only icons */
    .gantt-controls .btn .btn-text[b-hbgyz5bcov] {
        display: none;
    }

    .gantt-legend[b-hbgyz5bcov] {
        display: none; /* Hide legend on mobile to save space */
    }

    .divider[b-hbgyz5bcov] {
        display: none;
    }

    /* Container - Horizontal scroll */
    .gantt-container[b-hbgyz5bcov] {
        flex-direction: column;
        overflow: visible;
    }

    /* Projects Panel - Full width, scrollable table */
    .gantt-projects[b-hbgyz5bcov] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 200px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .gantt-projects[b-hbgyz5bcov]::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }

    .gantt-projects[b-hbgyz5bcov]::-webkit-scrollbar-thumb {
        background: var(--text-muted);
        border-radius: 2px;
    }

    .gantt-projects-header[b-hbgyz5bcov] {
        min-width: 320px;
        padding: 0.375rem;
        font-size: 0.625rem;
        position: sticky;
        top: 0;
        background: var(--bg-tertiary);
        z-index: 5;
    }

    .gantt-projects-header .col-project[b-hbgyz5bcov] { width: 140px; }
    .gantt-projects-header .col-dates[b-hbgyz5bcov] { width: 100px; }
    .gantt-projects-header .col-resources[b-hbgyz5bcov] { width: 50px; }
    .gantt-projects-header .col-status[b-hbgyz5bcov] { display: none; }

    .gantt-project-row[b-hbgyz5bcov] {
        min-width: 320px;
        padding: 0.25rem 0.375rem;
        height: 36px;
        gap: 0.25rem;
    }

    .gantt-project-row .col-project[b-hbgyz5bcov] {
        width: 140px;
    }

    .gantt-project-row .col-dates[b-hbgyz5bcov] {
        width: 100px;
    }

    .gantt-project-row .col-resources[b-hbgyz5bcov] {
        width: 50px;
    }

    .gantt-project-row .col-status[b-hbgyz5bcov] {
        display: none;
    }

    .project-name[b-hbgyz5bcov] {
        font-size: 0.6875rem;
    }

    .project-manager[b-hbgyz5bcov] {
        display: none;
    }

    .date-range[b-hbgyz5bcov] {
        font-size: 0.625rem;
    }

    .calculated-date[b-hbgyz5bcov] {
        font-size: 0.5625rem;
    }

    .calculated-dates-row[b-hbgyz5bcov] {
        display: none;
    }

    .resource-count[b-hbgyz5bcov] {
        font-size: 0.6875rem;
    }

    .resource-count i[b-hbgyz5bcov] {
        font-size: 0.625rem;
    }

    .progress-text[b-hbgyz5bcov] {
        display: none;
    }

    .status-badge[b-hbgyz5bcov] {
        font-size: 0.5625rem;
        padding: 0.0625rem 0.25rem;
    }

    /* Timeline Panel - Horizontal scroll with visible scrollbar */
    .gantt-timeline[b-hbgyz5bcov] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 200px;
        scrollbar-width: thin;
    }

    .gantt-timeline[b-hbgyz5bcov]::-webkit-scrollbar {
        height: 6px;
    }

    .gantt-timeline[b-hbgyz5bcov]::-webkit-scrollbar-thumb {
        background: var(--text-muted);
        border-radius: 3px;
    }

    .timeline-header[b-hbgyz5bcov] {
        min-width: 500px;
    }

    .month-header[b-hbgyz5bcov] {
        min-width: 50px;
        padding: 0.25rem;
        font-size: 0.625rem;
    }

    .timeline-body[b-hbgyz5bcov] {
        min-width: 500px;
    }

    .gantt-bar-row[b-hbgyz5bcov] {
        height: 36px;
    }

    .gantt-bar[b-hbgyz5bcov] {
        top: 5px;
        height: 22px;
    }

    [b-hbgyz5bcov] .popover-wrapper {
        top: 6px;
        height: 24px;
    }

    .bar-label[b-hbgyz5bcov] {
        font-size: 0.625rem;
    }

    .target-marker[b-hbgyz5bcov] {
        font-size: 0.625rem;
        top: 12px;
    }

    .dev-complete-marker[b-hbgyz5bcov],
    .projected-complete-marker[b-hbgyz5bcov] {
        top: 2px;
        height: 32px;
    }

    .dev-complete-marker .marker-line[b-hbgyz5bcov],
    .projected-complete-marker .marker-line[b-hbgyz5bcov] {
        height: 24px;
    }

    .dev-complete-marker .marker-label[b-hbgyz5bcov],
    .projected-complete-marker .marker-label[b-hbgyz5bcov] {
        font-size: 0.5rem;
    }

    /* Phase bars */
    .gantt-bar-phase[b-hbgyz5bcov] {
        top: 2px;
        height: 24px;
    }

    .gantt-bar-phase .phase-label[b-hbgyz5bcov] {
        font-size: 0.5625rem;
    }

    .phase-popover-wrapper[b-hbgyz5bcov] {
        top: 4px;
        height: 24px;
    }

    .gantt-bar-extension[b-hbgyz5bcov] {
        top: 6px;
        height: 24px;
    }

    /* Dependency mode bar */
    .dependency-mode-bar[b-hbgyz5bcov] {
        flex-direction: column;
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        text-align: center;
    }

    /* Toast notification */
    .gantt-toast[b-hbgyz5bcov] {
        bottom: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }

    /* Empty state */
    .empty-state[b-hbgyz5bcov] {
        height: 150px;
    }

    .empty-state i[b-hbgyz5bcov] {
        font-size: 1.5rem;
    }

    .empty-state p[b-hbgyz5bcov] {
        font-size: 0.8125rem;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .gantt-projects-header[b-hbgyz5bcov],
    .gantt-project-row[b-hbgyz5bcov] {
        min-width: 350px;
    }

    .gantt-projects-header .col-project[b-hbgyz5bcov],
    .gantt-project-row .col-project[b-hbgyz5bcov] {
        width: 130px;
    }

    .gantt-projects-header .col-dates[b-hbgyz5bcov],
    .gantt-project-row .col-dates[b-hbgyz5bcov] {
        width: 80px;
    }

    .gantt-controls .date-range-label[b-hbgyz5bcov] {
        font-size: 0.6875rem;
        min-width: 100px;
    }

    .gantt-legend[b-hbgyz5bcov] {
        font-size: 0.625rem;
    }

    .timeline-header[b-hbgyz5bcov],
    .timeline-body[b-hbgyz5bcov] {
        min-width: 500px;
    }

    .month-header[b-hbgyz5bcov] {
        min-width: 50px;
        font-size: 0.625rem;
    }
}

/* ========================================
   DARK THEME OVERRIDES
   Note: Most styling is now handled via CSS variables
   defined in app.css. Only special cases need overrides here.
   ======================================== */
/* /Components/CapacityHeatmap.razor.rz.scp.css */
/* ========================================
   CAPACITY HEATMAP COMPONENT
   ======================================== */

.capacity-heatmap[b-em5aytkfoo] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.empty-state[b-em5aytkfoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

.empty-state i[b-em5aytkfoo] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Header */
.heatmap-header[b-em5aytkfoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.heatmap-summary[b-em5aytkfoo] {
    display: flex;
    gap: 1.5rem;
}

.summary-item[b-em5aytkfoo] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.summary-item.warning[b-em5aytkfoo] {
    color: var(--warning-text);
}

.heatmap-legend[b-em5aytkfoo] {
    display: flex;
    gap: 0.5rem;
}

.legend-item[b-em5aytkfoo] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.legend-item.green[b-em5aytkfoo] { background: var(--legend-green-bg); color: var(--legend-green-text); }
.legend-item.yellow[b-em5aytkfoo] { background: var(--legend-yellow-bg); color: var(--legend-yellow-text); }
.legend-item.orange[b-em5aytkfoo] { background: var(--legend-orange-bg); color: var(--legend-orange-text); }
.legend-item.red[b-em5aytkfoo] { background: var(--legend-red-bg); color: var(--legend-red-text); }

/* Table */
.heatmap-scroll-wrapper[b-em5aytkfoo] {
    flex: 1;
    overflow: auto;
}

.heatmap-table[b-em5aytkfoo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.heatmap-table th[b-em5aytkfoo],
.heatmap-table td[b-em5aytkfoo] {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-primary);
}

.heatmap-table thead th[b-em5aytkfoo] {
    background: var(--bg-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.col-resource[b-em5aytkfoo] {
    min-width: 180px;
    text-align: left !important;
    position: sticky;
    left: 0;
    background: var(--bg-primary);
    z-index: 5;
}

thead .col-resource[b-em5aytkfoo] {
    z-index: 15;
    background: var(--bg-secondary);
}

.col-team[b-em5aytkfoo] {
    min-width: 100px;
    color: var(--text-secondary);
}

.col-month[b-em5aytkfoo] {
    min-width: 70px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.col-month.current[b-em5aytkfoo] {
    background: var(--info-bg) !important;
    font-weight: 600;
}

.col-month.past[b-em5aytkfoo] {
    opacity: 0.7;
}

/* Resource Cell */
.resource-name[b-em5aytkfoo] {
    font-weight: 500;
    display: block;
}

.resource-role[b-em5aytkfoo] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

tr.inactive[b-em5aytkfoo] {
    opacity: 0.5;
}

/* Allocation Cells */
td.col-month.green[b-em5aytkfoo] { background: var(--heatmap-green-bg); }
td.col-month.yellow[b-em5aytkfoo] { background: var(--heatmap-yellow-bg); }
td.col-month.orange[b-em5aytkfoo] { background: var(--heatmap-orange-bg); }
td.col-month.red[b-em5aytkfoo] { background: var(--heatmap-red-bg); font-weight: 600; }
td.col-month.empty[b-em5aytkfoo] { background: var(--bg-secondary); }
td.col-month.unallocated[b-em5aytkfoo] { background: var(--bg-tertiary); color: var(--text-muted); }

td.col-month:hover:not(.empty)[b-em5aytkfoo] {
    /* Use box-shadow instead of filter to avoid stacking context issues with fixed popover */
    /* filter: brightness() creates new stacking context that breaks position:fixed popover */
    box-shadow: var(--heatmap-cell-hover-shadow);
    cursor: pointer;
}

.allocation-value[b-em5aytkfoo] {
    font-weight: 500;
}

.allocation-empty[b-em5aytkfoo] {
    color: var(--text-muted);
}

.project-count[b-em5aytkfoo] {
    font-size: 0.65rem;
    background: var(--project-count-bg);
    padding: 0 4px;
    border-radius: 8px;
    margin-left: 4px;
}

.project-count.overlap[b-em5aytkfoo] {
    background: var(--danger-color);
    color: var(--text-on-primary);
}

/* ========================================
   TRANSITION MONTH STYLES
   ======================================== */

/* Transition cell - gradient to show project change */
td.col-month.transition[b-em5aytkfoo] {
    background: linear-gradient(135deg, var(--transition-gradient-start) 0%, var(--transition-gradient-end) 100%);
    position: relative;
}

td.col-month.transition:hover[b-em5aytkfoo] {
    filter: brightness(0.95);
}

/* Stacked project display for transition months */
.allocation-stacked[b-em5aytkfoo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.stacked-project[b-em5aytkfoo] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-on-primary);
    padding: 1px 4px;
    border-radius: 3px;
    text-shadow: var(--stacked-project-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.more-projects[b-em5aytkfoo] {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Transition indicator */
.transition-indicator[b-em5aytkfoo] {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    opacity: 0.8;
}

/* Legend addition for transition */
.legend-item.transition[b-em5aytkfoo] {
    background: linear-gradient(135deg, var(--transition-gradient-start) 0%, var(--transition-gradient-end) 100%);
    color: var(--transition-text);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .capacity-heatmap[b-em5aytkfoo] {
        height: auto;
        min-height: 300px;
    }

    /* Header - Stack vertically */
    .heatmap-header[b-em5aytkfoo] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        padding: 0.5rem 0;
    }

    .heatmap-summary[b-em5aytkfoo] {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-start;
    }

    .summary-item[b-em5aytkfoo] {
        font-size: 0.75rem;
    }

    .heatmap-legend[b-em5aytkfoo] {
        flex-wrap: wrap;
        gap: 0.375rem;
        justify-content: flex-start;
    }

    .legend-item[b-em5aytkfoo] {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.375rem;
    }

    /* Table - Horizontal scroll wrapper */
    .heatmap-scroll-wrapper[b-em5aytkfoo] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .heatmap-table[b-em5aytkfoo] {
        font-size: 0.75rem;
        min-width: 600px;
    }

    .heatmap-table th[b-em5aytkfoo],
    .heatmap-table td[b-em5aytkfoo] {
        padding: 0.375rem 0.25rem;
    }

    /* Frozen first column */
    .col-resource[b-em5aytkfoo] {
        min-width: 120px;
        font-size: 0.6875rem;
        position: sticky;
        left: 0;
        z-index: 5;
        background: var(--bg-primary);
    }

    thead .col-resource[b-em5aytkfoo] {
        z-index: 15;
        background: var(--bg-secondary);
    }

    .col-team[b-em5aytkfoo] {
        min-width: 70px;
        font-size: 0.6875rem;
    }

    .col-month[b-em5aytkfoo] {
        min-width: 50px;
        font-size: 0.6875rem;
    }

    .resource-name[b-em5aytkfoo] {
        font-size: 0.6875rem;
    }

    .resource-role[b-em5aytkfoo] {
        font-size: 0.625rem;
    }

    .allocation-value[b-em5aytkfoo] {
        font-size: 0.6875rem;
    }

    .project-count[b-em5aytkfoo] {
        font-size: 0.5625rem;
        padding: 0 3px;
    }

    /* Stacked projects in transition cells */
    .stacked-project[b-em5aytkfoo] {
        font-size: 0.5625rem;
        padding: 1px 2px;
    }

    .more-projects[b-em5aytkfoo] {
        font-size: 0.5rem;
    }

    .transition-indicator[b-em5aytkfoo] {
        font-size: 0.5rem;
    }

    /* Empty state */
    .empty-state[b-em5aytkfoo] {
        height: 150px;
    }

    .empty-state i[b-em5aytkfoo] {
        font-size: 1.5rem;
    }

    .empty-state p[b-em5aytkfoo] {
        font-size: 0.8125rem;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .heatmap-table[b-em5aytkfoo] {
        min-width: 500px;
    }

    .col-resource[b-em5aytkfoo] {
        min-width: 100px;
    }

    .col-month[b-em5aytkfoo] {
        min-width: 40px;
    }

    .heatmap-summary[b-em5aytkfoo] {
        gap: 0.5rem;
    }

    .summary-item[b-em5aytkfoo] {
        font-size: 0.6875rem;
    }
}

/* ========================================
   DARK THEME OVERRIDES
   Note: Most styling is now handled via CSS variables
   defined in app.css. Only special cases need overrides here.
   ======================================== */
/* /Components/DeliveryScheduleView.razor.rz.scp.css */
/* ========================================
   DELIVERY SCHEDULE VIEW
   ======================================== */

.delivery-schedule[b-v3lrap9gq0] {
    width: 100%;
    height: fit-content;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Fullscreen mode */
.delivery-schedule.fullscreen[b-v3lrap9gq0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
    box-shadow: none;
}

.schedule-header[b-v3lrap9gq0] {
    flex-shrink: 0; /* Don't shrink the header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--header-gradient);
    color: var(--text-on-primary);
}

.schedule-header h4[b-v3lrap9gq0] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.schedule-header-controls[b-v3lrap9gq0] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.project-dates[b-v3lrap9gq0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.375rem 0.75rem;
    background: var(--btn-header-bg);
    border-radius: 4px;
    border: 1px solid var(--header-border-light);
}

.date-item[b-v3lrap9gq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-label[b-v3lrap9gq0] {
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 500;
}

.date-value[b-v3lrap9gq0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-on-primary);
}

.date-value.target[b-v3lrap9gq0] {
    color: var(--text-on-primary);
    opacity: 0.9;
}

.date-value.calculated[b-v3lrap9gq0] {
    color: var(--warning-text);
}

.date-value.projected[b-v3lrap9gq0] {
    color: var(--info-text);
    font-weight: 700;
}

.toggle-label[b-v3lrap9gq0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"][b-v3lrap9gq0] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--checkbox-accent);
}

.date-range[b-v3lrap9gq0] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Adjust to Forecast button in header */
.schedule-header-controls .btn[b-v3lrap9gq0] {
    background: var(--btn-header-bg);
    color: var(--primary-color);
    border: 1px solid var(--btn-header-bg);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.schedule-header-controls .btn:hover[b-v3lrap9gq0] {
    background: var(--btn-header-hover-bg);
    color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

/* Fullscreen toggle button */
.btn-fullscreen[b-v3lrap9gq0] {
    padding: 0.375rem 0.5rem !important;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-fullscreen i[b-v3lrap9gq0] {
    font-size: 1rem;
}

/* Schedule content - outer container */
.schedule-content[b-v3lrap9gq0] {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Scroll wrapper - handles BOTH horizontal and vertical scrolling */
.schedule-scroll-wrapper[b-v3lrap9gq0] {
    flex: 0 1 auto;
    overflow: auto;
    min-height: 0;
}

/* All sections share same min-width to scroll together */
.workstream-section[b-v3lrap9gq0],
.resource-section[b-v3lrap9gq0],
.resource-totals-section[b-v3lrap9gq0] {
    min-width: max-content;
}

/* Workstream section */
.workstream-section[b-v3lrap9gq0] {
    background: var(--bg-primary);
    border-bottom: 2px solid var(--primary-color);
}

/* Resource section - just flows naturally */
.resource-section[b-v3lrap9gq0] {
    background: var(--bg-primary);
}

/* Resource totals section */
.resource-totals-section[b-v3lrap9gq0] {
    background: var(--bg-primary);
    border-top: 2px solid var(--success-color);
}

/* Ensure all tables use same column sizing */
.schedule-scroll-wrapper .schedule-table[b-v3lrap9gq0] {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
}

.schedule-table[b-v3lrap9gq0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}

.schedule-table th[b-v3lrap9gq0],
.schedule-table td[b-v3lrap9gq0] {
    padding: 0.5rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    color: var(--text-primary);
}

.schedule-table th[b-v3lrap9gq0] {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
}

/* Frozen columns - sticky first column */
.frozen-col[b-v3lrap9gq0] {
    position: sticky !important;
    left: 0 !important;
    background: var(--bg-primary);
    z-index: 20;
    text-align: left !important;
    box-shadow: var(--frozen-col-shadow);
}

.schedule-table th.frozen-col[b-v3lrap9gq0] {
    z-index: 25;
    background: var(--bg-tertiary);
}

/* Resource section - ensure frozen columns work */
.resource-section td.frozen-col[b-v3lrap9gq0] {
    position: sticky !important;
    left: 0 !important;
    background: var(--bg-primary);
    z-index: 20;
}

/* Column widths - fixed widths for alignment across tables */
col.col-name[b-v3lrap9gq0] {
    width: 270px;
}

col.col-items[b-v3lrap9gq0] {
    width: 160px;
}

col.col-effort[b-v3lrap9gq0] {
    width: 130px;
}

col.col-actual[b-v3lrap9gq0],
col.col-remaining[b-v3lrap9gq0],
col.col-capacity[b-v3lrap9gq0] {
    width: 90px;
}

col.col-effective[b-v3lrap9gq0] {
    width: 120px;
}

col.col-month[b-v3lrap9gq0] {
    width: 170px;
}

col.col-total[b-v3lrap9gq0] {
    width: 100px;
}

/* Cell styling - enforce fixed widths */
td.col-name[b-v3lrap9gq0], th.col-name[b-v3lrap9gq0] {
    width: 270px;
    min-width: 270px;
    max-width: 270px;
}

/* Allow overflow for cells with popovers but truncate text inside */
td.col-name[b-v3lrap9gq0] {
    overflow: visible;
}

th.col-name[b-v3lrap9gq0] {
    overflow: hidden;
    text-overflow: ellipsis;
}

td.col-items[b-v3lrap9gq0], th.col-items[b-v3lrap9gq0] {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.col-effort[b-v3lrap9gq0], th.col-effort[b-v3lrap9gq0] {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    overflow: visible;
}

td.col-actual[b-v3lrap9gq0], th.col-actual[b-v3lrap9gq0],
td.col-remaining[b-v3lrap9gq0], th.col-remaining[b-v3lrap9gq0],
td.col-capacity[b-v3lrap9gq0], th.col-capacity[b-v3lrap9gq0] {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

td.col-effective[b-v3lrap9gq0], th.col-effective[b-v3lrap9gq0] {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

td.col-month[b-v3lrap9gq0], th.col-month[b-v3lrap9gq0] {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

td.col-total[b-v3lrap9gq0], th.col-total[b-v3lrap9gq0] {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

.col-total[b-v3lrap9gq0] {
    background: var(--bg-tertiary) !important;
}

/* Row styles */
.workstream-row td[b-v3lrap9gq0] {
    background: var(--bg-secondary);
}

.workstream-row:hover td[b-v3lrap9gq0] {
    background: var(--bg-tertiary);
}

.color-indicator[b-v3lrap9gq0] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

.badge-fixed[b-v3lrap9gq0] {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--info-color);
    color: var(--text-on-primary);
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

.badge-progress[b-v3lrap9gq0] {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--success-color);
    color: var(--text-on-primary);
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Health status badges */
.badge-health[b-v3lrap9gq0] {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 600;
}

.badge-health-ok[b-v3lrap9gq0] {
    background: var(--status-ok-bg);
    color: var(--status-ok-text);
}

.badge-health-risk[b-v3lrap9gq0] {
    background: var(--status-risk-bg);
    color: var(--status-risk-text);
}

.badge-health-over[b-v3lrap9gq0] {
    background: var(--status-over-bg);
    color: var(--status-over-text);
}

/* Effective Estimate styling */
.col-effective[b-v3lrap9gq0] {
    text-align: right;
}

.eff-est-source[b-v3lrap9gq0] {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.8rem;
}

.eff-est-health[b-v3lrap9gq0] {
    display: inline-block;
    margin-left: 2px;
    font-size: 0.75rem;
}

/* Effective Estimate health colors */
.health-complete[b-v3lrap9gq0] {
    background-color: var(--health-complete-bg);
}

.health-partial[b-v3lrap9gq0] {
    background-color: var(--health-partial-bg);
}

.health-missing[b-v3lrap9gq0] {
    background-color: var(--health-missing-bg);
}

/* Overflow indicator in Remaining column */
.overflow-indicator[b-v3lrap9gq0] {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 4px;
    background: var(--danger-color);
    color: var(--text-on-primary);
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Over capacity remaining column */
.over-capacity[b-v3lrap9gq0] {
    color: var(--danger-color);
    font-weight: 600;
}

/* Health status row styles */
.health-over td.frozen-col[b-v3lrap9gq0] {
    border-left: 3px solid var(--danger-color);
}

.health-risk td.frozen-col[b-v3lrap9gq0] {
    border-left: 3px solid var(--warning-color);
}

.health-ok td.frozen-col[b-v3lrap9gq0] {
    border-left: 3px solid var(--success-color);
}

/* Monthly health indicators */
.month-over-capacity[b-v3lrap9gq0] {
    background-color: var(--status-over-bg) !important;
}

.month-at-risk[b-v3lrap9gq0] {
    background-color: var(--status-risk-bg) !important;
}

.over-value[b-v3lrap9gq0] {
    color: var(--danger-color);
}

.resource-row td[b-v3lrap9gq0] {
    background: var(--bg-primary);
}

.resource-row:hover td[b-v3lrap9gq0] {
    background: var(--bg-secondary);
}

/* Total rows */
.total-row td[b-v3lrap9gq0] {
    background: var(--total-row-bg) !important;
    font-weight: 600;
}

.effort-total-row td[b-v3lrap9gq0] {
    border-top: 2px solid var(--primary-color);
}

/* Bottom total rows - now in separate sticky section */
.capacity-total-row td[b-v3lrap9gq0] {
    background: var(--total-row-bg) !important;
}

.capacity-total-row td.frozen-col[b-v3lrap9gq0] {
    background: var(--total-row-bg) !important;
}

.variance-row td[b-v3lrap9gq0] {
    border-top: 1px solid var(--text-secondary);
    background: var(--variance-row-bg) !important;
}

.variance-row td.frozen-col[b-v3lrap9gq0] {
    background: var(--variance-row-bg) !important;
}

/* Variance colors */
.positive-variance[b-v3lrap9gq0] {
    color: var(--success-color);
}

.negative-variance[b-v3lrap9gq0] {
    color: var(--danger-color);
}

/* Section header */
.section-header-row td[b-v3lrap9gq0] {
    background: var(--section-header-bg) !important;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Spacer row */
.spacer-row td[b-v3lrap9gq0] {
    height: 20px;
    background: var(--bg-primary);
    border: none;
}

/* Has value highlight */
.has-value[b-v3lrap9gq0] {
    background: var(--has-value-bg);
}

/* Has time-off indicator - subtle orange tint */
.has-timeoff[b-v3lrap9gq0] {
    color: var(--warning-text);
}

/* Past month styling - grey background */
.past-month[b-v3lrap9gq0] {
    background-color: var(--past-month-bg) !important;
}

/* Current month styling - yellow background */
.current-month[b-v3lrap9gq0] {
    background-color: var(--current-month-bg) !important;
}

/* Future month styling - white background */
.future-month[b-v3lrap9gq0] {
    background-color: var(--bg-primary) !important;
}

/* Effort/Capacity display in workstream rows */
.effort-value[b-v3lrap9gq0] {
    font-weight: 600;
}

.actual-value[b-v3lrap9gq0] {
    font-weight: 600;
    color: var(--text-secondary);
}

.capacity-separator[b-v3lrap9gq0] {
    color: var(--text-muted);
    margin: 0 2px;
}

.capacity-value[b-v3lrap9gq0] {
    font-size: 0.85rem;
    color: inherit;
}

.applied-value[b-v3lrap9gq0] {
    font-weight: 600;
    color: var(--success-text);
}

.unused-value[b-v3lrap9gq0] {
    font-weight: 600;
    color: var(--primary-color);
}

.gross-hours[b-v3lrap9gq0] {
    font-size: 0.75rem;
    color: inherit;
    margin-left: 2px;
}

.planned-value[b-v3lrap9gq0] {
    font-weight: 600;
    color: var(--primary-color);
}

.atrisk-value[b-v3lrap9gq0] {
    color: var(--status-risk-text) !important;
}

.workstream-row .col-month[b-v3lrap9gq0] {
    white-space: nowrap;
}

/* ========================================
   COLUMN HEADER TOOLTIPS
   ======================================== */

.schedule-table thead th[b-v3lrap9gq0] {
    position: relative;
    cursor: help;
}

.schedule-table thead th[data-tooltip]:hover[b-v3lrap9gq0]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: normal;
    text-align: left;
    white-space: pre-line;
    min-width: 250px;
    max-width: 350px;
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    line-height: 1.4;
}

/* Arrow for tooltip */
.schedule-table thead th[data-tooltip]:hover[b-v3lrap9gq0]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    z-index: 101;
    border: 6px solid transparent;
    border-bottom-color: var(--tooltip-bg);
}

/* Adjust tooltip position for columns that might overflow right */
.schedule-table thead th.col-total[data-tooltip]:hover[b-v3lrap9gq0]::after,
.schedule-table thead th.col-month[data-tooltip]:hover[b-v3lrap9gq0]::after {
    left: auto;
    right: 0;
}

.schedule-table thead th.col-total[data-tooltip]:hover[b-v3lrap9gq0]::before,
.schedule-table thead th.col-month[data-tooltip]:hover[b-v3lrap9gq0]::before {
    left: auto;
    right: 20px;
}

/* ========================================
   DATA CELL TOOLTIPS (for td elements)
   ======================================== */

/* Tooltips for data cells - using JavaScript SmartTooltip system for proper viewport positioning */
.schedule-table td[data-tooltip][b-v3lrap9gq0] {
    cursor: help;
}

/* CSS tooltips disabled - SmartTooltip JS handles positioning within viewport
.schedule-table td[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--tooltip-bg);
    color: var(--text-on-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: normal;
    text-align: left;
    white-space: pre-line;
    min-width: 180px;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 6px;
    line-height: 1.4;
}

.schedule-table td[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    border: 6px solid transparent;
    border-top-color: var(--tooltip-bg);
}

.schedule-table td.frozen-col[data-tooltip]:hover::after {
    left: 0;
    transform: none;
}

.schedule-table td.frozen-col[data-tooltip]:hover::before {
    left: 20px;
    transform: none;
}

.schedule-table td.col-total[data-tooltip]:hover::after {
    left: auto;
    right: 0;
    transform: none;
}

.schedule-table td.col-total[data-tooltip]:hover::before {
    left: auto;
    right: 20px;
    transform: none;
}
*/

/* Forecast confidence indicator */
.forecast-confidence[b-v3lrap9gq0] {
    font-size: 0.85em;
    margin-left: 4px;
}

/* Help link in column headers */
.help-link[b-v3lrap9gq0] {
    text-decoration: none;
    font-size: 0.85em;
    margin-left: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.help-link:hover[b-v3lrap9gq0] {
    opacity: 1;
}

/* ========================================
   STABILIZATION PHASE SECTION
   ======================================== */

.stabilization-header[b-v3lrap9gq0] {
    background: var(--stabilization-header-bg) !important;
}

.stabilization-header td[b-v3lrap9gq0] {
    padding: 0.75rem 0.75rem !important;
    border-top: 2px solid var(--stabilization-border) !important;
}

.stabilization-header .section-icon[b-v3lrap9gq0] {
    margin-right: 0.5rem;
}

.stabilization-header strong[b-v3lrap9gq0] {
    color: var(--stabilization-text);
    font-size: 0.9rem;
}

.stabilization-info[b-v3lrap9gq0] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 0.5rem;
}

.stabilization-dates[b-v3lrap9gq0] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 1rem;
    font-style: italic;
}

.stabilization-row[b-v3lrap9gq0] {
    background: var(--stabilization-row-bg) !important;
}

.stabilization-row:hover[b-v3lrap9gq0] {
    background: var(--stabilization-row-hover-bg) !important;
}

.stabilization-resource[b-v3lrap9gq0] {
    padding-left: 1.5rem !important;
}

.stabilization-resource .resource-indicator[b-v3lrap9gq0] {
    margin-right: 0.5rem;
    opacity: 0.7;
}

.stabilization-resource .allocation-percent[b-v3lrap9gq0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.stabilization-active[b-v3lrap9gq0] {
    background: var(--stabilization-active-bg) !important;
}

.stabilization-hours[b-v3lrap9gq0] {
    color: var(--stabilization-text);
    font-weight: 600;
}

.stabilization-total-row[b-v3lrap9gq0] {
    background: var(--stabilization-total-bg) !important;
    border-top: 1px solid var(--stabilization-border) !important;
}

.stabilization-total-row td[b-v3lrap9gq0] {
    font-weight: 600;
}

/* ========================================
   BUFFER / CONTINGENCY SECTION
   ======================================== */

.buffer-header[b-v3lrap9gq0] {
    background: var(--buffer-header-bg) !important;
}

.buffer-header td[b-v3lrap9gq0] {
    padding: 0.75rem 0.75rem !important;
    border-top: 2px solid var(--buffer-border) !important;
}

.buffer-header .section-icon[b-v3lrap9gq0] {
    margin-right: 0.5rem;
}

.buffer-header strong[b-v3lrap9gq0] {
    color: var(--buffer-text);
    font-size: 0.9rem;
}

.buffer-info[b-v3lrap9gq0] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 0.5rem;
}

.buffer-dates[b-v3lrap9gq0] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 1rem;
    font-style: italic;
}

.buffer-row[b-v3lrap9gq0] {
    background: var(--buffer-row-bg) !important;
}

.buffer-row:hover[b-v3lrap9gq0] {
    background: var(--buffer-row-hover-bg) !important;
}

.buffer-label[b-v3lrap9gq0] {
    padding-left: 0.75rem !important;
}

.buffer-label .buffer-icon[b-v3lrap9gq0] {
    margin-right: 0.5rem;
    opacity: 0.7;
}

.buffer-active[b-v3lrap9gq0] {
    background: var(--buffer-active-bg) !important;
}

.buffer-indicator[b-v3lrap9gq0] {
    color: var(--buffer-text);
    font-weight: 600;
}

/* Buffer row in workstream section */
.buffer-workstream-row td[b-v3lrap9gq0] {
    background: var(--buffer-workstream-bg);
    border-top: 1px dashed var(--text-secondary);
}

.buffer-workstream-row:hover td[b-v3lrap9gq0] {
    background: var(--buffer-workstream-hover-bg);
}

.buffer-workstream-row .col-name[b-v3lrap9gq0] {
    font-style: italic;
}

.buffer-breakdown[b-v3lrap9gq0] {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-left: 0.75rem;
    font-weight: 500;
    font-style: normal;
}

.pct-complete[b-v3lrap9gq0] {
    color: var(--success-text);
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

.badge-buffer[b-v3lrap9gq0] {
    display: inline-block;
    background: var(--text-secondary);
    color: var(--text-on-primary);
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.5rem;
    font-weight: 500;
    font-style: normal;
}

.buffer-workstream-row .buffer-month[b-v3lrap9gq0] {
    color: var(--text-secondary);
}

.buffer-workstream-row .buffer-value[b-v3lrap9gq0] {
    font-weight: 500;
    color: var(--text-secondary);
}

/* Total with Buffer row */
.total-with-buffer-row td[b-v3lrap9gq0] {
    background: var(--total-with-buffer-bg) !important;
    border-top: 2px solid var(--success-color);
}

.total-with-buffer-row td strong[b-v3lrap9gq0] {
    color: var(--success-text);
}

/* Cross-project conflict styling - caret in top-right corner indicates tooltip */

.conflict-indicator[b-v3lrap9gq0] {
    font-size: 0.75rem;
    margin-right: 4px;
    cursor: help;
}

/* Conflict in resource row - caret in top-right corner */
.resource-row .has-conflict[b-v3lrap9gq0] {
    position: relative;
}

.resource-row .has-conflict[b-v3lrap9gq0]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 8px solid var(--warning-color);
    border-left: 8px solid transparent;
    pointer-events: none;
    z-index: 1;
}

/* Scheduled time-off indicator */
.timeoff-indicator[b-v3lrap9gq0] {
    font-size: 0.65rem;
    margin-right: 2px;
}

/* Blackout month indicator - PTO balance not applied to this month */
.blackout-indicator[b-v3lrap9gq0] {
    font-size: 0.65rem;
    margin-right: 2px;
    cursor: help;
}

/* Blackout month cell styling */
.blackout-month[b-v3lrap9gq0] {
    position: relative;
}

.blackout-month[b-v3lrap9gq0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 8px solid var(--danger-color);
    border-right: 8px solid transparent;
    pointer-events: none;
    z-index: 1;
}

/* Resource name with allocation dates */
.col-name .resource-name-text[b-v3lrap9gq0] {
    font-weight: 500;
}

.col-name .resource-dates[b-v3lrap9gq0] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: nowrap;
}

/* ========================================
   FIXED HOURS ALLOCATION SECTION
   ======================================== */

.fixed-hours-header[b-v3lrap9gq0] {
    background: var(--fixed-hours-header-bg) !important;
}

.fixed-hours-header td[b-v3lrap9gq0] {
    padding: 0.75rem 0.75rem !important;
    border-top: 2px solid var(--info-color) !important;
}

.fixed-hours-header .section-icon[b-v3lrap9gq0] {
    margin-right: 0.5rem;
}

.fixed-hours-header strong[b-v3lrap9gq0] {
    color: var(--info-text);
    font-size: 0.9rem;
}

.fixed-hours-info[b-v3lrap9gq0] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 0.5rem;
}

.fixed-hours-row[b-v3lrap9gq0] {
    background: var(--fixed-hours-row-bg) !important;
}

.fixed-hours-row:hover[b-v3lrap9gq0] {
    background: var(--fixed-hours-row-hover-bg) !important;
}

.fixed-hours-row.complete[b-v3lrap9gq0] {
    background: var(--status-ok-bg) !important;
}

.fixed-hours-row.near-complete[b-v3lrap9gq0] {
    background: var(--status-risk-bg) !important;
}

.fixed-hours-resource[b-v3lrap9gq0] {
    padding-left: 1.5rem !important;
}

.fixed-hours-resource .resource-indicator[b-v3lrap9gq0] {
    margin-right: 0.5rem;
    opacity: 0.7;
}

.fixed-hours-desc[b-v3lrap9gq0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.fixed-hours-cell.complete[b-v3lrap9gq0] {
    background: var(--health-complete-bg) !important;
}

.fixed-hours-cell.in-progress[b-v3lrap9gq0] {
    background: var(--health-partial-bg) !important;
}

.fixed-hours-cell.planned[b-v3lrap9gq0] {
    background: var(--info-bg) !important;
}

.fixed-hours-total-row[b-v3lrap9gq0] {
    background: var(--total-row-bg) !important;
    border-top: 2px solid var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

.fixed-hours-total-row td[b-v3lrap9gq0] {
    font-weight: 600;
    background: var(--total-row-bg) !important;
}

.fixed-hours-total-row td.frozen-col[b-v3lrap9gq0] {
    background: var(--total-row-bg) !important;
}

/* Progress bar mini for fixed hours */
.progress-bar-mini[b-v3lrap9gq0] {
    width: 60px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.progress-bar-mini .progress-fill[b-v3lrap9gq0] {
    height: 100%;
    background: var(--progress-gradient);
    transition: width 0.3s ease;
}

.progress-text[b-v3lrap9gq0] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Forecast indicator for fixed hours allocations */
.forecast-indicator[b-v3lrap9gq0] {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    opacity: 0.8;
}

.forecast-indicator.ok[b-v3lrap9gq0] {
    color: var(--success-color);
}

.forecast-indicator.warning[b-v3lrap9gq0] {
    color: var(--danger-color);
    font-weight: 600;
}

/* Budget variance styling */
.col-effort.under-budget[b-v3lrap9gq0] {
    /* Subtle green tint for under budget */
}

.col-effort.over-budget[b-v3lrap9gq0] {
    background: var(--health-missing-bg) !important;
}

/* No items indicator */
.no-items[b-v3lrap9gq0] {
    color: var(--text-muted);
    font-style: italic;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .delivery-schedule[b-v3lrap9gq0] {
        border-radius: 0;
    }

    /* Header - Compact layout */
    .schedule-header[b-v3lrap9gq0] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }

    .schedule-header h4[b-v3lrap9gq0] {
        font-size: 0.875rem;
        flex: 1;
        margin: 0;
    }

    .schedule-header-controls[b-v3lrap9gq0] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .project-dates[b-v3lrap9gq0] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem;
        width: 100%;
        padding: 0.5rem;
        border-radius: 6px;
    }

    .date-item[b-v3lrap9gq0] {
        gap: 0.25rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .date-label[b-v3lrap9gq0] {
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        opacity: 0.8;
    }

    .date-value[b-v3lrap9gq0] {
        font-size: 0.75rem;
        font-weight: 600;
    }

    .toggle-label[b-v3lrap9gq0] {
        font-size: 0.75rem;
        flex: 1;
    }

    .btn-fullscreen[b-v3lrap9gq0] {
        display: none !important;
    }

    .schedule-header-controls .btn:not(.btn-fullscreen)[b-v3lrap9gq0] {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }

    /* Scroll wrapper - ensure horizontal scroll is visible */
    .schedule-scroll-wrapper[b-v3lrap9gq0] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .schedule-scroll-wrapper[b-v3lrap9gq0]::-webkit-scrollbar {
        height: 6px;
    }

    .schedule-scroll-wrapper[b-v3lrap9gq0]::-webkit-scrollbar-thumb {
        background: var(--text-muted);
        border-radius: 3px;
    }

    /* Disable frozen columns on mobile - allow full horizontal scroll */
    .frozen-col[b-v3lrap9gq0] {
        position: relative !important;
        left: auto !important;
        box-shadow: none !important;
    }

    .schedule-table th.frozen-col[b-v3lrap9gq0],
    .schedule-table td.frozen-col[b-v3lrap9gq0],
    .resource-section td.frozen-col[b-v3lrap9gq0] {
        position: relative !important;
        left: auto !important;
    }

    /* Table sizing */
    .schedule-table[b-v3lrap9gq0] {
        font-size: 0.75rem;
        min-width: 800px;
    }

    .schedule-table th[b-v3lrap9gq0],
    .schedule-table td[b-v3lrap9gq0] {
        padding: 0.375rem 0.5rem;
    }

    /* Column widths - compact for mobile */
    col.col-name[b-v3lrap9gq0] { width: 180px; }
    col.col-items[b-v3lrap9gq0] { width: 100px; }
    col.col-effort[b-v3lrap9gq0] { width: 90px; }
    col.col-actual[b-v3lrap9gq0],
    col.col-remaining[b-v3lrap9gq0],
    col.col-capacity[b-v3lrap9gq0] { width: 70px; }
    col.col-effective[b-v3lrap9gq0] { width: 90px; }
    col.col-month[b-v3lrap9gq0] { width: 120px; }
    col.col-total[b-v3lrap9gq0] { width: 80px; }

    td.col-name[b-v3lrap9gq0], th.col-name[b-v3lrap9gq0] {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    td.col-items[b-v3lrap9gq0], th.col-items[b-v3lrap9gq0] {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    td.col-effort[b-v3lrap9gq0], th.col-effort[b-v3lrap9gq0] {
        width: 90px;
        min-width: 90px;
        max-width: 90px;
    }

    td.col-actual[b-v3lrap9gq0], th.col-actual[b-v3lrap9gq0],
    td.col-remaining[b-v3lrap9gq0], th.col-remaining[b-v3lrap9gq0],
    td.col-capacity[b-v3lrap9gq0], th.col-capacity[b-v3lrap9gq0] {
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }

    td.col-effective[b-v3lrap9gq0], th.col-effective[b-v3lrap9gq0] {
        width: 90px;
        min-width: 90px;
        max-width: 90px;
    }

    td.col-month[b-v3lrap9gq0], th.col-month[b-v3lrap9gq0] {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    td.col-total[b-v3lrap9gq0], th.col-total[b-v3lrap9gq0] {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }

    /* Frozen column */
    .frozen-col[b-v3lrap9gq0] {
        font-size: 0.6875rem;
    }

    .color-indicator[b-v3lrap9gq0] {
        width: 10px;
        height: 10px;
        margin-right: 6px;
    }

    .badge-fixed[b-v3lrap9gq0],
    .badge-progress[b-v3lrap9gq0] {
        font-size: 0.625rem;
        padding: 1px 4px;
        margin-left: 4px;
    }

    .badge-health[b-v3lrap9gq0] {
        font-size: 0.625rem;
        padding: 1px 4px;
        margin-left: 4px;
    }

    /* Effort/Capacity values */
    .effort-value[b-v3lrap9gq0],
    .actual-value[b-v3lrap9gq0],
    .capacity-value[b-v3lrap9gq0] {
        font-size: 0.6875rem;
    }

    .gross-hours[b-v3lrap9gq0] {
        font-size: 0.625rem;
    }

    /* Resource dates */
    .col-name .resource-dates[b-v3lrap9gq0] {
        font-size: 0.5625rem;
        margin-left: 4px;
    }

    /* Tooltips - disable on mobile */
    .schedule-table thead th[data-tooltip]:hover[b-v3lrap9gq0]::after,
    .schedule-table thead th[data-tooltip]:hover[b-v3lrap9gq0]::before {
        display: none;
    }

    /* Phase sections */
    .stabilization-header td[b-v3lrap9gq0],
    .buffer-header td[b-v3lrap9gq0],
    .fixed-hours-header td[b-v3lrap9gq0] {
        padding: 0.5rem !important;
    }

    .stabilization-header strong[b-v3lrap9gq0],
    .buffer-header strong[b-v3lrap9gq0],
    .fixed-hours-header strong[b-v3lrap9gq0] {
        font-size: 0.75rem;
    }

    .stabilization-info[b-v3lrap9gq0],
    .buffer-info[b-v3lrap9gq0],
    .fixed-hours-info[b-v3lrap9gq0],
    .stabilization-dates[b-v3lrap9gq0],
    .buffer-dates[b-v3lrap9gq0] {
        font-size: 0.6875rem;
    }

    .stabilization-resource[b-v3lrap9gq0],
    .fixed-hours-resource[b-v3lrap9gq0] {
        padding-left: 1rem !important;
    }

    .fixed-hours-desc[b-v3lrap9gq0] {
        font-size: 0.625rem;
        max-width: 120px;
    }

    /* Progress bar */
    .progress-bar-mini[b-v3lrap9gq0] {
        width: 50px;
        height: 6px;
    }

    .progress-text[b-v3lrap9gq0] {
        font-size: 0.6875rem;
    }

    /* Fullscreen mode */
    .delivery-schedule.fullscreen[b-v3lrap9gq0] {
        padding: 0;
    }

    .delivery-schedule.fullscreen .schedule-header[b-v3lrap9gq0] {
        padding: 0.5rem;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .schedule-table[b-v3lrap9gq0] {
        min-width: 700px;
        font-size: 0.6875rem;
    }

    .schedule-header h4[b-v3lrap9gq0] {
        font-size: 0.875rem;
    }

    .date-label[b-v3lrap9gq0],
    .date-value[b-v3lrap9gq0] {
        font-size: 0.625rem;
    }

    col.col-name[b-v3lrap9gq0] { width: 150px; }
    td.col-name[b-v3lrap9gq0], th.col-name[b-v3lrap9gq0] {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
}

/* ========================================
   DARK THEME OVERRIDES
   Note: Most styling is now handled via CSS variables
   defined in app.css. Only special cases need overrides here.
   ======================================== */
/* /Components/EditAllocationDialog.razor.rz.scp.css */
.dialog-backdrop[b-1ite45uotr] {
    position: fixed;
    inset: 0;
    background: var(--dialog-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.edit-allocation-dialog[b-1ite45uotr] {
    background: var(--dialog-bg);
    border-radius: 12px;
    box-shadow: var(--dialog-shadow);
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header[b-1ite45uotr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.dialog-header h3[b-1ite45uotr] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-header .btn-close[b-1ite45uotr] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.dialog-header .btn-close:hover[b-1ite45uotr] {
    color: var(--danger-text);
}

.dialog-body[b-1ite45uotr] {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resource-info[b-1ite45uotr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--info-bg);
    border-radius: 8px;
    color: var(--primary-color);
    font-weight: 500;
}

.resource-info .oi[b-1ite45uotr] {
    font-size: 1.25rem;
}

.form-group[b-1ite45uotr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label[b-1ite45uotr] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-row[b-1ite45uotr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-control[b-1ite45uotr] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.form-control:focus[b-1ite45uotr] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.allocation-slider-row[b-1ite45uotr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.allocation-slider-row .form-range[b-1ite45uotr] {
    flex: 1;
}

.allocation-input[b-1ite45uotr] {
    width: 70px;
    text-align: center;
}

.auto-adjust-suggestion[b-1ite45uotr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 8px;
    gap: 1rem;
}

.suggestion-info[b-1ite45uotr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warning-text);
    font-size: 0.9rem;
}

.suggestion-info .oi[b-1ite45uotr] {
    color: var(--warning-color);
}

.validation-error[b-1ite45uotr] {
    padding: 0.75rem 1rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger-color);
    border-radius: 6px;
    color: var(--danger-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dialog-footer[b-1ite45uotr] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    gap: 0.5rem;
}

.dialog-footer .spacer[b-1ite45uotr] {
    flex: 1;
}

.dialog-footer .btn[b-1ite45uotr] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/FixedHoursAllocationDialog.razor.rz.scp.css */
.dialog-lg[b-gnnr1qvr2w] {
    max-width: 600px;
    width: 90%;
}

.monthly-distribution-grid[b-gnnr1qvr2w] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    background: var(--bg-secondary);
}

.month-row[b-gnnr1qvr2w] {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
}

.month-label[b-gnnr1qvr2w] {
    font-weight: 500;
    color: var(--text-primary);
}

.month-input[b-gnnr1qvr2w] {
    width: 100%;
    text-align: right;
}

.hours-label[b-gnnr1qvr2w] {
    color: var(--text-muted);
    font-size: 0.9em;
}

.distribution-summary[b-gnnr1qvr2w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 500;
}

.distribution-summary.complete[b-gnnr1qvr2w] {
    background: var(--success-bg);
    color: var(--success-text);
}

.distribution-summary.under[b-gnnr1qvr2w] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.distribution-summary.over[b-gnnr1qvr2w] {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.distribution-summary .remaining[b-gnnr1qvr2w] {
    font-size: 0.9em;
    opacity: 0.8;
}

.distribution-summary .check[b-gnnr1qvr2w] {
    color: var(--success-color);
    font-size: 1.2em;
}

.dialog-backdrop[b-gnnr1qvr2w] {
    position: fixed;
    inset: 0;
    background: var(--dialog-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.dialog[b-gnnr1qvr2w] {
    background: var(--dialog-bg);
    border-radius: 8px;
    box-shadow: var(--dialog-shadow);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-gnnr1qvr2w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.dialog-header h3[b-gnnr1qvr2w] {
    margin: 0;
    font-size: 1.2rem;
}

.dialog-body[b-gnnr1qvr2w] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.dialog-footer[b-gnnr1qvr2w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.form-group[b-gnnr1qvr2w] {
    margin-bottom: 16px;
}

.form-group label[b-gnnr1qvr2w] {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.btn-close[b-gnnr1qvr2w] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: var(--text-muted);
}

.btn-close:hover[b-gnnr1qvr2w] {
    color: var(--text-primary);
}

/* Work Item Linking Styles */
.search-results-list[b-gnnr1qvr2w],
.linked-items-list[b-gnnr1qvr2w] {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item[b-gnnr1qvr2w],
.linked-item[b-gnnr1qvr2w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.search-result-item:hover[b-gnnr1qvr2w] {
    background: var(--hover-bg);
}

.search-result-item:last-child[b-gnnr1qvr2w],
.linked-item:last-child[b-gnnr1qvr2w] {
    border-bottom: none;
}

.linked-item[b-gnnr1qvr2w] {
    cursor: default;
    background: var(--bg-primary);
}

.wi-id[b-gnnr1qvr2w] {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 60px;
}

.wi-type.badge[b-gnnr1qvr2w] {
    font-size: 0.7rem;
    padding: 2px 6px;
    min-width: 50px;
    text-align: center;
}

.wi-title[b-gnnr1qvr2w] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wi-estimate[b-gnnr1qvr2w] {
    font-weight: 500;
    color: var(--text-muted);
    min-width: 60px;
    text-align: right;
}

.linked-items-header[b-gnnr1qvr2w] {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.forecast-total[b-gnnr1qvr2w] {
    color: var(--info-color);
}

.budget-comparison[b-gnnr1qvr2w] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.9rem;
}

.no-linked-items[b-gnnr1qvr2w] {
    padding: 16px;
    text-align: center;
    font-style: italic;
}

/* Badge colors for work item types - using Azure DevOps standard colors */
.badge-epic[b-gnnr1qvr2w] {
    background-color: var(--wi-epic-bg);
    color: var(--text-on-primary);
}

.badge-feature[b-gnnr1qvr2w] {
    background-color: var(--wi-feature-bg);
    color: var(--text-on-primary);
}

.badge-pbi[b-gnnr1qvr2w] {
    background-color: var(--wi-pbi-bg);
    color: var(--text-on-primary);
}

.badge-bug[b-gnnr1qvr2w] {
    background-color: var(--wi-bug-bg);
    color: var(--text-on-primary);
}

.badge-task[b-gnnr1qvr2w] {
    background-color: var(--wi-task-bg);
    color: var(--wi-task-text);
}

.badge-secondary[b-gnnr1qvr2w] {
    background-color: var(--secondary-color);
    color: var(--text-on-primary);
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/GanttProjectPopover.razor.rz.scp.css */
/* Popover wrapper and trigger - inherit parent styling via ::deep in parent CSS */
.popover-wrapper[b-3b1f0hekqg] {
    display: block;
}

.popover-trigger[b-3b1f0hekqg] {
    width: 100%;
    height: 100%;
    display: block;
}

.popover-content.gantt-popover[b-3b1f0hekqg] {
    position: fixed;
    z-index: 10000;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 340px;
    font-size: 0.85rem;
    color: var(--text-primary);
    pointer-events: none;
    overflow: hidden;
}

.gantt-popover .popover-header[b-3b1f0hekqg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.gantt-popover .project-name[b-3b1f0hekqg] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.gantt-popover .status-badge[b-3b1f0hekqg] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.gantt-popover .status-badge.green[b-3b1f0hekqg] {
    background: var(--success-bg);
    color: var(--success-text);
}

.gantt-popover .status-badge.yellow[b-3b1f0hekqg] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.gantt-popover .status-badge.red[b-3b1f0hekqg] {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.gantt-popover .popover-section[b-3b1f0hekqg] {
    padding: 10px 14px;
}

.gantt-popover .popover-section.timeline[b-3b1f0hekqg] {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.gantt-popover .popover-section.forecast[b-3b1f0hekqg] {
    background: var(--bg-secondary);
}

.gantt-popover .section-title[b-3b1f0hekqg] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.gantt-popover .popover-row[b-3b1f0hekqg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
    font-size: 0.82rem;
}

.gantt-popover .popover-row .label[b-3b1f0hekqg] {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.gantt-popover .popover-row .value[b-3b1f0hekqg] {
    font-weight: 500;
    color: var(--text-primary);
}

.gantt-popover .popover-row.highlight[b-3b1f0hekqg] {
    padding: 4px 6px;
    margin: 4px -6px;
    border-radius: 4px;
}

.gantt-popover .popover-row.highlight.dev[b-3b1f0hekqg] {
    background: var(--highlight-dev-bg);
}

.gantt-popover .popover-row.highlight.projected[b-3b1f0hekqg] {
    background: var(--highlight-projected-bg);
}

.gantt-popover .popover-row .marker[b-3b1f0hekqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 2px;
}

.gantt-popover .popover-row.highlight.dev .marker[b-3b1f0hekqg] {
    color: var(--success-color);
    background: var(--card-bg);
    border: 1px solid var(--success-color);
}

.gantt-popover .popover-row.highlight.projected .marker[b-3b1f0hekqg] {
    color: var(--stabilization-text);
    background: var(--card-bg);
    border: 1px solid var(--stabilization-text);
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/MultiProjectAllocationDialog.razor.rz.scp.css */
.dialog-backdrop[b-93okxftv0y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dialog-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.multi-project-allocation-dialog[b-93okxftv0y] {
    background: var(--dialog-bg);
    border-radius: 8px;
    box-shadow: var(--dialog-shadow);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog-header[b-93okxftv0y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--dialog-header-primary);
    color: var(--text-on-primary);
    border-radius: 8px 8px 0 0;
}

.dialog-header h3[b-93okxftv0y] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-close[b-93okxftv0y] {
    background: none;
    border: none;
    color: var(--text-on-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn-close:hover[b-93okxftv0y] {
    background-color: var(--btn-header-hover-bg);
}

.dialog-body[b-93okxftv0y] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.resource-info[b-93okxftv0y] {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.resource-header[b-93okxftv0y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.resource-header i[b-93okxftv0y] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.resource-name[b-93okxftv0y] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-badge[b-93okxftv0y] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-over[b-93okxftv0y] {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.status-badge.status-full[b-93okxftv0y] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.status-badge.status-available[b-93okxftv0y] {
    background: var(--success-bg);
    color: var(--success-text);
}

.resource-summary[b-93okxftv0y] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.summary-item strong[b-93okxftv0y] {
    color: var(--text-primary);
}

.allocation-month-info[b-93okxftv0y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.allocation-month-info h5[b-93okxftv0y] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.current-total[b-93okxftv0y] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.current-total strong[b-93okxftv0y] {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.current-total .text-danger[b-93okxftv0y] {
    color: var(--danger-text) !important;
}

.project-allocations[b-93okxftv0y] {
    margin-bottom: 1rem;
}

.allocation-row[b-93okxftv0y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.allocation-row:hover[b-93okxftv0y] {
    background: var(--bg-secondary);
}

.project-info[b-93okxftv0y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.project-info i[b-93okxftv0y] {
    color: var(--text-muted);
}

.project-name[b-93okxftv0y] {
    font-weight: 500;
    color: var(--text-primary);
}

.allocation-controls[b-93okxftv0y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-range[b-93okxftv0y] {
    width: 150px;
}

.allocation-input[b-93okxftv0y] {
    width: 70px;
    text-align: center;
}

.allocation-label[b-93okxftv0y] {
    font-weight: 600;
    color: var(--text-muted);
}

.add-project-section[b-93okxftv0y] {
    margin: 1.5rem 0;
}

.add-project-dropdown[b-93okxftv0y] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.add-project-dropdown .form-select[b-93okxftv0y] {
    flex: 1;
}

.validation-error[b-93okxftv0y] {
    background: var(--danger-bg);
    color: var(--danger-text);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.allocation-tips[b-93okxftv0y] {
    background: var(--info-bg);
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.allocation-tips i[b-93okxftv0y] {
    color: var(--primary-color);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tips-content[b-93okxftv0y] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.tips-content strong[b-93okxftv0y] {
    display: block;
    margin-bottom: 0.5rem;
}

.tips-content ul[b-93okxftv0y] {
    margin: 0;
    padding-left: 1.25rem;
}

.tips-content li[b-93okxftv0y] {
    margin-bottom: 0.25rem;
}

.dialog-footer[b-93okxftv0y] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 8px 8px;
}

.btn[b-93okxftv0y] {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-93okxftv0y] {
    background: var(--primary-color);
    color: var(--text-on-primary);
}

.btn-primary:hover:not(:disabled)[b-93okxftv0y] {
    filter: brightness(1.1);
}

.btn-primary:disabled[b-93okxftv0y] {
    background: var(--text-muted);
    cursor: not-allowed;
}

.btn-secondary[b-93okxftv0y] {
    background: var(--secondary-color);
    color: var(--text-on-primary);
}

.btn-secondary:hover[b-93okxftv0y] {
    filter: brightness(0.9);
}

.btn-sm[b-93okxftv0y] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-outline-primary[b-93okxftv0y] {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-outline-primary:hover[b-93okxftv0y] {
    background: var(--primary-color);
    color: var(--text-on-primary);
}

.btn-outline-danger[b-93okxftv0y] {
    background: transparent;
    color: var(--danger-text);
    border: 1px solid var(--danger-color);
}

.btn-outline-danger:hover[b-93okxftv0y] {
    background: var(--danger-color);
    color: var(--text-on-primary);
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/MultiProjectDeliveryScheduleView.razor.rz.scp.css */
/* ========================================
   MULTI-PROJECT DELIVERY SCHEDULE VIEW
   ======================================== */

.multi-project-delivery-schedule[b-cxpruq0giz] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.schedule-header[b-cxpruq0giz] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--header-gradient);
    color: var(--text-on-primary);
}

.schedule-header h4[b-cxpruq0giz] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.schedule-header-controls[b-cxpruq0giz] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.toggle-label[b-cxpruq0giz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"][b-cxpruq0giz] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--text-on-primary);
}

.date-range-filter[b-cxpruq0giz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.date-range-filter label[b-cxpruq0giz] {
    margin: 0;
    font-weight: 500;
}

.date-range-filter input[type="month"][b-cxpruq0giz] {
    width: 140px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--btn-header-bg);
    color: var(--text-on-primary);
    font-size: 0.875rem;
}

.date-range-filter input[type="month"]:focus[b-cxpruq0giz] {
    outline: none;
    border-color: var(--border-light);
    background: var(--btn-header-hover-bg);
}

.date-range-filter input[type="month"][b-cxpruq0giz]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.date-range-filter .btn[b-cxpruq0giz] {
    padding: 0.25rem 0.5rem;
    border-color: var(--border-light);
    color: var(--text-on-primary);
}

.date-range-filter .btn:hover[b-cxpruq0giz] {
    background: var(--btn-header-bg);
    border-color: var(--border-light);
}

.date-range-display[b-cxpruq0giz] {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 500;
}

.schedule-content[b-cxpruq0giz] {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
}

/* ========================================
   CAPACITY INSIGHTS PANEL
   ======================================== */

.capacity-insights-panel[b-cxpruq0giz] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.insight-card[b-cxpruq0giz] {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.insight-card:hover[b-cxpruq0giz] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.insight-icon[b-cxpruq0giz] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.5rem;
}

.insight-icon.over-allocated[b-cxpruq0giz] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.insight-icon.full[b-cxpruq0giz] {
    background: var(--info-bg);
    color: var(--info-text);
}

.insight-icon.available[b-cxpruq0giz] {
    background: var(--success-bg);
    color: var(--success-text);
}

.insight-icon.total[b-cxpruq0giz] {
    background: var(--badge-purple-bg);
    color: var(--badge-purple-text);
}

.insight-card.capacity-utilization .insight-icon[b-cxpruq0giz] {
    background: var(--dialog-header-purple);
    color: var(--text-on-primary);
}

.insight-content[b-cxpruq0giz] {
    flex: 1;
}

.insight-value[b-cxpruq0giz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.insight-label[b-cxpruq0giz] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.empty-state[b-cxpruq0giz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state i[b-cxpruq0giz] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ========================================
   PROJECTS SECTION
   ======================================== */

.projects-section[b-cxpruq0giz] {
    margin-bottom: 2rem;
}

.projects-section h5[b-cxpruq0giz] {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.projects-grid[b-cxpruq0giz] {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.schedule-table[b-cxpruq0giz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.schedule-table th[b-cxpruq0giz],
.schedule-table td[b-cxpruq0giz] {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.schedule-table th[b-cxpruq0giz] {
    background: var(--table-header-bg);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.schedule-table tbody tr:hover[b-cxpruq0giz] {
    background: var(--table-row-hover);
}

.project-row.health-ok[b-cxpruq0giz] {
    border-left: 3px solid var(--success-color);
}

.project-row.health-risk[b-cxpruq0giz] {
    border-left: 3px solid var(--warning-color);
}

.project-row.health-over[b-cxpruq0giz] {
    border-left: 3px solid var(--danger-color);
}

.project-name[b-cxpruq0giz] {
    min-width: 200px;
}

.badge[b-cxpruq0giz] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-success[b-cxpruq0giz] {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-warning[b-cxpruq0giz] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-danger[b-cxpruq0giz] {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.progress-bar-container[b-cxpruq0giz] {
    position: relative;
    width: 100px;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-cxpruq0giz] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--progress-gradient);
    transition: width 0.3s ease;
}

.progress-text[b-cxpruq0giz] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
}

.text-center[b-cxpruq0giz] {
    text-align: center !important;
}

.text-right[b-cxpruq0giz] {
    text-align: right !important;
}

.text-danger[b-cxpruq0giz] {
    color: var(--danger-color) !important;
}

.text-muted[b-cxpruq0giz] {
    color: var(--text-secondary) !important;
}

/* Project Timeline Visualization */
.timeline-cell[b-cxpruq0giz] {
    min-width: 200px;
}

.project-timeline[b-cxpruq0giz] {
    display: flex;
    gap: 2px;
    padding: 4px 0;
}

.timeline-month[b-cxpruq0giz] {
    flex: 1;
    height: 20px;
    border-radius: 2px;
    min-width: 8px;
}

.timeline-month.active[b-cxpruq0giz] {
    background: var(--primary-color);
}

.timeline-month.inactive[b-cxpruq0giz] {
    background: var(--bg-tertiary);
}

/* ========================================
   RESOURCES SECTION
   ======================================== */

.resources-section[b-cxpruq0giz] {
    margin-bottom: 1rem;
}

.resources-section h5[b-cxpruq0giz] {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resources-grid[b-cxpruq0giz] {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.resource-row.status-over[b-cxpruq0giz] {
    border-left: 3px solid var(--danger-color);
    background: var(--danger-bg);
}

.resource-row.status-full[b-cxpruq0giz] {
    border-left: 3px solid var(--warning-color);
}

.resource-row.status-available[b-cxpruq0giz] {
    border-left: 3px solid var(--success-color);
}

.resource-name[b-cxpruq0giz] {
    min-width: 180px;
}

.projects-list[b-cxpruq0giz] {
    min-width: 250px;
    max-width: 350px;
}

.project-assignment[b-cxpruq0giz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.project-badge[b-cxpruq0giz] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    background: var(--bg-tertiary);
    border-radius: 3px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allocation-badge[b-cxpruq0giz] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    background: var(--primary-color);
    color: var(--text-on-primary);
    border-radius: 3px;
    font-weight: 600;
}

/* Allocation Cells */
.allocation-cell[b-cxpruq0giz] {
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center !important;
}

.allocation-cell:hover[b-cxpruq0giz] {
    background-color: var(--primary-bg) !important;
}

.allocation-cell.over-allocated[b-cxpruq0giz] {
    background-color: var(--danger-bg) !important;
}

.allocation-cell.fully-allocated[b-cxpruq0giz] {
    background-color: var(--warning-bg) !important;
}

.allocation-cell.allocated[b-cxpruq0giz] {
    background-color: var(--success-bg) !important;
}

.allocation-cell.not-allocated[b-cxpruq0giz] {
    background-color: var(--bg-secondary) !important;
}

/* Conflict indicators */
.allocation-cell.has-conflict[b-cxpruq0giz] {
    position: relative;
}

.allocation-cell.has-conflict[b-cxpruq0giz]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--warning-color);
}

.allocation-cell.has-conflict.over-allocated[b-cxpruq0giz]::after {
    background-color: var(--danger-color);
}

.allocation-content[b-cxpruq0giz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.allocation-percent[b-cxpruq0giz] {
    font-weight: 600;
    font-size: 0.9em;
}

.conflict-indicator[b-cxpruq0giz] {
    font-size: 0.7em;
    cursor: help;
    position: absolute;
    top: 1px;
    right: 1px;
    line-height: 1;
}

.effective-hours[b-cxpruq0giz] {
    font-size: 0.7em;
    color: var(--text-secondary);
    font-weight: normal;
}

.effective-hours.reduced[b-cxpruq0giz] {
    color: var(--danger-color);
    font-weight: 500;
}

/* Month column styling */
.col-month[b-cxpruq0giz] {
    min-width: 80px;
    text-align: center !important;
    position: relative;
}

.col-month.past-month[b-cxpruq0giz] {
    background-color: var(--past-month-bg) !important;
    opacity: 0.7;
}

.col-month.current-month[b-cxpruq0giz] {
    background-color: var(--current-month-bg) !important;
}

.col-month.future-month[b-cxpruq0giz] {
    background-color: var(--card-bg) !important;
}

/* /Components/MultiSelectDropdown.razor.rz.scp.css */
/* ========================================
   MULTI-SELECT DROPDOWN COMPONENT
   ======================================== */

.multi-select-dropdown[b-0wwgplmd4q] {
    position: relative;
    width: 100%;
}

/* Dropdown Trigger */
.dropdown-trigger[b-0wwgplmd4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0.375rem 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.5rem;
    color: var(--text-primary);
}

.dropdown-trigger:hover[b-0wwgplmd4q] {
    border-color: var(--primary-color);
}

.multi-select-dropdown.open .dropdown-trigger[b-0wwgplmd4q] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

/* Selected Pills Container */
.selected-pills[b-0wwgplmd4q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.placeholder[b-0wwgplmd4q] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Pills */
.pill[b-0wwgplmd4q] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--info-bg);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--primary-color);
    max-width: 150px;
}

.pill-text[b-0wwgplmd4q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill-remove[b-0wwgplmd4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pill-remove:hover[b-0wwgplmd4q] {
    background: var(--primary-color);
    color: white;
}

/* All Teams Pill - Special styling */
.all-teams-pill[b-0wwgplmd4q] {
    background: var(--success-bg);
    border-color: var(--success-color);
    color: var(--success-text);
}

.all-teams-pill .pill-remove:hover[b-0wwgplmd4q] {
    background: var(--success-text);
    color: white;
}

/* Overflow Pill */
.overflow-pill[b-0wwgplmd4q] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
    cursor: default;
}

/* Dropdown Arrow */
.dropdown-arrow[b-0wwgplmd4q] {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Dropdown Panel */
.dropdown-panel[b-0wwgplmd4q] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dropdown-divider[b-0wwgplmd4q] {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.dropdown-items[b-0wwgplmd4q] {
    overflow-y: auto;
    max-height: 250px;
}

/* Dropdown Items */
.dropdown-item[b-0wwgplmd4q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.dropdown-item:hover[b-0wwgplmd4q] {
    background: var(--bg-secondary);
}

.dropdown-item input[type="checkbox"][b-0wwgplmd4q] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.dropdown-item span[b-0wwgplmd4q] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.dropdown-item .item-count[b-0wwgplmd4q] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dropdown-item .item-subtext[b-0wwgplmd4q] {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: auto;
}

/* All Item - Special styling */
.all-item[b-0wwgplmd4q] {
    background: var(--bg-tertiary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.all-item:hover[b-0wwgplmd4q] {
    background: var(--bg-secondary);
}
/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/ResourceCellPopover.razor.rz.scp.css */
.popover-wrapper[b-umviftssow] {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.popover-trigger[b-umviftssow] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.popover-content[b-umviftssow] {
    position: absolute;
    z-index: 1000;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 380px;
    width: max-content;
    font-size: 0.8rem;
    color: var(--text-primary);
    pointer-events: none;
    overflow: visible;
    word-wrap: break-word;
}

/* Fixed position variant - renders on top of everything */
.popover-fixed[b-umviftssow] {
    position: fixed;
    z-index: 10000;
}

/* Position variants (for non-fixed fallback) */
.popover-top[b-umviftssow] {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.popover-bottom[b-umviftssow] {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.popover-left[b-umviftssow] {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.popover-right[b-umviftssow] {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.popover-header[b-umviftssow] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
}

.popover-header .resource-header-row[b-umviftssow] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.popover-header .resource-name[b-umviftssow] {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
}

.popover-header .allocation-display[b-umviftssow] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.popover-header .month-name[b-umviftssow] {
    font-weight: 600;
    color: var(--text-primary);
}

.popover-header .working-days[b-umviftssow] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.popover-section[b-umviftssow] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.popover-section:last-child[b-umviftssow] {
    border-bottom: none;
}

.popover-row[b-umviftssow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    gap: 8px;
}

.popover-row .label[b-umviftssow] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.popover-row .value[b-umviftssow] {
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
}

.popover-row .value.bold[b-umviftssow] {
    font-weight: 600;
}

.popover-row.muted .label[b-umviftssow],
.popover-row.muted .value[b-umviftssow] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.popover-row.variance.positive .value[b-umviftssow] {
    color: var(--popover-positive-text);
}

.popover-row.variance.negative .value[b-umviftssow] {
    color: var(--popover-negative-text);
}

.popover-row.balance-reduction .value[b-umviftssow] {
    color: var(--popover-balance-text);
}

/* Time-off Inline Section */
.popover-section.timeoff-inline[b-umviftssow] {
    background: var(--timeoff-bg);
    border: 1px solid var(--timeoff-border);
    border-radius: 6px;
    margin: 8px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeoff-inline .timeoff-icon[b-umviftssow] {
    font-size: 0.9rem;
}

.timeoff-inline .timeoff-label[b-umviftssow] {
    font-weight: 600;
    color: var(--timeoff-label);
    font-size: 0.78rem;
}

.timeoff-inline .timeoff-value[b-umviftssow] {
    font-weight: 700;
    color: var(--timeoff-value);
    font-size: 0.78rem;
    margin-left: auto;
}

/* Conflict Card Section */
.popover-section.conflict-card[b-umviftssow] {
    background: var(--conflict-bg);
    border: 1px solid var(--conflict-border);
    border-radius: 6px;
    margin: 8px;
    padding: 0;
    overflow: hidden;
}

.conflict-header[b-umviftssow] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--conflict-header-bg);
    border-bottom: 1px solid var(--conflict-border);
}

.conflict-icon[b-umviftssow] {
    font-size: 1rem;
}

.conflict-title[b-umviftssow] {
    font-weight: 600;
    color: var(--conflict-title);
    font-size: 0.8rem;
    flex: 1;
}

.conflict-badge[b-umviftssow] {
    background: var(--conflict-badge-bg);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.conflict-list[b-umviftssow] {
    padding: 6px 0;
}

.conflict-item[b-umviftssow] {
    padding: 6px 12px;
    border-bottom: 1px dashed var(--conflict-border);
}

.conflict-item:last-child[b-umviftssow] {
    border-bottom: none;
}

.conflict-item-header[b-umviftssow] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.conflict-type-icon[b-umviftssow] {
    font-size: 0.85rem;
}

.conflict-project-name[b-umviftssow] {
    font-weight: 600;
    color: var(--conflict-project);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.conflict-item-detail[b-umviftssow] {
    padding-left: 22px;
}

.conflict-context[b-umviftssow] {
    font-size: 0.72rem;
    color: var(--conflict-context);
    font-style: italic;
}

/* Project breakdown section */
.popover-section.project-breakdown[b-umviftssow] {
    background: var(--info-bg);
}

.popover-section.project-breakdown .header[b-umviftssow] {
    font-weight: 600;
    color: var(--primary-color);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.popover-section.project-breakdown .header .icon[b-umviftssow] {
    margin-right: 4px;
}

.popover-row.project-row[b-umviftssow] {
    font-size: 0.75rem;
    padding: 2px 0 2px 0;
    justify-content: space-between;
}

.popover-row.project-row .project-name[b-umviftssow] {
    font-weight: 500;
    color: var(--primary-color);
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    flex-shrink: 1;
}

.popover-row.project-row .project-allocation[b-umviftssow] {
    flex-shrink: 0;
    margin-left: auto;
}

.popover-row.project-row .value[b-umviftssow] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* Fixed hours allocation styling */
.popover-row.project-row.fixed-hours[b-umviftssow] {
    background: linear-gradient(90deg, var(--fixed-indicator-bg) 0%, transparent 100%);
    border-left: 2px solid var(--fixed-indicator-border);
    padding-left: 4px;
    margin-left: -6px;
}

.popover-row.project-row.fixed-hours .project-name[b-umviftssow] {
    color: var(--fixed-indicator-text);
}

.fixed-hours-icon[b-umviftssow] {
    font-size: 0.65rem;
    margin-right: 3px;
    flex-shrink: 0;
}

/* Team allocation badge */
.team-allocation-badge[b-umviftssow] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* Month info row */
.month-info-row[b-umviftssow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* Utilization Summary Section */
.popover-section.utilization-summary[b-umviftssow] {
    background: var(--bg-secondary);
    padding: 10px 12px;
}

.popover-section.utilization-summary.over[b-umviftssow] {
    background: var(--utilization-over-bg);
}

.popover-section.utilization-summary.full[b-umviftssow] {
    background: var(--utilization-full-bg);
}

.popover-section.utilization-summary.healthy[b-umviftssow] {
    background: var(--utilization-healthy-bg);
}

.popover-section.utilization-summary.under[b-umviftssow] {
    background: var(--utilization-under-bg);
}

.utilization-bar-container[b-umviftssow] {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.utilization-bar[b-umviftssow] {
    height: 100%;
    background: var(--utilization-bar-healthy);
    border-radius: 4px 0 0 4px;
    transition: width 0.3s ease;
}

.popover-section.utilization-summary.over .utilization-bar[b-umviftssow] {
    background: var(--utilization-bar-over);
}

.popover-section.utilization-summary.full .utilization-bar[b-umviftssow] {
    background: var(--utilization-bar-full);
}

.utilization-overflow[b-umviftssow] {
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--danger-color),
        var(--danger-color) 4px,
        var(--danger-text) 4px,
        var(--danger-text) 8px
    );
    position: absolute;
    right: 0;
    top: 0;
}

.utilization-stats[b-umviftssow] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.utilization-percent[b-umviftssow] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--utilization-healthy-text);
}

.utilization-percent.over[b-umviftssow] {
    color: var(--utilization-over-text);
}

.utilization-percent.full[b-umviftssow] {
    color: var(--utilization-full-text);
}

.utilization-percent.healthy[b-umviftssow] {
    color: var(--utilization-healthy-text);
}

.utilization-percent.under[b-umviftssow] {
    color: var(--utilization-under-text);
}

.utilization-label[b-umviftssow] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.capacity-summary[b-umviftssow] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.capacity-summary .allocated[b-umviftssow] {
    font-weight: 600;
}

.capacity-summary .separator[b-umviftssow] {
    color: var(--text-muted);
    margin: 0 2px;
}

.capacity-summary .available[b-umviftssow] {
    color: var(--text-muted);
}

/* Availability indicator */
.availability-indicator[b-umviftssow] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.availability-indicator.available[b-umviftssow] {
    background: var(--success-bg);
    color: var(--success-text);
}

.availability-indicator.over[b-umviftssow] {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.availability-indicator.full[b-umviftssow] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.availability-indicator .icon[b-umviftssow] {
    font-size: 0.9rem;
}

/* Project allocation styling */
.project-allocation[b-umviftssow] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
    font-size: 0.75rem;
}

.project-allocation .actual[b-umviftssow] {
    color: var(--primary-color);
}

.project-allocation .separator[b-umviftssow] {
    color: var(--text-muted);
}

.project-allocation .capacity[b-umviftssow] {
    color: var(--text-primary);
}

.project-allocation .percent[b-umviftssow] {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

/* Capacity details section */
.popover-section.capacity-details[b-umviftssow] {
    background: var(--bg-secondary);
}

.popover-section.capacity-details .header[b-umviftssow] {
    font-weight: 600;
    color: var(--text-secondary);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.popover-section.capacity-details .header .icon[b-umviftssow] {
    margin-right: 4px;
}

/* Calculation Breakdown Styles */
.calculation-breakdown[b-umviftssow] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    padding: 4px 0;
}

.calc-row[b-umviftssow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    color: var(--text-secondary);
}

.calc-row .calc-label[b-umviftssow] {
    color: var(--text-secondary);
}

.calc-row .calc-value[b-umviftssow] {
    text-align: right;
    color: var(--text-primary);
}

.calc-row.subtotal[b-umviftssow] {
    border-top: 1px dashed var(--border-color);
    padding-top: 4px;
    margin-top: 2px;
}

.calc-row.subtotal .calc-label[b-umviftssow],
.calc-row.subtotal .calc-value[b-umviftssow] {
    font-weight: 500;
    color: var(--text-secondary);
}

.calc-row.deduction .calc-label[b-umviftssow],
.calc-row.deduction .calc-value[b-umviftssow] {
    color: var(--popover-balance-text);
}

.calc-row.blackout-notice[b-umviftssow] {
    background: var(--danger-bg);
    padding: 4px 6px;
    border-radius: 4px;
    margin: 4px 0;
}

.calc-row.blackout-notice .calc-label[b-umviftssow],
.calc-row.blackout-notice .calc-value[b-umviftssow] {
    color: var(--danger-color);
    font-weight: 500;
    font-size: 0.72rem;
}

.calc-row.allocation .calc-label[b-umviftssow],
.calc-row.allocation .calc-value[b-umviftssow] {
    color: var(--popover-allocation-text);
}

.calc-row.total[b-umviftssow] {
    border-top: 2px solid var(--border-color);
    padding-top: 6px;
    margin-top: 4px;
}

.calc-row.total .calc-label[b-umviftssow],
.calc-row.total .calc-value[b-umviftssow] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary-color);
}

.calc-row.applied-section[b-umviftssow] {
    border-top: 1px dashed var(--primary-color);
    padding-top: 6px;
    margin-top: 6px;
    color: var(--primary-color);
    font-weight: 500;
}

.calc-row.applied .calc-label[b-umviftssow],
.calc-row.applied .calc-value[b-umviftssow] {
    font-weight: 600;
    color: var(--popover-applied-text);
}

.calc-row.applied .calc-value.highlight[b-umviftssow] {
    background: var(--success-bg);
    padding: 2px 6px;
    border-radius: 4px;
}

.calc-row.stabilization-note[b-umviftssow] {
    font-size: 0.7rem;
    color: var(--popover-stabilization-text);
    font-style: italic;
}

/* Applied Hours Breakdown Card */
.applied-breakdown-card[b-umviftssow] {
    background: var(--applied-card-bg);
    border: 1px solid var(--applied-card-border);
    border-radius: 6px;
    margin-top: 8px;
    padding: 8px 10px;
}

.applied-breakdown-card.stabilization[b-umviftssow] {
    background: var(--applied-stab-bg);
    border-color: var(--applied-stab-border);
}

.applied-breakdown-card.winddown[b-umviftssow] {
    background: var(--applied-winddown-bg);
    border-color: var(--applied-winddown-border);
}

.breakdown-header[b-umviftssow] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.breakdown-icon[b-umviftssow] {
    font-size: 0.85rem;
}

.breakdown-title[b-umviftssow] {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--applied-title);
}

.applied-breakdown-card.stabilization .breakdown-title[b-umviftssow] {
    color: var(--applied-stab-title);
}

.applied-breakdown-card.winddown .breakdown-title[b-umviftssow] {
    color: var(--applied-winddown-title);
}

.breakdown-rows[b-umviftssow] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.72rem;
}

.breakdown-row[b-umviftssow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 0;
}

.breakdown-row .row-label[b-umviftssow] {
    color: var(--text-secondary);
}

.breakdown-row .row-value[b-umviftssow] {
    color: var(--text-primary);
    font-weight: 500;
}

.breakdown-row.dev .row-label[b-umviftssow],
.breakdown-row.dev .row-value[b-umviftssow] {
    color: var(--primary-color);
}

.breakdown-row.stab .row-label[b-umviftssow],
.breakdown-row.stab .row-value[b-umviftssow] {
    color: var(--popover-stabilization-text);
}

.breakdown-row.muted .row-label[b-umviftssow],
.breakdown-row.muted .row-value[b-umviftssow] {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.breakdown-row.total[b-umviftssow] {
    border-top: 1px dashed var(--border-color);
    margin-top: 2px;
    padding-top: 4px;
}

.breakdown-row.total .row-label[b-umviftssow] {
    font-weight: 600;
    color: var(--applied-title);
}

.breakdown-row.total .row-value[b-umviftssow] {
    font-weight: 700;
    color: var(--applied-title);
    background: var(--applied-value-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

.applied-breakdown-card.stabilization .breakdown-row.total .row-label[b-umviftssow],
.applied-breakdown-card.stabilization .breakdown-row.total .row-value[b-umviftssow] {
    color: var(--applied-stab-title);
}

.applied-breakdown-card.winddown .breakdown-row.total .row-label[b-umviftssow],
.applied-breakdown-card.winddown .breakdown-row.total .row-value[b-umviftssow] {
    color: var(--applied-winddown-title);
}

/* Theme-aware styling is handled via CSS variables in app.css */
/* /Components/SimplePopover.razor.rz.scp.css */
/* SimplePopover - Trigger wrapper styles (scoped) */
/* Portal styles are in site.css since they're appended to body */

.simple-popover-wrapper[b-6plz29wxmw] {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.simple-popover-trigger[b-6plz29wxmw] {
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hidden template element */
.simple-popover-portal[b-6plz29wxmw] {
    display: none;
}
/* /Pages/Admin.razor.rz.scp.css */
/* ========================================
   ADMIN PAGE - Purge Soft-Deleted Records
   ======================================== */

.admin-page[b-8muqc96n64] {
    width: 100%;
    padding: 0 0.5rem;
}

/* Page Header */
.page-header[b-8muqc96n64] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--settings-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.header-left[b-8muqc96n64] { display: flex; align-items: center; gap: 0.75rem; }
.header-icon[b-8muqc96n64] { width: 36px; height: 36px; background: var(--header-icon-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-on-primary); }
.header-title[b-8muqc96n64] { font-size: 1.25rem; font-weight: 700; color: var(--text-on-primary); margin: 0; }

/* Header Right */
.header-right[b-8muqc96n64] { display: flex; align-items: center; flex-shrink: 0; }

/* Refresh Button */
.btn-refresh[b-8muqc96n64] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover:not(:disabled)[b-8muqc96n64] { background: var(--header-border-light); }
.btn-refresh:disabled[b-8muqc96n64] { opacity: 0.6; cursor: not-allowed; }
.btn-refresh i[b-8muqc96n64] { font-size: 0.9rem; }

.btn-refresh .spinner[b-8muqc96n64] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-8muqc96n64 1s linear infinite;
}

@keyframes spin-b-8muqc96n64 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading State */
.loading-container[b-8muqc96n64] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; gap: 1rem; }

/* Tabs */
.admin-tabs[b-8muqc96n64] { background: var(--card-bg); border-radius: 8px; box-shadow: var(--shadow-sm); }
.tab-nav[b-8muqc96n64] { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); padding: 0 1rem; }
.tab-btn[b-8muqc96n64] { padding: 0.75rem 1.5rem; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; }
.tab-btn:hover[b-8muqc96n64] { color: var(--primary-color); }
.tab-btn.active[b-8muqc96n64] { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.tab-content[b-8muqc96n64] { padding: 1.5rem; min-height: 400px; }
.tab-panel[b-8muqc96n64] { animation: fadeIn-b-8muqc96n64 0.2s ease; }
@keyframes fadeIn-b-8muqc96n64 { from { opacity: 0; } to { opacity: 1; } }

/* Panel Header */
.panel-header[b-8muqc96n64] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.panel-header h4[b-8muqc96n64] { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }

/* Empty State */
.empty-state[b-8muqc96n64] { text-align: center; padding: 4rem 2rem; background: var(--bg-secondary); border-radius: 8px; }
.empty-state.small[b-8muqc96n64] { padding: 2rem; }
.empty-state i[b-8muqc96n64] { font-size: 2rem; color: var(--success-color); display: block; margin-bottom: 0.5rem; }
.empty-state p[b-8muqc96n64] { color: var(--text-secondary); margin: 0; }

/* Table Styling */
.table[b-8muqc96n64] { font-size: 0.875rem; }
.table th[b-8muqc96n64] { font-weight: 600; background: var(--bg-secondary); color: var(--text-secondary); }
.table td[b-8muqc96n64] { vertical-align: middle; color: var(--text-primary); border-bottom-color: var(--border-color); }
.text-end[b-8muqc96n64] { text-align: right; }
.text-muted[b-8muqc96n64] { color: var(--text-muted); }

/* ========================================
   DIALOGS
   ======================================== */
.dialog-backdrop[b-8muqc96n64] { position: fixed; inset: 0; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.dialog[b-8muqc96n64] { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow-lg); width: 450px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; }
.dialog.dialog-sm[b-8muqc96n64] { width: 420px; }
.dialog-header[b-8muqc96n64] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.dialog-header-danger[b-8muqc96n64] { background: var(--danger-gradient); }
.dialog-header-danger h3[b-8muqc96n64] { color: var(--text-on-primary); }
.dialog-header-danger .btn-close[b-8muqc96n64] { color: var(--text-on-primary); }
.dialog-header h3[b-8muqc96n64] { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.dialog .btn-close[b-8muqc96n64] { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; border-radius: 4px; }
.dialog .btn-close:hover[b-8muqc96n64] { background: var(--bg-tertiary); color: var(--text-primary); }
.dialog-body[b-8muqc96n64] { padding: 1.5rem; overflow-y: auto; color: var(--text-primary); }
.dialog-footer[b-8muqc96n64] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); background: var(--bg-tertiary); border-radius: 0 0 12px 12px; }
.dialog-footer .btn[b-8muqc96n64] { padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; font-size: 0.875rem; }
.dialog-footer .btn-secondary[b-8muqc96n64] { background: var(--bg-secondary); border: none; color: var(--text-primary); }
.dialog-footer .btn-secondary:hover[b-8muqc96n64] { background: var(--border-color); }
.dialog-footer .btn-danger[b-8muqc96n64] { background: var(--danger-color); border: none; color: var(--text-on-primary); }
.dialog-footer .btn-danger:hover[b-8muqc96n64] { background: var(--danger-hover); }

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container[b-8muqc96n64] { position: fixed; bottom: 24px; right: 24px; z-index: 1100; }
.toast[b-8muqc96n64] { min-width: 280px; border-radius: 8px; box-shadow: var(--shadow-lg); }
.toast-success[b-8muqc96n64] { background: var(--success-color); color: var(--text-on-primary); }
.toast-error[b-8muqc96n64] { background: var(--danger-color); color: var(--text-on-primary); }
.toast-body[b-8muqc96n64] { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; }

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .admin-page[b-8muqc96n64] { padding: 0 0.5rem; }

    /* ===== Hide text labels on mobile ===== */
    .tab-label[b-8muqc96n64],
    .btn-text[b-8muqc96n64] {
        display: none;
    }

    .page-header[b-8muqc96n64] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .header-left[b-8muqc96n64] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header-icon[b-8muqc96n64] { width: 32px; height: 32px; font-size: 1rem; flex-shrink: 0; }
    .header-title[b-8muqc96n64] { font-size: 1.1rem; white-space: nowrap; }

    .header-right[b-8muqc96n64] { flex-shrink: 0; }

    .btn-refresh[b-8muqc96n64] {
        width: 36px;
        height: 36px;
    }

    /* Tabs - icon-only with badge */
    .admin-tabs[b-8muqc96n64] { border-radius: 10px; }
    .tab-nav[b-8muqc96n64] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 0.5rem;
        gap: 0.25rem;
    }
    .tab-nav[b-8muqc96n64]::-webkit-scrollbar { display: none; }
    .tab-btn[b-8muqc96n64] {
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px;
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
        gap: 0.25rem;
    }
    .tab-btn .badge[b-8muqc96n64] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    .tab-content[b-8muqc96n64] { padding: 0.75rem; min-height: 250px; }

    /* Panel header */
    .panel-header[b-8muqc96n64] {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .panel-header h4[b-8muqc96n64] {
        font-size: 0.9375rem;
        flex: 1;
        min-width: 120px;
    }
    .panel-header .btn[b-8muqc96n64] {
        font-size: 0.75rem;
    }

    .text-muted[b-8muqc96n64] {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    /* Table responsive - horizontal scroll */
    .table-responsive[b-8muqc96n64],
    .tab-panel > table[b-8muqc96n64] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .table[b-8muqc96n64] { font-size: 0.75rem; min-width: 450px; }
    .table th[b-8muqc96n64], .table td[b-8muqc96n64] { padding: 0.375rem 0.25rem; }
    .table th[b-8muqc96n64] { font-size: 0.6875rem; }
    .table td:last-child[b-8muqc96n64] { white-space: nowrap; }

    /* Action buttons in table */
    .table .btn-sm[b-8muqc96n64] {
        width: 28px;
        height: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Empty state */
    .empty-state[b-8muqc96n64] {
        padding: 1rem;
    }
    .empty-state i[b-8muqc96n64] {
        font-size: 1.5rem;
    }
    .empty-state p[b-8muqc96n64] {
        font-size: 0.8125rem;
    }

    /* Dialog - full screen on mobile */
    .dialog[b-8muqc96n64] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .dialog-header[b-8muqc96n64] { padding: 0.75rem; }
    .dialog-header h3[b-8muqc96n64] { font-size: 1rem; }
    .dialog-body[b-8muqc96n64] { padding: 0.75rem; }
    .dialog-footer[b-8muqc96n64] {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .dialog-footer .btn[b-8muqc96n64] {
        flex: 1;
        min-width: 80px;
        min-height: 40px;
        font-size: 0.8125rem;
    }

    /* Toast */
    .toast-container[b-8muqc96n64] {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
    }
    .toast[b-8muqc96n64] { min-width: auto; width: 100%; font-size: 0.8125rem; }
}
/* /Pages/Capacity.razor.rz.scp.css */
/* ========================================
   CAPACITY DASHBOARD - Multi-Project Planning
   ======================================== */

.capacity-page[b-2du7acxyb5] {
    width: 100%;
    height: calc(100vh - 170px);
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Page Header */
.page-header[b-2du7acxyb5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.header-left[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-2du7acxyb5] {
    font-size: 1.75rem;
    color: var(--text-on-primary);
}

.page-header h1[b-2du7acxyb5] {
    color: var(--text-on-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.page-header .subtitle[b-2du7acxyb5] {
    color: var(--text-on-primary-muted);
    font-size: 0.8rem;
}

.header-actions[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Desktop actions - visible on larger screens */
.desktop-actions[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile overflow menu - hidden on desktop */
.mobile-overflow-menu[b-2du7acxyb5] {
    display: none;
    position: relative;
}

.header-actions .btn[b-2du7acxyb5] {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.header-actions .btn-icon[b-2du7acxyb5] {
    padding: 0.4rem 0.6rem;
}

/* Header Refresh Button */
.header-actions .btn-refresh[b-2du7acxyb5] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-actions .btn-refresh:hover:not(:disabled)[b-2du7acxyb5] {
    background: var(--header-border-light);
}

.header-actions .btn-refresh:disabled[b-2du7acxyb5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.header-actions .btn-refresh i[b-2du7acxyb5] {
    font-size: 0.9rem;
}

.header-actions .spinner[b-2du7acxyb5] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-2du7acxyb5 1s linear infinite;
}

@keyframes spin-b-2du7acxyb5 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header-integrated filter styles */
.header-filter[b-2du7acxyb5] {
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
}

.header-filter .mode-btn[b-2du7acxyb5] {
    color: var(--text-on-primary);
}

.header-filter .mode-btn:hover[b-2du7acxyb5] {
    background: var(--header-icon-bg);
    color: var(--text-on-primary);
}

.header-filter .mode-btn.active[b-2du7acxyb5] {
    background: var(--bg-primary);
    color: var(--primary-color);
}

.header-dropdown[b-2du7acxyb5] {
    min-width: 200px;
}

/* KPI Section */
.kpi-section[b-2du7acxyb5] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.kpi-card[b-2du7acxyb5] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover[b-2du7acxyb5] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-card.at-risk[b-2du7acxyb5] {
    border-color: var(--danger-color);
    background: var(--danger-bg);
}

.kpi-icon[b-2du7acxyb5] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kpi-icon.projects[b-2du7acxyb5] { background: var(--primary-bg); color: var(--primary-color); }
.kpi-icon.resources[b-2du7acxyb5] { background: var(--success-bg); color: var(--success-color); }
.kpi-icon.warning[b-2du7acxyb5] { background: var(--warning-bg); color: var(--warning-color); }
.kpi-icon.risk[b-2du7acxyb5] { background: var(--danger-bg); color: var(--danger-color); }
.kpi-icon.utilization[b-2du7acxyb5] { background: var(--info-bg); color: var(--info-color); }

.kpi-content[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
}

.kpi-value[b-2du7acxyb5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.kpi-label[b-2du7acxyb5] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Tabs */
.nav-tabs[b-2du7acxyb5] {
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
}

.nav-tabs .nav-link[b-2du7acxyb5] {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.nav-tabs .nav-link:hover[b-2du7acxyb5] {
    color: var(--primary-color);
    border-bottom-color: rgba(var(--primary-rgb), 0.4);
}

.nav-tabs .nav-link.active[b-2du7acxyb5] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

/* Tab Content */
.tab-content[b-2du7acxyb5] {
    flex: 1;
    overflow: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
}

/* Loading State */
.loading-container[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 1rem;
    color: var(--text-secondary);
}

.loading-container p[b-2du7acxyb5] {
    margin: 0;
    font-size: 0.9rem;
}

/* Spinning animation */
@keyframes spin-b-2du7acxyb5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin[b-2du7acxyb5] {
    animation: spin-b-2du7acxyb5 1s linear infinite;
}

/* Toast Notifications */
.toast-container[b-2du7acxyb5] {
    z-index: 1100;
}

.toast[b-2du7acxyb5] {
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

/* Modal Adjustments */
.modal-backdrop[b-2du7acxyb5] {
    z-index: 1040;
}

.modal[b-2du7acxyb5] {
    z-index: 1050;
}

.modal-content[b-2du7acxyb5] {
    border-radius: 12px;
    border: none;
    box-shadow: var(--shadow-lg);
    background: var(--card-bg);
}

.modal-header[b-2du7acxyb5] {
    background: var(--surface-secondary);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--border-color);
}

.modal-title[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ========================================
   PRIMARY FILTER CARD - Matches Epics Page
   ======================================== */

/* Filter Mode Toggle (By Project / By Team) */
.filter-mode-toggle[b-2du7acxyb5] {
    display: flex;
    background: var(--surface-secondary);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border-color);
}

.filter-mode-toggle .mode-btn[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-mode-toggle .mode-btn:hover[b-2du7acxyb5] {
    background: var(--primary-bg);
    color: var(--primary-color);
}

.filter-mode-toggle .mode-btn.active[b-2du7acxyb5] {
    background: var(--primary-color);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-primary);
}

.filter-mode-toggle .mode-btn i[b-2du7acxyb5] {
    font-size: 0.875rem;
}

.team-filter[b-2du7acxyb5],
.project-filter[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 250px;
}

.team-filter .form-label[b-2du7acxyb5],
.project-filter .form-label[b-2du7acxyb5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-filter .form-select[b-2du7acxyb5],
.project-filter .form-select[b-2du7acxyb5] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    background-color: var(--card-bg);
    color: var(--text-primary);
    min-width: 200px;
}

.team-filter .form-select:focus[b-2du7acxyb5],
.project-filter .form-select:focus[b-2du7acxyb5] {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* ========================================
   ENHANCED TIMELINE TAB STYLES
   ======================================== */

.timeline-tab-content[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.tab-header[b-2du7acxyb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.timeline-controls[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-range-label[b-2du7acxyb5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0 0.5rem;
}

.timeline-actions[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mode-toggle[b-2du7acxyb5] {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.btn-mode[b-2du7acxyb5] {
    padding: 0.4rem 0.75rem;
    border: none;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
}

.btn-mode:hover[b-2du7acxyb5] {
    background: var(--hover-bg);
}

.btn-mode.active[b-2du7acxyb5] {
    background: var(--primary-color);
    color: white;
}

.btn-refresh[b-2du7acxyb5],
.btn-secondary[b-2du7acxyb5] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.btn-refresh:hover[b-2du7acxyb5],
.btn-secondary:hover[b-2du7acxyb5] {
    background: var(--hover-bg);
    border-color: var(--border-color-strong);
}

.btn-adjust-forecast[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    background: var(--purple-gradient);
    border: none;
    color: var(--text-on-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-adjust-forecast:hover:not(:disabled)[b-2du7acxyb5] {
    background: var(--purple-gradient-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-purple);
}

.btn-adjust-forecast:disabled[b-2du7acxyb5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-state[b-2du7acxyb5],
.empty-state[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    gap: 0.75rem;
}

.empty-state i[b-2du7acxyb5] {
    font-size: 2.5rem;
    color: var(--text-muted);
}

/* Timeline Container */
.timeline-outer-wrapper[b-2du7acxyb5] {
    flex: 1;
    overflow: hidden;
    padding: 0.5rem;
}

.timeline-scroll-wrapper[b-2du7acxyb5] {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.timeline-container[b-2du7acxyb5] {
    min-width: 800px;
}

/* Timeline Header */
.timeline-header[b-2du7acxyb5] {
    display: flex;
    background: var(--surface-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.timeline-project-label[b-2du7acxyb5],
.timeline-resource-label[b-2du7acxyb5] {
    width: 300px;
    min-width: 300px;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary);
    border-right: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    z-index: 11;
}

.timeline-months[b-2du7acxyb5] {
    display: flex;
    flex: 1;
}

.timeline-month[b-2du7acxyb5] {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--border-color);
    font-size: 0.75rem;
}



/* Project Row Styles */
.timeline-project-row[b-2du7acxyb5] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    transition: background 0.2s;
}

.timeline-project-row:hover[b-2du7acxyb5] {
    background: var(--hover-bg);
}

.timeline-project-info[b-2du7acxyb5] {
    width: 300px;
    min-width: 300px;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-project-row:hover .timeline-project-info[b-2du7acxyb5] {
    background: var(--hover-bg);
}

.project-header[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 22px;
    line-height: 22px;
}

.project-header .project-name[b-2du7acxyb5] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.project-header .status-badge[b-2du7acxyb5] {
    flex-shrink: 0;
    margin-left: auto;
}

.project-resources[b-2du7acxyb5] {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.resource-entry[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin-bottom: 12px;
}

.resource-entry i[b-2du7acxyb5] {
    font-size: 0.625rem;
    color: var(--text-muted);
}

.resource-entry .legend-color[b-2du7acxyb5] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.no-resources-label[b-2du7acxyb5] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding-left: 1.25rem;
}

/* Status Badge */
.status-badge[b-2du7acxyb5] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.status-green[b-2du7acxyb5] {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

.status-badge.status-yellow[b-2du7acxyb5] {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.status-badge.status-red[b-2du7acxyb5] {
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.status-badge.status-gray[b-2du7acxyb5] {
    background: var(--surface-secondary);
    color: var(--text-muted);
}

/* Status Dot */
.status-dot[b-2du7acxyb5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.status-green[b-2du7acxyb5] {
    background: var(--success-color);
}

.status-dot.status-yellow[b-2du7acxyb5] {
    background: var(--warning-color);
}

.status-dot.status-red[b-2du7acxyb5] {
    background: var(--danger-color);
}

.status-dot.status-gray[b-2du7acxyb5] {
    background: var(--text-muted);
}

/* Timeline Bars Container */
.timeline-project-bars[b-2du7acxyb5] {
    flex: 1;
    position: relative;
    min-height: 60px;
}

.timeline-grid[b-2du7acxyb5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
}

.timeline-grid-month[b-2du7acxyb5] {
    border-right: 1px solid var(--border-subtle);
    height: 100%;
}

/* Project Bar */
.project-bar[b-2du7acxyb5] {
    position: absolute;
    top: 8px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0.85;
    transition: opacity 0.2s;
    cursor: pointer;
}

.project-bar:hover[b-2du7acxyb5] {
    opacity: 1;
}

.project-bar-progress[b-2du7acxyb5] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bar-progress-overlay);
    border-radius: 4px 0 0 4px;
}

/* Resource Allocation Bar (nested under project) */
.resource-allocation-bar[b-2du7acxyb5] {
    position: absolute;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
}

.resource-allocation-bar:hover[b-2du7acxyb5] {
    opacity: 0.9 !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.resource-allocation-bar.clickable[b-2du7acxyb5] {
    cursor: pointer;
}

.resource-allocation-bar.clickable:hover[b-2du7acxyb5]::after {
    content: "Click to edit";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;
}

/* Fixed Hours Allocation Bar */
.resource-allocation-bar.fixed-hours-bar[b-2du7acxyb5] {
    background: var(--teal-gradient) !important;
    border: 1px dashed var(--header-border-light);
    cursor: default;
}

.resource-allocation-bar.fixed-hours-bar .hours-label[b-2du7acxyb5] {
    color: var(--text-on-primary);
    text-shadow: var(--text-shadow-dark);
}

/* Fixed hours entry in sidebar */
.resource-entry.fixed-hours[b-2du7acxyb5] {
    background: var(--teal-bg);
    border-left: 2px solid var(--teal-color);
    padding-left: 4px;
    margin-left: -4px;
}

/* Hours label on allocation bars */
.hours-label[b-2du7acxyb5] {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: var(--text-shadow-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 8px);
}

/* Total hours label in project/resource info */
.total-hours-label[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: 500;
    height: 18px;
    line-height: 18px;
    margin-bottom: 4px;
}

.total-hours-label i[b-2du7acxyb5] {
    font-size: 0.65rem;
}

/* Resource hours in the resource entry */
.resource-hours[b-2du7acxyb5] {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--primary-color);
    font-weight: 500;
    background: var(--primary-bg);
    padding: 1px 4px;
    border-radius: 3px;
}

/* View mode toggle styling */
.view-mode-toggle[b-2du7acxyb5] {
    display: flex;
    gap: 2px;
    background: var(--surface-secondary);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid var(--border-color);
}

/* Deadline Marker */
.deadline-marker[b-2du7acxyb5] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.deadline-diamond[b-2du7acxyb5] {
    color: var(--primary-color);
    font-size: 14px;
    line-height: 1;
    text-shadow: var(--text-shadow-dark);
}

.deadline-marker.overdue .deadline-diamond[b-2du7acxyb5] {
    color: var(--danger-color);
}

/* Timeline Legend */
.timeline-legend[b-2du7acxyb5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.legend-section[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.legend-section-title[b-2du7acxyb5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.legend-item[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-color[b-2du7acxyb5] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-label[b-2du7acxyb5] {
    white-space: nowrap;
}

.deadline-marker-icon[b-2du7acxyb5] {
    color: var(--primary-color);
    font-size: 12px;
}

/* ========================================
   TIME OFF CALENDAR TAB
   ======================================== */

.timeoff-tab-content[b-2du7acxyb5] {
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

.timeoff-header[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.date-range-selector[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-selector label[b-2du7acxyb5] {
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.date-range-selector input[type="month"][b-2du7acxyb5] {
    width: 150px;
}

.date-range-selector span[b-2du7acxyb5] {
    color: var(--text-secondary);
    font-weight: 500;
}

.view-toggle[b-2du7acxyb5] {
    display: flex;
    gap: 0.5rem;
}

.btn-mode[b-2du7acxyb5] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.btn-mode:hover[b-2du7acxyb5] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.btn-mode.active[b-2du7acxyb5] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Summary Cards */
.timeoff-summary[b-2du7acxyb5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}

.summary-icon[b-2du7acxyb5] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.summary-icon.holiday[b-2du7acxyb5] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.summary-icon.timeoff[b-2du7acxyb5] {
    background: var(--info-bg);
    color: var(--info-color);
}

.summary-icon.impact[b-2du7acxyb5] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

.summary-icon.resources[b-2du7acxyb5] {
    background: var(--success-bg);
    color: var(--success-color);
}

.summary-content[b-2du7acxyb5] {
    flex: 1;
}

.summary-label[b-2du7acxyb5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.summary-value[b-2du7acxyb5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* List View */
.timeoff-list-view[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.month-section[b-2du7acxyb5] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.month-header[b-2du7acxyb5] {
    background: var(--surface-secondary);
    padding: 1rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.month-header h4[b-2du7acxyb5] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.month-breakdown[b-2du7acxyb5] {
    display: flex;
    gap: 0.5rem;
}

.timeoff-table[b-2du7acxyb5] {
    margin: 0;
}

.timeoff-table thead[b-2du7acxyb5] {
    background: var(--surface-secondary);
}

.timeoff-table th[b-2du7acxyb5] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.timeoff-table td[b-2du7acxyb5] {
    padding: 0.75rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.holiday-row[b-2du7acxyb5] {
    background: var(--warning-bg);
}

.holiday-row:hover[b-2du7acxyb5] {
    background: var(--warning-bg);
    filter: brightness(0.95);
}

.timeoff-row[b-2du7acxyb5] {
    background: var(--info-bg);
}

.timeoff-row:hover[b-2du7acxyb5] {
    background: var(--info-bg);
    filter: brightness(0.95);
}

/* Calendar View */
.calendar-view[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calendar-month[b-2du7acxyb5] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.calendar-month-header[b-2du7acxyb5] {
    background: var(--primary-gradient);
    padding: 1rem;
    color: var(--text-on-primary);
}

.calendar-month-header h4[b-2du7acxyb5] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-grid[b-2du7acxyb5] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
    padding: 1px;
}

.calendar-day-header[b-2du7acxyb5] {
    background: var(--surface-secondary);
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.calendar-day[b-2du7acxyb5] {
    background: var(--card-bg);
    min-height: 100px;
    padding: 0.5rem;
    position: relative;
    transition: all 0.2s;
}

.calendar-day.empty[b-2du7acxyb5] {
    background: var(--surface-secondary);
    min-height: 100px;
}

.calendar-day.weekend[b-2du7acxyb5] {
    background: var(--surface-secondary);
}

.calendar-day.has-holiday[b-2du7acxyb5] {
    background: var(--warning-bg);
}

.calendar-day.has-timeoff[b-2du7acxyb5] {
    background: var(--info-bg);
}

.calendar-day.has-holiday.has-timeoff[b-2du7acxyb5] {
    background: linear-gradient(135deg, var(--warning-bg) 0%, var(--info-bg) 100%);
}

.calendar-day:hover[b-2du7acxyb5] {
    box-shadow: inset 0 0 0 2px var(--primary-color);
    z-index: 1;
}

.day-number[b-2du7acxyb5] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.calendar-day.weekend .day-number[b-2du7acxyb5] {
    color: var(--text-muted);
}

.day-content[b-2du7acxyb5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-event[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
}

.calendar-event.holiday[b-2du7acxyb5] {
    background: var(--warning-color);
    color: var(--warning-text-dark);
    border-left: 3px solid var(--warning-text-dark);
}

.calendar-event.timeoff[b-2du7acxyb5] {
    background: var(--info-color);
    color: white;
    border-left: 3px solid var(--info-color-dark);
}

.calendar-event i[b-2du7acxyb5] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.event-name[b-2du7acxyb5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Empty State */
.empty-state[b-2du7acxyb5] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.empty-state i[b-2du7acxyb5] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-2du7acxyb5] {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.empty-state small[b-2du7acxyb5] {
    font-size: 0.875rem;
}

/* Responsive adjustments for calendar */
@media (max-width: 1200px) {
    .calendar-day[b-2du7acxyb5] {
        min-height: 80px;
    }

    .event-name[b-2du7acxyb5] {
        display: none;
    }

    .calendar-event[b-2du7acxyb5] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .calendar-grid[b-2du7acxyb5] {
        font-size: 0.75rem;
    }

    .calendar-day[b-2du7acxyb5] {
        min-height: 60px;
        padding: 0.25rem;
    }

    .day-number[b-2du7acxyb5] {
        font-size: 0.75rem;
    }
}

/* Timeline Capacity Row Styles */
.timeline-capacity-row[b-2du7acxyb5] {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-color);
}

.capacity-cell[b-2du7acxyb5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 4px;
    border-right: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.capacity-cell:hover[b-2du7acxyb5] {
    background: var(--primary-bg);
}

.capacity-cell.month-past[b-2du7acxyb5] {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.capacity-cell.month-current[b-2du7acxyb5] {
    background: var(--primary-bg);
    font-weight: 600;
}

.capacity-cell.month-future[b-2du7acxyb5] {
    background: var(--card-bg);
}

/* Utilization-based cell styling for future months */
.capacity-cell.month-future.utilization-over[b-2du7acxyb5] {
    background: var(--utilization-over-bg);
    border-left: 3px solid var(--utilization-over);
}

.capacity-cell.month-future.utilization-full[b-2du7acxyb5] {
    background: var(--utilization-full-bg);
    border-left: 3px solid var(--utilization-full);
}

.capacity-cell.month-future.utilization-healthy[b-2du7acxyb5] {
    background: var(--utilization-healthy-bg);
    border-left: 3px solid var(--utilization-healthy);
}

.capacity-cell.month-future.utilization-under[b-2du7acxyb5] {
    background: var(--utilization-under-bg);
    border-left: 3px solid var(--utilization-under);
}

.capacity-cell.month-future.utilization-none[b-2du7acxyb5] {
    background: var(--hover-bg);
}

.capacity-value[b-2du7acxyb5] {
    font-weight: 500;
    color: var(--text-secondary);
}

.capacity-cell.month-past .capacity-value[b-2du7acxyb5] {
    color: var(--text-muted);
}

.capacity-cell.month-future.utilization-over .capacity-value[b-2du7acxyb5] {
    color: var(--utilization-over);
    font-weight: 600;
}

.capacity-cell.month-future.utilization-full .capacity-value[b-2du7acxyb5] {
    color: var(--utilization-full);
}

.capacity-cell.month-future.utilization-healthy .capacity-value[b-2du7acxyb5] {
    color: var(--utilization-healthy);
}

.capacity-cell .timeoff-indicator[b-2du7acxyb5] {
    font-size: 0.65rem;
}

.capacity-cell .over-indicator[b-2du7acxyb5] {
    font-size: 0.65rem;
}

.capacity-cell .actual-badge[b-2du7acxyb5] {
    font-size: 0.65rem;
    background: var(--success-bg);
    color: var(--success-color);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .capacity-page[b-2du7acxyb5] {
        padding: 0 0.5rem;
        height: auto;
        min-height: calc(100vh - var(--mobile-header-height, 56px) - 40px);
        overflow: visible;
    }

    /* ===== Page header ===== */
    .page-header[b-2du7acxyb5] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.625rem;
        border-radius: 10px;
    }

    .header-left[b-2du7acxyb5] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header-icon[b-2du7acxyb5] {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .page-header h1[b-2du7acxyb5] {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .page-header .subtitle[b-2du7acxyb5] {
        display: none;
    }

    /* ===== Header Actions - Mobile Layout ===== */
    .header-actions[b-2du7acxyb5] {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Hide desktop actions on mobile */
    .desktop-actions[b-2du7acxyb5] {
        display: none;
    }

    /* Show mobile overflow menu */
    .mobile-overflow-menu[b-2du7acxyb5] {
        display: block;
    }

    /* Header dropdown - hidden on mobile, project dropdown shown elsewhere */
    .header-dropdown[b-2du7acxyb5] {
        display: none;
    }

    .overflow-menu-btn[b-2du7acxyb5] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--header-icon-bg);
        border: 1px solid var(--header-border-light);
        color: var(--text-on-primary);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .overflow-menu-btn:hover[b-2du7acxyb5] {
        background: var(--header-border-light);
    }

    .overflow-dropdown[b-2du7acxyb5] {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 180px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 1100;
        overflow: hidden;
        animation: capacityDropdownFadeIn-b-2du7acxyb5 0.15s ease-out;
    }

    @keyframes capacityDropdownFadeIn-b-2du7acxyb5 {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .overflow-section-label[b-2du7acxyb5] {
        padding: 0.5rem 1rem 0.25rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .overflow-divider[b-2du7acxyb5] {
        height: 1px;
        background: var(--border-color);
        margin: 0.25rem 0;
    }

    .overflow-item[b-2du7acxyb5] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.625rem 1rem;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 0.15s ease;
        text-align: left;
    }

    .overflow-item:hover[b-2du7acxyb5] {
        background: var(--bg-tertiary);
    }

    .overflow-item i[b-2du7acxyb5] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        width: 16px;
        text-align: center;
    }

    .overflow-item:disabled[b-2du7acxyb5] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .spinner-sm[b-2du7acxyb5] {
        width: 14px;
        height: 14px;
        border: 2px solid var(--border-color);
        border-top: 2px solid var(--primary-color);
        border-radius: 50%;
        animation: spin-b-2du7acxyb5 1s linear infinite;
    }

    /* ===== KPI Section ===== */
    .kpi-section[b-2du7acxyb5] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .kpi-card[b-2du7acxyb5] {
        padding: 0.625rem;
        gap: 0.5rem;
        border-radius: 8px;
    }

    .kpi-icon[b-2du7acxyb5] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .kpi-value[b-2du7acxyb5] {
        font-size: 1.125rem;
    }

    .kpi-label[b-2du7acxyb5] {
        font-size: 0.6875rem;
    }

    /* ===== Tab Navigation - Icon-only on mobile ===== */
    .nav-tabs[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 0.5rem;
    }

    .nav-tabs[b-2du7acxyb5]::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item[b-2du7acxyb5] {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link[b-2du7acxyb5] {
        white-space: nowrap;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        gap: 0.25rem;
        min-height: 40px;
    }

    /* Hide tab labels on mobile, show only icons */
    .nav-tabs .nav-link .tab-label[b-2du7acxyb5] {
        display: none;
    }

    .nav-tabs .nav-link i[b-2du7acxyb5] {
        font-size: 1rem;
    }

    /* ===== Tab Content ===== */
    .tab-content[b-2du7acxyb5] {
        padding: 0.5rem;
        border-radius: 0 0 10px 10px;
        overflow-x: visible;
    }

    /* Gantt - full width on mobile */
    .tab-content > .portfolio-gantt[b-2du7acxyb5] {
        margin: -0.5rem;
        border-radius: 0;
    }

    /* ===== Loading State ===== */
    .loading-container[b-2du7acxyb5] {
        padding: 2rem 1rem;
    }

    .loading-container p[b-2du7acxyb5] {
        font-size: 0.875rem;
    }

    /* ===== Empty State ===== */
    .empty-state[b-2du7acxyb5] {
        padding: 2rem 1rem;
    }

    .empty-state i[b-2du7acxyb5] {
        font-size: 2rem;
    }

    .empty-state p[b-2du7acxyb5] {
        font-size: 0.875rem;
    }

    /* ===== Timeline Tab Content ===== */
    .timeline-tab-content .tab-header[b-2du7acxyb5] {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .timeline-controls[b-2du7acxyb5] {
        justify-content: center;
        width: 100%;
    }

    .timeline-range-label[b-2du7acxyb5] {
        font-size: 0.75rem;
    }

    .timeline-actions[b-2du7acxyb5] {
        justify-content: center;
        width: 100%;
        gap: 0.5rem;
    }

    .timeline-actions .btn[b-2du7acxyb5] {
        flex: 1;
        font-size: 0.75rem;
    }

    .btn-adjust-forecast span[b-2du7acxyb5] {
        display: inline; /* Keep this text visible */
    }

    /* ===== Timeline Container - Horizontal Scroll ===== */
    .timeline-outer-wrapper[b-2du7acxyb5] {
        margin: 0 -0.625rem;
        padding: 0 0.625rem;
    }

    .timeline-scroll-wrapper[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .timeline-container[b-2du7acxyb5] {
        min-width: 600px;
    }

    .timeline-header[b-2du7acxyb5] {
        font-size: 0.6875rem;
    }

    .timeline-project-label[b-2du7acxyb5] {
        min-width: 100px;
        font-size: 0.6875rem;
    }

    .timeline-month[b-2du7acxyb5] {
        font-size: 0.625rem;
        padding: 0.375rem 0.25rem;
    }

    .timeline-row[b-2du7acxyb5] {
        min-height: 36px;
    }

    .resource-label[b-2du7acxyb5] {
        min-width: 100px;
        font-size: 0.6875rem;
        padding: 0.375rem;
    }

    /* ===== Gantt Chart - Horizontal Scroll ===== */
    .gantt-container[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gantt-chart[b-2du7acxyb5] {
        min-width: 800px;
    }

    .gantt-row-label[b-2du7acxyb5] {
        min-width: 120px;
        font-size: 0.6875rem;
    }

    .gantt-bar-label[b-2du7acxyb5] {
        font-size: 0.625rem;
    }

    /* ===== Heatmap - Horizontal Scroll ===== */
    .heatmap-container[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .heatmap-grid[b-2du7acxyb5] {
        min-width: 700px;
    }

    .heatmap-row-header[b-2du7acxyb5] {
        min-width: 100px;
        font-size: 0.6875rem;
    }

    .heatmap-cell[b-2du7acxyb5] {
        min-width: 50px;
        font-size: 0.625rem;
    }

    .heatmap-header-cell[b-2du7acxyb5] {
        font-size: 0.625rem;
    }

    /* ===== Allocations Table ===== */
    .allocations-container[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .allocations-table[b-2du7acxyb5] {
        min-width: 600px;
        font-size: 0.75rem;
    }

    .allocations-table th[b-2du7acxyb5],
    .allocations-table td[b-2du7acxyb5] {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }

    /* ===== Forecasts Table ===== */
    .forecasts-container[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .forecasts-table[b-2du7acxyb5] {
        min-width: 600px;
        font-size: 0.75rem;
    }

    /* ===== Time Off Tab - Mobile Optimized ===== */
    .timeoff-tab-content[b-2du7acxyb5] {
        padding: 0;
        margin: -0.5rem;
    }

    .timeoff-header[b-2du7acxyb5] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
        margin-bottom: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .date-range-selector[b-2du7acxyb5] {
        flex-wrap: wrap;
        gap: 0.375rem;
        width: 100%;
    }

    .date-range-selector label[b-2du7acxyb5] {
        width: 100%;
        font-size: 0.75rem;
        margin-bottom: 0;
    }

    .date-range-selector input[b-2du7acxyb5] {
        flex: 1;
        min-width: 100px;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .date-range-selector span[b-2du7acxyb5] {
        font-size: 0.75rem;
    }

    .view-toggle[b-2du7acxyb5] {
        width: 100%;
        display: flex;
    }

    .view-toggle .btn-mode[b-2du7acxyb5] {
        flex: 1;
        font-size: 0.75rem;
        padding: 0.5rem;
    }

    /* Hide button text on mobile, show only icons */
    .view-toggle .btn-mode .btn-text[b-2du7acxyb5] {
        display: none;
    }

    /* Summary cards */
    .timeoff-summary[b-2du7acxyb5] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 0;
    }

    .summary-card[b-2du7acxyb5] {
        flex-direction: column;
        text-align: center;
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .summary-icon[b-2du7acxyb5] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
        border-radius: 6px;
    }

    .summary-info h3[b-2du7acxyb5] {
        font-size: 1rem;
    }

    .summary-info p[b-2du7acxyb5] {
        font-size: 0.625rem;
    }

    /* List View - Compact mobile layout */
    .timeoff-list-view[b-2du7acxyb5] {
        gap: 0;
    }

    .month-section[b-2du7acxyb5] {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 0;
    }

    .month-section .month-header[b-2du7acxyb5] {
        padding: 0.625rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .month-section .month-header h4[b-2du7acxyb5] {
        font-size: 0.875rem;
    }

    .month-section .month-header .badge[b-2du7acxyb5] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    .month-breakdown[b-2du7acxyb5] {
        gap: 0.375rem;
    }

    .month-breakdown .badge[b-2du7acxyb5] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.25rem;
    }

    /* Table - Horizontal scroll with visible scrollbar */
    .timeoff-table-wrapper[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .timeoff-table[b-2du7acxyb5] {
        min-width: 500px;
        font-size: 0.75rem;
    }

    .timeoff-table th[b-2du7acxyb5],
    .timeoff-table td[b-2du7acxyb5] {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }

    .timeoff-table th[b-2du7acxyb5] {
        font-size: 0.6875rem;
    }

    /* Hide less important columns on mobile */
    .timeoff-table th:nth-child(5)[b-2du7acxyb5],
    .timeoff-table td:nth-child(5)[b-2du7acxyb5] {
        display: none; /* Hide Location column */
    }

    /* Calendar View - Compact grid */
    .calendar-view[b-2du7acxyb5] {
        gap: 0;
    }

    .calendar-month[b-2du7acxyb5] {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .calendar-month-header[b-2du7acxyb5] {
        padding: 0.625rem 0.75rem;
    }

    .calendar-month-header h4[b-2du7acxyb5] {
        font-size: 0.875rem;
    }

    .calendar-grid[b-2du7acxyb5] {
        gap: 1px;
        background: var(--border-color);
    }

    .calendar-day-header[b-2du7acxyb5] {
        padding: 0.375rem;
        font-size: 0.625rem;
    }

    /* Use 3-letter day names */
    .calendar-day-header[b-2du7acxyb5]::first-letter {
        text-transform: uppercase;
    }

    .calendar-day[b-2du7acxyb5] {
        min-height: 50px;
        padding: 0.25rem;
        background: var(--card-bg);
    }

    .calendar-day.empty[b-2du7acxyb5] {
        min-height: 50px;
    }

    .day-number[b-2du7acxyb5] {
        font-size: 0.6875rem;
        font-weight: 600;
    }

    .calendar-event[b-2du7acxyb5] {
        padding: 0.125rem 0.25rem;
        font-size: 0.5rem;
        border-radius: 2px;
    }

    .calendar-event i[b-2du7acxyb5] {
        font-size: 0.5rem;
    }

    .event-name[b-2du7acxyb5] {
        display: none; /* Hide event names on mobile */
    }

    /* ===== Delivery Schedule ===== */
    .delivery-container[b-2du7acxyb5] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .delivery-timeline[b-2du7acxyb5] {
        min-width: 600px;
    }

    /* ===== Summary Cards ===== */
    .summary-cards[b-2du7acxyb5] {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }

    .summary-card[b-2du7acxyb5] {
        padding: 0.625rem;
        border-radius: 8px;
    }

    .summary-value[b-2du7acxyb5] {
        font-size: 1.125rem;
    }

    .summary-label[b-2du7acxyb5] {
        font-size: 0.625rem;
    }

    /* ===== Legend ===== */
    .legend[b-2du7acxyb5] {
        flex-wrap: wrap;
        gap: 0.375rem;
        font-size: 0.6875rem;
        justify-content: center;
        padding: 0.5rem;
    }

    .legend-item[b-2du7acxyb5] {
        padding: 0.25rem 0.5rem;
    }

    /* ===== Modal Adjustments ===== */
    .modal-dialog[b-2du7acxyb5] {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
}

/* ===== Extra small screens ===== */
@media (max-width: 374px) {
    .capacity-page[b-2du7acxyb5] {
        padding: 0 0.375rem;
    }

    .page-header[b-2du7acxyb5] {
        padding: 0.5rem;
    }

    .page-header h1[b-2du7acxyb5] {
        font-size: 0.9375rem;
    }

    .header-actions[b-2du7acxyb5] {
        grid-template-columns: 1fr 1fr;
    }

    .filter-mode-toggle .mode-btn[b-2du7acxyb5] {
        font-size: 0.6875rem;
        padding: 0.375rem;
    }

    .filter-mode-toggle .mode-btn i[b-2du7acxyb5] {
        display: none;
    }

    .kpi-section[b-2du7acxyb5] {
        grid-template-columns: 1fr;
    }

    .summary-cards[b-2du7acxyb5] {
        grid-template-columns: 1fr !important;
    }

    .nav-tabs .nav-link[b-2du7acxyb5] {
        padding: 0.5rem;
        font-size: 0.6875rem;
    }

    .nav-tabs .nav-link span[b-2du7acxyb5] {
        display: none; /* Hide text, show only icons */
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
.dashboard-container[b-or24johtjr] {
    width: 100%;
    padding: 0 0.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Page Header - matches other pages */
.page-header[b-or24johtjr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.header-left[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-or24johtjr] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-or24johtjr] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

.header-actions[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Desktop actions - visible on larger screens */
.desktop-actions[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Mobile overflow menu - hidden on desktop */
.mobile-overflow-menu[b-or24johtjr] {
    display: none;
    position: relative;
}

/* View Mode Toggle - matches Epics page style */
.header-actions .view-mode-toggle[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem;
}

.header-actions .view-mode-radio[b-or24johtjr] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.header-actions .view-mode-radio:hover[b-or24johtjr] {
    background: var(--bg-secondary);
}

.header-actions .view-mode-radio:has(input:checked)[b-or24johtjr] {
    background: var(--primary-color);
    color: white;
}

.header-actions .view-mode-radio input[type="radio"][b-or24johtjr] {
    display: none;
}

.header-actions .btn-refresh[b-or24johtjr] {
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-actions .btn-refresh:hover[b-or24johtjr] {
    background: var(--header-border-light);
}

/* Filter Row */
.filter-row[b-or24johtjr] {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.trend-period-row[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.time-period-row[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.custom-date-filters[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
}

.filter-group-inline[b-or24johtjr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group-inline .filter-label[b-or24johtjr] {
    margin: 0;
    white-space: nowrap;
}

.filter-group-inline input[type="date"][b-or24johtjr] {
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.filter-label[b-or24johtjr] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.team-filter-group[b-or24johtjr] {
    min-width: 280px;
    max-width: 400px;
    flex-direction: row;
    align-items: center;
}

.team-select[b-or24johtjr] {
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 1rem;
    min-width: 250px;
    background: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
}

.team-select:hover[b-or24johtjr] {
    border-color: var(--primary-color);
}

.team-select:focus[b-or24johtjr] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.btn-refresh[b-or24johtjr] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-primary);
}

.btn-refresh:hover:not(:disabled)[b-or24johtjr] {
    transform: scale(1.05);
    box-shadow: var(--shadow-primary-lg);
}

.btn-refresh:disabled[b-or24johtjr] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-refresh i[b-or24johtjr] {
    font-size: 0.9rem;
}

.kpi-section[b-or24johtjr] {
    margin-bottom: 20px;
}

.kpi-section .section-title[b-or24johtjr] {
    margin-bottom: 20px;
}

.kpi-grid[b-or24johtjr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.kpi-card[b-or24johtjr] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover[b-or24johtjr] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-card h3[b-or24johtjr] {
    margin: 0 0 15px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value[b-or24johtjr] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.kpi-value.excellent[b-or24johtjr] {
    color: var(--success-color);
}

.kpi-value.good[b-or24johtjr] {
    color: var(--primary-color);
}

.kpi-value.fair[b-or24johtjr] {
    color: var(--warning-color);
}

.kpi-value.poor[b-or24johtjr] {
    color: var(--danger-color);
}

.kpi-value.kpi-in-progress[b-or24johtjr] {
    color: var(--primary-color);
}

.kpi-value.kpi-new[b-or24johtjr] {
    color: var(--badge-purple-text);
}

.kpi-label[b-or24johtjr] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.kpi-rating[b-or24johtjr] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.kpi-detail[b-or24johtjr] {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.kpi-trend[b-or24johtjr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 8px;
}

.kpi-trend.trend-up[b-or24johtjr] {
    background-color: var(--success-bg);
    color: var(--success-color);
}

.kpi-trend.trend-down[b-or24johtjr] {
    background-color: var(--danger-bg);
    color: var(--danger-color);
}

.charts-section[b-or24johtjr] {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.charts-section .section-title[b-or24johtjr] {
    margin-bottom: 20px;
}

.section-header[b-or24johtjr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-title[b-or24johtjr] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.trend-period-selector[b-or24johtjr] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.period-btn[b-or24johtjr] {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-btn:hover[b-or24johtjr] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--nav-item-active-bg);
}

.period-btn.active[b-or24johtjr] {
    background: var(--primary-gradient);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-primary);
}

.charts-grid[b-or24johtjr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 24px;
}

.chart-card[b-or24johtjr] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover[b-or24johtjr] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.chart-card h3[b-or24johtjr] {
    margin: 0 0 16px 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Make charts responsive - tablet */
@media (max-width: 1024px) {
    .charts-grid[b-or24johtjr] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   DASHBOARD MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .dashboard-container[b-or24johtjr] {
        padding: 0.75rem;
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Page header - responsive */
    .page-header[b-or24johtjr] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.625rem;
        border-radius: 10px;
    }

    .header-left[b-or24johtjr] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header-icon[b-or24johtjr] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .header-title[b-or24johtjr] {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .header-actions[b-or24johtjr] {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Hide desktop actions on mobile */
    .desktop-actions[b-or24johtjr] {
        display: none;
    }

    /* Show mobile overflow menu */
    .mobile-overflow-menu[b-or24johtjr] {
        display: block;
    }

    .overflow-menu-btn[b-or24johtjr] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--header-icon-bg);
        border: 1px solid var(--header-border-light);
        color: var(--text-on-primary);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .overflow-menu-btn:hover[b-or24johtjr] {
        background: var(--header-border-light);
    }

    .overflow-dropdown[b-or24johtjr] {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 160px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 1100;
        overflow: hidden;
        animation: dropdownFadeIn-b-or24johtjr 0.15s ease-out;
    }

    @keyframes dropdownFadeIn-b-or24johtjr {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .overflow-section-label[b-or24johtjr] {
        padding: 0.5rem 1rem 0.25rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .overflow-divider[b-or24johtjr] {
        height: 1px;
        background: var(--border-color);
        margin: 0.25rem 0;
    }

    .overflow-item[b-or24johtjr] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.625rem 1rem;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 0.15s ease;
        text-align: left;
    }

    .overflow-item:hover[b-or24johtjr] {
        background: var(--bg-tertiary);
    }

    .overflow-item i[b-or24johtjr] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        width: 16px;
        text-align: center;
        opacity: 0;
    }

    .overflow-item.active i[b-or24johtjr] {
        opacity: 1;
        color: var(--success-color);
    }

    .overflow-item:disabled[b-or24johtjr] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .spinner-sm[b-or24johtjr] {
        width: 14px;
        height: 14px;
        border: 2px solid var(--border-color);
        border-top: 2px solid var(--primary-color);
        border-radius: 50%;
        animation: spin-b-or24johtjr 1s linear infinite;
    }

    /* Filter row - hide on mobile, time period is in hamburger menu */
    .filter-row[b-or24johtjr] {
        display: none;
    }

    /* Time period row - stack on mobile */
    .time-period-row[b-or24johtjr],
    .trend-period-row[b-or24johtjr] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    /* Custom date filters - full width */
    .custom-date-filters[b-or24johtjr] {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-top: 0.625rem;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group-inline[b-or24johtjr] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    .filter-group-inline input[type="date"][b-or24johtjr] {
        width: 100%;
        min-height: 44px;
    }

    /* Period selector - segmented control style */
    .period-selector-group[b-or24johtjr] {
        width: 100%;
        display: flex;
        background: var(--bg-tertiary);
        border-radius: 8px;
        padding: 4px;
        gap: 4px;
    }

    .period-selector-group label[b-or24johtjr] {
        flex: 1;
        margin: 0;
    }

    .period-selector-group .filter-radio[b-or24johtjr] {
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0.5rem 0.25rem;
        font-size: 0.8125rem;
        border-radius: 6px;
        background: transparent;
        transition: all 0.2s ease;
    }

    .period-selector-group input[type="radio"]:checked + span[b-or24johtjr] {
        background: var(--primary-color);
        color: var(--text-on-primary);
    }

    /* Team select dropdown - ensure full width */
    .team-select[b-or24johtjr],
    .team-filter-group .multiselect-wrapper[b-or24johtjr],
    .team-filter-group .dropdown-toggle[b-or24johtjr] {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    /* Refresh button - larger touch target */
    .btn-refresh[b-or24johtjr] {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    /* KPI Grid - 2 columns */
    .kpi-grid[b-or24johtjr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    .kpi-card[b-or24johtjr] {
        padding: 0.875rem;
        border-radius: 10px;
    }

    .kpi-card h3[b-or24johtjr] {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.3px;
    }

    .kpi-value[b-or24johtjr] {
        font-size: 1.5rem;
    }

    .kpi-label[b-or24johtjr] {
        font-size: 0.6875rem;
    }

    /* Section titles */
    .section-title[b-or24johtjr] {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    /* Charts section */
    .charts-section[b-or24johtjr] {
        margin-top: 1rem;
        padding-top: 1rem;
        overflow: hidden;
    }

    .charts-grid[b-or24johtjr] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .chart-card[b-or24johtjr] {
        padding: 0.75rem;
        border-radius: 10px;
        overflow: hidden;
        max-width: 100%;
    }

    .chart-card:hover[b-or24johtjr] {
        transform: none; /* Disable hover lift on mobile */
    }

    .chart-card h3[b-or24johtjr] {
        font-size: 0.9375rem;
        margin-bottom: 0.5rem;
    }

    /* Constrain ApexCharts to container */
    .chart-card .apexcharts-canvas[b-or24johtjr],
    .chart-card svg[b-or24johtjr] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Extra small screens - single column KPIs */
@media (max-width: 374px) {
    .kpi-grid[b-or24johtjr] {
        grid-template-columns: 1fr;
    }
}

.loading-spinner[b-or24johtjr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.spinner[b-or24johtjr],
.spinner-large[b-or24johtjr] {
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-or24johtjr 1s linear infinite;
}

.spinner[b-or24johtjr] {
    width: 20px;
    height: 20px;
}

.spinner-large[b-or24johtjr] {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

@keyframes spin-b-or24johtjr {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.alert[b-or24johtjr] {
    padding: 15px 20px;
    border-radius: 4px;
    margin: 20px 0;
}

.alert-error[b-or24johtjr] {
    background-color: var(--danger-bg);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}


/* /Pages/DataSync.razor.rz.scp.css */
/* ========================================
   DATA SYNC - Modern Design
   ======================================== */

.data-sync-modern[b-2hxgbxswow] {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========================================
   COMPACT HEADER (matches other pages)
   ======================================== */
.compact-header[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.header-left[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-2hxgbxswow] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-2hxgbxswow] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-on-primary);
    margin: 0;
}

/* ========================================
   EXTERNAL SYNC BANNER
   ======================================== */
.external-sync-banner[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--warning-banner-bg);
    border: 1px solid var(--warning-banner-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: var(--warning-banner-shadow);
}

.external-sync-banner .banner-icon[b-2hxgbxswow] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--warning-banner-icon-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning-banner-title);
}

.external-sync-banner .banner-content[b-2hxgbxswow] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.external-sync-banner .banner-content strong[b-2hxgbxswow] {
    color: var(--warning-banner-title);
    font-size: 1rem;
}

.external-sync-banner .banner-details[b-2hxgbxswow] {
    color: var(--warning-banner-text);
    font-size: 0.875rem;
}

.external-sync-banner .banner-note[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warning-banner-text);
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    background: var(--warning-banner-note-bg);
    border-radius: 6px;
}

.external-sync-banner .banner-note i[b-2hxgbxswow] {
    color: var(--warning-banner-icon-bg);
}

.external-sync-banner .banner-estimate[b-2hxgbxswow] {
    color: var(--warning-banner-title);
    font-weight: 500;
}

.external-sync-banner .banner-progress[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.external-sync-banner .banner-progress .progress[b-2hxgbxswow] {
    background-color: var(--warning-banner-note-bg);
    border-radius: 4px;
}

.external-sync-banner .banner-progress .progress-text[b-2hxgbxswow] {
    font-size: 0.75rem;
    color: var(--warning-banner-title);
    font-weight: 600;
    min-width: 35px;
}

@keyframes float-b-2hxgbxswow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-icon[b-2hxgbxswow] {
    width: 50px;
    height: 50px;
    background: var(--header-icon-bg);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-on-primary);
    border: 3px solid var(--header-icon-border);
    box-shadow: var(--header-shadow);
}

.hero-title[b-2hxgbxswow] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-on-primary);
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: var(--header-text-shadow);
}

.hero-subtitle[b-2hxgbxswow] {
    font-size: 0.9rem;
    color: var(--text-on-primary);
    opacity: 0.95;
    margin: 0;
    line-height: 1.4;
}

/* ========================================
   SETTINGS CARD
   ======================================== */
.settings-card[b-2hxgbxswow] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.settings-card-header[b-2hxgbxswow] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-icon[b-2hxgbxswow] {
    width: 40px;
    height: 40px;
    background: var(--settings-icon-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-on-primary);
    box-shadow: var(--settings-icon-shadow);
}

.settings-card-header h2[b-2hxgbxswow] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.settings-card-body[b-2hxgbxswow] {
    padding: 2rem;
}

.form-group[b-2hxgbxswow] {
    margin-bottom: 2rem;
}

.form-label[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.form-label i[b-2hxgbxswow] {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.form-label input[type="checkbox"][b-2hxgbxswow] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.help-text[b-2hxgbxswow] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-weight: 400;
}

/* Desktop/mobile visibility - default states */
.mobile-only[b-2hxgbxswow] {
    display: none;
}

.desktop-only[b-2hxgbxswow] {
    display: inline;
}

.area-path-selector[b-2hxgbxswow] {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.tree-controls[b-2hxgbxswow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.tree-controls-left[b-2hxgbxswow] {
    display: flex;
    gap: 0.5rem;
}

.tree-controls-right[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cache-info[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cache-info i[b-2hxgbxswow] {
    font-size: 0.7rem;
    color: var(--primary-color);
}

.btn-tree-control[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tree-control:hover[b-2hxgbxswow] {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.btn-tree-control i[b-2hxgbxswow] {
    font-size: 0.75rem;
}

.tree-control-separator[b-2hxgbxswow] {
    color: var(--border-color);
    font-weight: 300;
    margin: 0 0.25rem;
}

.btn-tree-control.btn-check-all:hover[b-2hxgbxswow] {
    background: var(--success-bg);
    border-color: var(--success-color);
    color: var(--success-color);
}

.btn-tree-control.btn-uncheck-all:hover[b-2hxgbxswow] {
    background: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.btn-refresh-area-paths[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--btn-primary-shadow);
}

.btn-refresh-area-paths:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-1px);
    box-shadow: var(--btn-primary-hover-shadow);
}

.btn-refresh-area-paths:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-refresh-area-paths i[b-2hxgbxswow] {
    font-size: 0.75rem;
}

.btn-refresh-area-paths .spinner-border[b-2hxgbxswow] {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 0.12rem;
}

.no-area-paths[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    gap: 1rem;
}

.no-area-paths p[b-2hxgbxswow] {
    margin: 0;
}

.no-area-paths i[b-2hxgbxswow] {
    font-size: 2rem;
    display: block;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.loading-area-paths[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.95rem;
}

.loading-area-paths .spinner-border[b-2hxgbxswow] {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2rem;
}

.selected-count[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--nav-item-active-bg);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
}

.selected-count i[b-2hxgbxswow] {
    font-size: 1rem;
}

.btn-clear-selection[b-2hxgbxswow] {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-selection:hover[b-2hxgbxswow] {
    background: var(--primary-color);
    color: var(--text-on-primary);
}

.settings-actions[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-save-settings[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--success-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--btn-sync-shadow);
}

.btn-save-settings:hover[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-sync-hover-shadow);
}

.settings-message[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: var(--success-bg);
    border: 1px solid var(--success-color);
    border-radius: 6px;
    color: var(--success-color);
}

.settings-message i[b-2hxgbxswow] {
    font-size: 1rem;
}

/* ========================================
   STATUS CARD
   ======================================== */
.status-card[b-2hxgbxswow] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.status-card-header[b-2hxgbxswow] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-icon[b-2hxgbxswow] {
    width: 48px;
    height: 48px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--card-shadow);
}

.status-card-header h2[b-2hxgbxswow] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.status-card-body[b-2hxgbxswow] {
    padding: 2rem;
}

.status-grid[b-2hxgbxswow] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.status-item[b-2hxgbxswow] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.status-item:hover[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow);
}

.status-label[b-2hxgbxswow] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.status-value[b-2hxgbxswow] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.status-meta[b-2hxgbxswow] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.status-badge[b-2hxgbxswow] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.status-completed[b-2hxgbxswow] {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.status-badge.status-failed[b-2hxgbxswow] {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.status-badge.status-inprogress[b-2hxgbxswow] {
    background: var(--info-bg);
    color: var(--info-color);
    border: 1px solid var(--info-color);
}

.empty-status[b-2hxgbxswow] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.empty-status i[b-2hxgbxswow] {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* ========================================
   ACTION PANEL
   ======================================== */
.action-panel[b-2hxgbxswow] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.action-buttons[b-2hxgbxswow] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* Smart Sync - Primary action button (green for quick/smart) */
.btn-smart-sync[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--btn-sync-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-sync-shadow);
}

.btn-smart-sync:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-sync-hover-shadow);
    background: var(--btn-sync-hover);
}

.btn-smart-sync:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-smart-sync i[b-2hxgbxswow] {
    font-size: 1.25rem;
}

.btn-full-sync[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--btn-resume-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-resume-shadow);
}

.btn-full-sync:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-resume-shadow);
    filter: brightness(1.1);
}

.btn-full-sync:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-full-sync i[b-2hxgbxswow] {
    font-size: 1.25rem;
}

.btn-sync-now[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--page-header-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-primary-shadow);
}

.btn-sync-now:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-primary-hover-shadow);
}

.btn-sync-now:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-sync-now i[b-2hxgbxswow] {
    font-size: 1.25rem;
}

.btn-stop-sync[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--btn-cancel-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-cancel-shadow);
    animation: pulse-stop-b-2hxgbxswow 1.5s ease-in-out infinite;
}

@keyframes pulse-stop-b-2hxgbxswow {
    0%, 100% {
        box-shadow: var(--btn-cancel-shadow);
    }
    50% {
        box-shadow: var(--btn-cancel-pulse-shadow);
    }
}

.btn-stop-sync:hover[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-cancel-shadow);
    filter: brightness(1.1);
}

.btn-stop-sync i[b-2hxgbxswow] {
    font-size: 1.25rem;
}

/* Stop sync container - positioned below progress */
.stop-sync-container[b-2hxgbxswow] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.stop-sync-container .btn-stop-sync[b-2hxgbxswow] {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

.btn-sync-7pace[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--btn-7pace-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-7pace-shadow);
}

.btn-sync-7pace:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-7pace-shadow);
    filter: brightness(1.1);
}

.btn-sync-7pace:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-sync-7pace i[b-2hxgbxswow] {
    font-size: 1rem;
}

.btn-recalculate[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--btn-recalculate-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-recalculate-shadow);
}

.btn-recalculate:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-recalculate-shadow);
    filter: brightness(1.1);
}

.btn-recalculate:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-recalculate i[b-2hxgbxswow] {
    font-size: 1rem;
}

.btn-clear-data[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--btn-clear-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-clear-shadow);
}

.btn-clear-data:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-clear-shadow);
    filter: brightness(1.1);
}

.btn-clear-data:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-clear-data i[b-2hxgbxswow] {
    font-size: 1rem;
}

.btn-monthly-actuals[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--btn-monthly-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-monthly-shadow);
}

.btn-monthly-actuals:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-monthly-shadow);
    filter: brightness(1.1);
}

.btn-monthly-actuals:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-monthly-actuals i[b-2hxgbxswow] {
    font-size: 0.9rem;
}

.btn-sync-resources[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--btn-resources-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-resources-shadow);
}

.btn-sync-resources:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-resources-shadow);
    filter: brightness(1.1);
}

.btn-sync-resources:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-sync-resources i[b-2hxgbxswow] {
    font-size: 0.9rem;
}

.btn-investigate[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--btn-investigate-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-investigate-shadow);
}

.btn-investigate:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-investigate-shadow);
    filter: brightness(1.1);
}

.btn-investigate:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-investigate i[b-2hxgbxswow] {
    font-size: 0.9rem;
}

.sync-progress[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: var(--info-bg);
    border-radius: 12px;
    color: var(--info-color);
    font-weight: 600;
}

.progress-spinner[b-2hxgbxswow] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--loading-bar-border);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-2hxgbxswow 0.8s linear infinite;
}

@keyframes spin-b-2hxgbxswow {
    to { transform: rotate(360deg); }
}

/* ========================================
   STATISTICS PANEL
   ======================================== */
.stats-panel[b-2hxgbxswow] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
    margin-bottom: 2rem;
}

.stats-panel h3[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.stats-panel h3 i[b-2hxgbxswow] {
    color: var(--primary-color);
}

.stats-grid[b-2hxgbxswow] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.stat-card[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.stat-card:hover[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow);
}

.stat-icon[b-2hxgbxswow] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-content[b-2hxgbxswow] {
    flex: 1;
}

.stat-value[b-2hxgbxswow] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label[b-2hxgbxswow] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ========================================
   HISTORY PANEL
   ======================================== */
.history-panel[b-2hxgbxswow] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
}

.history-panel h3[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.history-panel h3 i[b-2hxgbxswow] {
    color: var(--primary-color);
}

.history-table[b-2hxgbxswow] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.history-table thead th[b-2hxgbxswow] {
    padding: 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-table tbody td[b-2hxgbxswow] {
    padding: 1rem 0.875rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.history-table tbody tr:hover[b-2hxgbxswow] {
    background: var(--bg-tertiary);
}

.error-message[b-2hxgbxswow] {
    color: var(--danger-color);
    font-size: 0.8125rem;
    cursor: help;
}

/* History cards (mobile view) - hidden by default on desktop */
.history-cards[b-2hxgbxswow] {
    display: none;
}

.history-card-item[b-2hxgbxswow] {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--primary-color);
}

.history-card-header-row[b-2hxgbxswow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.history-date[b-2hxgbxswow] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.history-card-stats[b-2hxgbxswow] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-card-stats span[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.history-card-stats i[b-2hxgbxswow] {
    font-size: 0.625rem;
    color: var(--primary-color);
}

.history-card-error[b-2hxgbxswow] {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--danger-color);
    padding: 0.25rem 0.5rem;
    background: var(--danger-bg);
    border-radius: 4px;
}

.empty-state[b-2hxgbxswow] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.empty-state i[b-2hxgbxswow] {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .stats-grid[b-2hxgbxswow] {
        grid-template-columns: 1fr;
    }

    .status-grid[b-2hxgbxswow] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-2hxgbxswow] {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-smart-sync[b-2hxgbxswow],
    .btn-full-sync[b-2hxgbxswow],
    .btn-sync-now[b-2hxgbxswow],
    .btn-sync-7pace[b-2hxgbxswow],
    .btn-recalculate[b-2hxgbxswow],
    .btn-stop-sync[b-2hxgbxswow],
    .btn-clear-data[b-2hxgbxswow],
    .btn-monthly-actuals[b-2hxgbxswow],
    .btn-sync-resources[b-2hxgbxswow] {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   PERFORMANCE OPTIONS STYLING
   ======================================== */

.performance-options[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.checkbox-option[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.checkbox-option-row[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-inline[b-2hxgbxswow] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.checkbox-inline input[type="checkbox"][b-2hxgbxswow] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
    margin: 0;
}

.checkbox-inline span[b-2hxgbxswow] {
    user-select: none;
}

.option-label[b-2hxgbxswow] {
    font-weight: 600;
    color: var(--text-primary);
}

.help-text-inline[b-2hxgbxswow] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.option-row[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.option-label[b-2hxgbxswow] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 140px;
}

.form-select-compact[b-2hxgbxswow] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
    min-width: 200px;
}

.form-input-date[b-2hxgbxswow] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
    min-width: 180px;
}

.form-input-date:focus[b-2hxgbxswow] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.date-filter-section[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.date-input-row[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-date-quick[b-2hxgbxswow] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-date-quick:hover[b-2hxgbxswow] {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-date-quick i[b-2hxgbxswow] {
    font-size: 0.8rem;
}

.date-filter-status[b-2hxgbxswow] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--info-bg);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.date-filter-status i[b-2hxgbxswow] {
    font-size: 0.75rem;
}

.date-filter-status.full-sync[b-2hxgbxswow] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.date-filter-status.incremental-sync[b-2hxgbxswow] {
    background: var(--success-bg);
    color: var(--success-color);
}

.date-filter-status.incremental-sync i[b-2hxgbxswow] {
    color: var(--success-color);
}

/* Work Item Types Checkboxes */
.work-item-types[b-2hxgbxswow] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.checkbox-option-inline[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.checkbox-option-inline:hover[b-2hxgbxswow] {
    background: rgba(var(--primary-rgb), 0.1);
}

.checkbox-option-inline input[type="checkbox"][b-2hxgbxswow] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.checkbox-option-inline span[b-2hxgbxswow] {
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
}

/* ========================================
   PHASE-BY-PHASE PROGRESS STYLING
   ======================================== */

.sync-progress-wrapper[b-2hxgbxswow] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.sync-progress-card-phases[b-2hxgbxswow] {
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
    animation: slideInDown-b-2hxgbxswow 0.3s ease-out;
    width: fit-content;
}

.phase-header[b-2hxgbxswow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.phase-header h4[b-2hxgbxswow] {
    margin: 0;
    font-size: 1.3rem;
    color: var(--primary-color);
    font-weight: 600;
}

.phase-status[b-2hxgbxswow] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.phases-list[b-2hxgbxswow] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.phase-item[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.phase-item.active[b-2hxgbxswow] {
    background: var(--info-bg);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.2);
}

.phase-item.completed[b-2hxgbxswow] {
    background: var(--success-bg);
    border-color: var(--success-color);
}

.phase-icon[b-2hxgbxswow] {
    font-size: 1.5rem;
}

.phase-label[b-2hxgbxswow] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

/* Step progress indicator */
.step-progress[b-2hxgbxswow] {
    color: var(--text-muted);
    font-size: 0.9em;
}

/* Rollup step details */
.rollup-step-details[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--info-bg);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.step-badge[b-2hxgbxswow] {
    background: var(--primary-color);
    color: var(--text-on-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.step-task[b-2hxgbxswow] {
    color: var(--text-secondary);
}

/* Parallel save indicator */
.parallel-save-indicator[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    animation: pulse-parallel-b-2hxgbxswow 2s ease-in-out infinite;
}

@keyframes pulse-parallel-b-2hxgbxswow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.parallel-icon[b-2hxgbxswow] {
    font-size: 1.1rem;
}

.parallel-text[b-2hxgbxswow] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--warning-color);
}

/* Parallel Loading Bars */
.parallel-loading-bars[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}

.loading-bar-item[b-2hxgbxswow] {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--border-color);
    transition: all 0.3s ease;
    min-width: 800px;
}

.loading-bar-item.active[b-2hxgbxswow] {
    border-left-color: var(--primary-color);
    background: var(--info-bg);
}

.loading-bar-item.complete[b-2hxgbxswow] {
    border-left-color: var(--success-color);
    background: var(--success-bg);
}

.loading-bar-item.ado.active[b-2hxgbxswow] {
    border-left-color: var(--primary-color);
    background: var(--info-bg);
}

.loading-bar-item.sevenpace.active[b-2hxgbxswow] {
    border-left-color: var(--sevenpace-color);
    background: var(--sevenpace-bg);
}

.loading-bar-header[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.loading-bar-icon[b-2hxgbxswow] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-bar-icon .checkmark[b-2hxgbxswow] {
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.1rem;
}

.loading-bar-icon .spinner-border[b-2hxgbxswow] {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.loading-bar-item.ado .spinner-border[b-2hxgbxswow] {
    color: var(--primary-color);
}

.loading-bar-item.sevenpace .spinner-border[b-2hxgbxswow] {
    color: var(--sevenpace-color);
}

.loading-bar-item.processing.active[b-2hxgbxswow] {
    border-left-color: var(--warning-color);
    background: var(--warning-bg);
}

.loading-bar-item.processing .spinner-border[b-2hxgbxswow] {
    color: var(--warning-color);
}

.loading-bar-title[b-2hxgbxswow] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.loading-bar-content[b-2hxgbxswow] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding-left: 32px;
}

.loading-bar-item.complete .loading-bar-content[b-2hxgbxswow] {
    color: var(--success-color);
}

/* Inline progress bar inside loading bar */
.loading-bar-progress[b-2hxgbxswow] {
    height: 6px;
    background: var(--progress-bar-track);
    border-radius: 3px;
    margin: 0.5rem 0 0 32px;
    overflow: hidden;
}

.loading-bar-progress-fill[b-2hxgbxswow] {
    height: 100%;
    background: var(--warning-gradient);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.loading-bar-progress-fill.ado[b-2hxgbxswow] {
    background: var(--primary-gradient);
}

.loading-bar-progress-fill.sevenpace[b-2hxgbxswow] {
    background: var(--sevenpace-gradient);
}

/* Phase Indicators (dots) */
.phase-indicators[b-2hxgbxswow] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.phase-dot[b-2hxgbxswow] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.3s ease;
}

.phase-dot.active[b-2hxgbxswow] {
    background: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
}

.phase-dot.complete[b-2hxgbxswow] {
    background: var(--success-color);
}

/* Save Progress Section */
.save-progress-section[b-2hxgbxswow] {
    margin: 1rem 0;
}

.save-progress-label[b-2hxgbxswow] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Legacy styles kept for compatibility */
.current-task[b-2hxgbxswow] {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    text-align: center;
    border-left: 4px solid var(--primary-color);
}

.current-task strong[b-2hxgbxswow] {
    color: var(--text-primary);
    font-size: 1rem;
}

/* Work Item Counts Display - kept for other pages */
.work-item-counts[b-2hxgbxswow] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.work-item-counts .count-item[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    min-width: 80px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.work-item-counts .count-item:hover[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow);
}

.work-item-counts .count-value[b-2hxgbxswow] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.work-item-counts .count-label[b-2hxgbxswow] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Type-specific colors - using semantic variables where possible */
.work-item-counts .count-item.epic[b-2hxgbxswow] {
    background: var(--epic-bg);
    border-color: var(--epic-color);
}

.work-item-counts .count-item.epic .count-value[b-2hxgbxswow] {
    color: var(--epic-color);
}

.work-item-counts .count-item.feature[b-2hxgbxswow] {
    background: var(--feature-bg);
    border-color: var(--feature-color);
}

.work-item-counts .count-item.feature .count-value[b-2hxgbxswow] {
    color: var(--feature-color);
}

.work-item-counts .count-item.pbi[b-2hxgbxswow] {
    background: var(--pbi-bg);
    border-color: var(--pbi-color);
}

.work-item-counts .count-item.pbi .count-value[b-2hxgbxswow] {
    color: var(--pbi-color);
}

.work-item-counts .count-item.task[b-2hxgbxswow] {
    background: var(--task-bg);
    border-color: var(--task-color);
}

.work-item-counts .count-item.task .count-value[b-2hxgbxswow] {
    color: var(--task-color);
}

/* 7pace time data card */
.work-item-counts .count-item.sevenpace[b-2hxgbxswow] {
    background: var(--sevenpace-bg);
    border-color: var(--sevenpace-color);
}

.work-item-counts .count-item.sevenpace .count-value[b-2hxgbxswow] {
    color: var(--sevenpace-text);
}

.work-item-counts .count-item.sevenpace.running[b-2hxgbxswow] {
    background: var(--warning-bg);
    border-color: var(--warning-color);
    animation: pulse-card-b-2hxgbxswow 2s ease-in-out infinite;
}

.work-item-counts .count-item.sevenpace.running .count-value[b-2hxgbxswow] {
    color: var(--warning-color);
}

.work-item-counts .count-item.sevenpace.complete[b-2hxgbxswow] {
    background: var(--sevenpace-bg);
    border-color: var(--sevenpace-color);
}

@keyframes pulse-card-b-2hxgbxswow {
    0%, 100% {
        border-color: var(--warning-color);
        box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.4);
    }
    50% {
        border-color: var(--danger-color);
        box-shadow: 0 0 8px 2px rgba(var(--danger-rgb), 0.3);
    }
}

.spinner-container[b-2hxgbxswow] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}

.spinner[b-2hxgbxswow] {
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-2hxgbxswow 1s linear infinite;
}

@keyframes spin-b-2hxgbxswow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.progress-stats[b-2hxgbxswow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.progress-stats .progress-percent[b-2hxgbxswow] {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .phases-list[b-2hxgbxswow] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   FILE UPLOAD SECTION
   ======================================== */
.file-upload-section[b-2hxgbxswow] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.file-input[b-2hxgbxswow] {
    padding: 0.75rem;
    border: 2px dashed var(--primary-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-input:hover[b-2hxgbxswow] {
    background: var(--bg-secondary);
    border-color: var(--primary-hover);
}

.selected-file[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--info-bg);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    color: var(--primary-color);
    font-weight: 500;
}

.selected-file i[b-2hxgbxswow] {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.import-progress[b-2hxgbxswow] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 8px;
    color: var(--warning-color);
    font-weight: 500;
}

.btn-primary[b-2hxgbxswow] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover:not(:disabled)[b-2hxgbxswow] {
    transform: translateY(-2px);
    box-shadow: var(--btn-primary-hover-shadow);
}

.btn-primary:disabled[b-2hxgbxswow] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary i[b-2hxgbxswow] {
    font-size: 1.1rem;
}

/* OLD PROGRESS BAR (Keep for fallback) */
.sync-progress-card[b-2hxgbxswow] {
    background: var(--progress-card-gradient);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: var(--progress-card-shadow);
    animation: slideInDown-b-2hxgbxswow 0.3s ease-out;
}

.progress-header[b-2hxgbxswow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--text-on-primary);
}

.progress-header strong[b-2hxgbxswow] {
    font-size: 1.1rem;
    font-weight: 600;
}

.progress-percent[b-2hxgbxswow] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: var(--text-shadow-dark);
}

.progress-bar-container[b-2hxgbxswow] {
    width: 100%;
    height: 24px;
    background: var(--progress-bar-track);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--progress-bar-shadow);
}

.progress-bar-fill[b-2hxgbxswow] {
    height: 100%;
    background: var(--progress-bar-fill);
    border-radius: 12px;
    transition: width 0.3s ease-out;
    box-shadow: var(--progress-fill-glow);
    animation: shimmer-b-2hxgbxswow 2s infinite;
}

@keyframes shimmer-b-2hxgbxswow {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

.progress-details[b-2hxgbxswow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-on-primary);
    opacity: 0.9;
    font-size: 0.9rem;
}

.progress-details .text-muted[b-2hxgbxswow] {
    color: var(--text-on-primary);
    opacity: 0.7;
    font-style: italic;
}

@keyframes slideInDown-b-2hxgbxswow {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .data-sync-modern[b-2hxgbxswow] {
        padding: 0 0.5rem;
    }

    /* ===== Hide text labels on mobile ===== */
    .btn-text[b-2hxgbxswow] {
        display: none;
    }

    /* Desktop/mobile visibility helpers */
    .desktop-only[b-2hxgbxswow] {
        display: none !important;
    }

    .mobile-only[b-2hxgbxswow] {
        display: block !important;
        margin: 0 0 0.5rem 0;
        font-size: 0.75rem;
    }

    /* Tree controls - icon only on mobile */
    .tree-controls[b-2hxgbxswow] {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .tree-controls-left[b-2hxgbxswow] {
        gap: 0.25rem;
    }

    .tree-controls-right[b-2hxgbxswow] {
        gap: 0.375rem;
    }

    .btn-tree-control[b-2hxgbxswow] {
        padding: 0.375rem;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }

    .btn-tree-control i[b-2hxgbxswow] {
        font-size: 0.875rem;
    }

    .tree-control-separator[b-2hxgbxswow] {
        display: none;
    }

    .btn-refresh-area-paths[b-2hxgbxswow] {
        padding: 0.375rem;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }

    .cache-info[b-2hxgbxswow] {
        display: none;
    }

    /* Compact header */
    .compact-header[b-2hxgbxswow] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .header-left[b-2hxgbxswow] {
        justify-content: flex-start;
    }

    .header-icon[b-2hxgbxswow] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .header-title[b-2hxgbxswow] {
        font-size: 1.1rem;
    }

    /* External sync banner */
    .external-sync-banner[b-2hxgbxswow] {
        flex-direction: column;
        text-align: center;
        padding: 0.625rem;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        border-radius: 8px;
    }

    .external-sync-banner .banner-content[b-2hxgbxswow] {
        align-items: center;
    }

    .banner-content strong[b-2hxgbxswow] {
        font-size: 0.875rem;
    }

    .banner-details[b-2hxgbxswow] {
        font-size: 0.75rem;
    }

    .banner-progress[b-2hxgbxswow] {
        justify-content: center;
    }

    .banner-note[b-2hxgbxswow] {
        font-size: 0.6875rem;
    }

    /* Settings card */
    .settings-card[b-2hxgbxswow] {
        border-radius: 10px;
        margin-bottom: 0.5rem;
    }

    .settings-card-header[b-2hxgbxswow] {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .settings-card-header .settings-icon[b-2hxgbxswow] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .settings-card-header h2[b-2hxgbxswow] {
        font-size: 0.9375rem;
    }

    .settings-card-body[b-2hxgbxswow] {
        padding: 0.75rem;
    }

    .form-group[b-2hxgbxswow] {
        margin-bottom: 0.75rem;
    }

    .form-label[b-2hxgbxswow] {
        font-size: 0.8125rem;
        margin-bottom: 0.25rem;
    }

    .form-label i[b-2hxgbxswow] {
        font-size: 0.75rem;
    }

    .help-text[b-2hxgbxswow] {
        font-size: 0.6875rem;
        margin: 0.25rem 0 0.375rem;
    }

    /* Date filter section */
    .date-filter-section[b-2hxgbxswow] {
        gap: 0.5rem;
    }

    .date-input-row[b-2hxgbxswow] {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .form-input-date[b-2hxgbxswow] {
        min-height: 36px;
        font-size: 0.8125rem;
        flex: 1;
        min-width: 120px;
    }

    .btn-date-quick[b-2hxgbxswow] {
        min-height: 36px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .date-filter-status[b-2hxgbxswow] {
        font-size: 0.6875rem;
        padding: 0.375rem 0.5rem;
    }

    /* Performance options */
    .form-select-compact[b-2hxgbxswow] {
        min-height: 36px;
        font-size: 0.8125rem;
    }

    /* Work item types checkboxes */
    .work-item-types[b-2hxgbxswow] {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .checkbox-option-inline[b-2hxgbxswow] {
        font-size: 0.8125rem;
        min-height: 32px;
    }

    .checkbox-option-inline small[b-2hxgbxswow] {
        display: none;
    }

    /* Settings actions */
    .settings-actions[b-2hxgbxswow] {
        gap: 0.5rem;
    }

    .btn-save-settings[b-2hxgbxswow] {
        min-height: 40px;
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }

    .settings-message[b-2hxgbxswow] {
        font-size: 0.75rem;
    }

    /* Status card */
    .status-card[b-2hxgbxswow] {
        border-radius: 10px;
        margin-bottom: 0.5rem;
    }

    .status-card-header[b-2hxgbxswow] {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .status-card-header .status-icon[b-2hxgbxswow] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .status-card-header h2[b-2hxgbxswow] {
        font-size: 0.9375rem;
    }

    .status-card-body[b-2hxgbxswow] {
        padding: 0.75rem;
    }

    /* Stats grid */
    .stats-grid[b-2hxgbxswow] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stat-item[b-2hxgbxswow] {
        padding: 0.5rem;
    }

    .stat-value[b-2hxgbxswow] {
        font-size: 1rem;
    }

    .stat-label[b-2hxgbxswow] {
        font-size: 0.625rem;
    }

    /* Action buttons */
    .action-buttons[b-2hxgbxswow] {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .action-buttons .btn[b-2hxgbxswow] {
        flex: 1;
        min-width: 80px;
        min-height: 40px;
        font-size: 0.8125rem;
    }

    .btn-primary[b-2hxgbxswow], .btn-secondary[b-2hxgbxswow], .btn-danger[b-2hxgbxswow], .btn-warning[b-2hxgbxswow] {
        padding: 0.5rem 0.75rem;
    }

    /* Progress card */
    .sync-progress-card[b-2hxgbxswow] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .progress-header[b-2hxgbxswow] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .progress-title[b-2hxgbxswow] {
        font-size: 0.9375rem;
    }

    .progress-phase[b-2hxgbxswow] {
        font-size: 0.75rem;
    }

    .progress-details[b-2hxgbxswow] {
        font-size: 0.75rem;
    }

    /* History card */
    .history-card[b-2hxgbxswow] {
        border-radius: 10px;
    }

    .history-card-header[b-2hxgbxswow] {
        padding: 0.625rem 0.75rem;
    }

    .history-card-header h2[b-2hxgbxswow] {
        font-size: 0.9375rem;
    }

    .history-card-body[b-2hxgbxswow] {
        padding: 0;
    }

    /* History panel - mobile card view */
    .history-panel[b-2hxgbxswow] {
        padding: 1rem;
        border-radius: 10px;
    }

    .history-panel h3[b-2hxgbxswow] {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .history-table.desktop-only[b-2hxgbxswow] {
        display: none !important;
    }

    .history-cards.mobile-only[b-2hxgbxswow] {
        display: block !important;
    }

    /* Status badges */
    .status-badge[b-2hxgbxswow] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* Area path selector */
    .area-path-selector[b-2hxgbxswow] {
        border-radius: 8px;
    }

    .selected-count[b-2hxgbxswow] {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .btn-clear-selection[b-2hxgbxswow] {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }

    /* Sync log */
    .sync-log[b-2hxgbxswow] {
        max-height: 150px;
        font-size: 0.6875rem;
    }
}
/* /Pages/Epics.razor.rz.scp.css */
/* ========================================
   EPICS HIERARCHY - Desktop-Optimized Design
   ======================================== */

/* Main Container - Desktop Layout */
.epics-modern[b-r5m8hi9jy7] {
    width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.epics-modern.desktop-layout[b-r5m8hi9jy7] {
    display: flex;
    flex-direction: column;
    /* 100vh - header(70px) - main padding(32px) - footer(~45px) - buffer */
    height: calc(100vh - 160px);
    overflow: hidden;
}

/* ========================================
   COMPACT HEADER
   ======================================== */
.compact-header[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.header-left[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-r5m8hi9jy7] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-r5m8hi9jy7] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

/* Header Right - Refresh Button */
.compact-header .header-right[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.compact-header .btn-refresh[b-r5m8hi9jy7] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compact-header .btn-refresh:hover:not(:disabled)[b-r5m8hi9jy7] {
    background: var(--header-border-light);
}

.compact-header .btn-refresh:disabled[b-r5m8hi9jy7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.compact-header .btn-refresh i[b-r5m8hi9jy7] {
    font-size: 0.9rem;
}

.compact-header .spinner[b-r5m8hi9jy7] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-r5m8hi9jy7 1s linear infinite;
}

@keyframes spin-b-r5m8hi9jy7 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.filter-toggle-btn[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    border-radius: 6px;
    color: var(--text-on-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-toggle-btn:hover[b-r5m8hi9jy7] {
    background: var(--header-border-light);
}

.filter-toggle-btn i[b-r5m8hi9jy7] {
    font-size: 0.75rem;
}

/* ========================================
   PRIMARY FILTER CARD - Always Visible
   ======================================== */
.primary-filter-card[b-r5m8hi9jy7] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

/* Hide mobile filter toggle on desktop */
.mobile-filter-toggle[b-r5m8hi9jy7] {
    display: none;
}

/* Always show filter row on desktop regardless of collapsed state */
.primary-filter-card.collapsed .primary-filter-row[b-r5m8hi9jy7],
.primary-filter-card.expanded .primary-filter-row[b-r5m8hi9jy7],
.primary-filter-row[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filter Mode Toggle (By Team / By Project) */
.filter-mode-toggle[b-r5m8hi9jy7] {
    display: flex;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border-color);
}

.filter-mode-toggle .mode-btn[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-mode-toggle .mode-btn:hover[b-r5m8hi9jy7] {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.filter-mode-toggle .mode-btn.active[b-r5m8hi9jy7] {
    background: var(--primary-color);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-primary);
}

.filter-mode-toggle .mode-btn i[b-r5m8hi9jy7] {
    font-size: 0.875rem;
}

.inline-dropdown[b-r5m8hi9jy7] {
    min-width: 250px;
    max-width: 400px;
}

.team-filter-dropdown[b-r5m8hi9jy7] {
    min-width: 180px;
    max-width: 250px;
}

.team-filter-dropdown .form-select[b-r5m8hi9jy7] {
    min-height: 38px;
    font-size: 0.875rem;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-filter-dropdown .form-select:hover[b-r5m8hi9jy7] {
    border-color: var(--primary-color);
}

.team-filter-dropdown .form-select:focus[b-r5m8hi9jy7] {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
    outline: none;
}

.primary-filter-actions[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Extended Columns Toggle */
.extended-columns-toggle[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.extended-columns-toggle:hover[b-r5m8hi9jy7] {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.extended-columns-toggle input[type="checkbox"][b-r5m8hi9jy7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.extended-columns-toggle span[b-r5m8hi9jy7] {
    font-weight: 500;
}

.primary-filter-actions .filter-toggle-btn[b-r5m8hi9jy7] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.primary-filter-actions .filter-toggle-btn:hover[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ========================================
   SEARCH CARD - Collapsible
   ======================================== */
.search-card[b-r5m8hi9jy7] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
}

.search-card.collapsed[b-r5m8hi9jy7] {
    max-height: 0;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}

.search-card.collapsed .search-card-body[b-r5m8hi9jy7] {
    display: none;
}

.search-card.expanded[b-r5m8hi9jy7] {
    max-height: 500px;
}

.search-card-body[b-r5m8hi9jy7] {
    padding: 1rem;
}

/* ========================================
   ADVANCED SEARCH ROW - Horizontal Layout
   ======================================== */
.advanced-search-row[b-r5m8hi9jy7] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.advanced-search-field[b-r5m8hi9jy7] {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    flex: 1;
}

.advanced-search-field .form-label[b-r5m8hi9jy7] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.advanced-search-field .form-control[b-r5m8hi9jy7] {
    height: 38px;
    font-size: 0.875rem;
}

.advanced-search-field.results-field[b-r5m8hi9jy7] {
    min-width: 100px;
    max-width: 120px;
    flex: 0 0 auto;
}

.advanced-search-actions[b-r5m8hi9jy7] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 1px;
}

/* Advanced Search Override Notice */
.advanced-search-notice[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--warning-text);
}

.advanced-search-notice i[b-r5m8hi9jy7] {
    font-size: 0.85rem;
    color: var(--warning-color);
}

/* State dropdown in primary filter row */
.state-dropdown[b-r5m8hi9jy7] {
    min-width: 180px;
}

/* ========================================
   SEARCH CONTROLS BAR
   ======================================== */
.search-controls[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-top: 1rem;
}

.results-per-page[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-label[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.control-label i[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    line-height: 1;
}

.page-size-select[b-r5m8hi9jy7] {
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-size-select:hover[b-r5m8hi9jy7] {
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-primary);
}

.page-size-select:focus[b-r5m8hi9jy7] {
    outline: none;
    border-color: var(--primary-hover);
    box-shadow: var(--focus-ring);
}

.search-actions[b-r5m8hi9jy7] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.action-btn[b-r5m8hi9jy7]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--header-border-light);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.action-btn:hover[b-r5m8hi9jy7]::before {
    width: 300px;
    height: 300px;
}

.action-btn i[b-r5m8hi9jy7],
.action-btn span[b-r5m8hi9jy7] {
    position: relative;
    z-index: 1;
}

.btn-clear[b-r5m8hi9jy7] {
    background: var(--card-bg);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
}

.btn-clear:hover[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-search[b-r5m8hi9jy7] {
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-primary);
}

.btn-search:hover:not(:disabled)[b-r5m8hi9jy7] {
    background: var(--primary-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

.btn-search:disabled[b-r5m8hi9jy7] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   RESULTS PANEL - Fills remaining space
   ======================================== */
.results-panel[b-r5m8hi9jy7] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Important for flex child to shrink */
    overflow: hidden;
}

/* Fullscreen mode for results panel */
.results-panel.fullscreen[b-r5m8hi9jy7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
    border: none;
}

.results-panel-header[b-r5m8hi9jy7] {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.results-title[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.results-title i[b-r5m8hi9jy7] {
    font-size: 1rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    line-height: 1;
}

.results-title h5[b-r5m8hi9jy7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25rem;
    display: flex;
    align-items: center;
}

.results-filter[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    max-width: 250px;
    position: relative;
}

.results-filter i.oi-magnifying-glass[b-r5m8hi9jy7] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.results-filter input[b-r5m8hi9jy7] {
    padding-left: 2rem;
    padding-right: 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    width: 100%;
    height: 32px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.results-filter input:focus[b-r5m8hi9jy7] {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
    outline: none;
}

.btn-clear-filter[b-r5m8hi9jy7] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: none;
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.btn-clear-filter i[b-r5m8hi9jy7] {
    font-size: 10px;
    line-height: 1;
    position: relative;
    top: -1px;
}

.btn-clear-filter:hover[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.header-actions[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Desktop: hide mobile toggle, show toolbar inline */
.mobile-results-toggle[b-r5m8hi9jy7] {
    display: none;
}

.toolbar-collapsible[b-r5m8hi9jy7] {
    display: contents; /* Items flow inline on desktop */
}

/* View Mode Toggle in Results Bar */
.header-actions .view-mode-toggle[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem;
}

.header-actions .view-mode-radio[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.header-actions .view-mode-radio:hover[b-r5m8hi9jy7] {
    background: var(--bg-secondary);
}

.header-actions .view-mode-radio:has(input:checked)[b-r5m8hi9jy7] {
    background: var(--primary-color);
    color: white;
}

.header-actions .view-mode-radio input[type="radio"][b-r5m8hi9jy7] {
    display: none;
}

/* Extended Columns Toggle in Results Bar */
.header-actions .extended-columns-toggle[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.header-actions .extended-columns-toggle:hover[b-r5m8hi9jy7] {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.header-actions .extended-columns-toggle:has(input:checked)[b-r5m8hi9jy7] {
    background: var(--info-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.header-actions .extended-columns-toggle input[type="checkbox"][b-r5m8hi9jy7] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.header-actions .extended-columns-toggle span[b-r5m8hi9jy7] {
    font-weight: 500;
}

.btn-hierarchy-action[b-r5m8hi9jy7] {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-hierarchy-action:hover:not(:disabled)[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-hierarchy-action:disabled[b-r5m8hi9jy7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-hierarchy-action i[b-r5m8hi9jy7] {
    font-size: 0.75rem;
}

.btn-export[b-r5m8hi9jy7] {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover:not(:disabled)[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-export:disabled[b-r5m8hi9jy7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-fullscreen[b-r5m8hi9jy7] {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-fullscreen:hover[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.results-panel.fullscreen .btn-fullscreen[b-r5m8hi9jy7] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.results-panel.fullscreen .btn-fullscreen:hover[b-r5m8hi9jy7] {
    background: var(--primary-hover);
}

.results-panel-body[b-r5m8hi9jy7] {
    padding: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ========================================
   TABLE CONTAINER - Fixed height with scrollbars
   ======================================== */
.table-container[b-r5m8hi9jy7] {
    flex: 1;
    overflow: auto;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    position: relative;
}

/* Sticky header for table */
.table-container .modern-table thead[b-r5m8hi9jy7] {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ========================================
   HIERARCHICAL DATA TABLE STYLING
   ======================================== */
.modern-table[b-r5m8hi9jy7] {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* First column - Title with expand/collapse button */
.modern-table thead th:first-child[b-r5m8hi9jy7] {
    width: 350px;
    min-width: 350px;
}

.modern-table thead th[b-r5m8hi9jy7] {
    padding: 0.625rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-align: left;
    border: none;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* De-emphasize ID column (now column 3) */
.modern-table thead th:nth-child(3)[b-r5m8hi9jy7] {
    color: var(--text-muted);
}

.modern-table tbody td:nth-child(3)[b-r5m8hi9jy7] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.modern-table tbody td:nth-child(3) strong[b-r5m8hi9jy7] {
    font-weight: 500;
    color: var(--text-secondary);
}



/* ========================================
   HIERARCHY LEVELS & EXPAND/COLLAPSE
   ======================================== */

/* Expand/Collapse Button - Tree View Style */
.expand-btn[b-r5m8hi9jy7] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
    position: relative;
    flex-shrink: 0;
}

.expand-btn:hover[b-r5m8hi9jy7] {
    background: transparent !important;
    color: var(--primary-color) !important;
    transform: scale(1.2);
}

.expand-btn:disabled[b-r5m8hi9jy7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.expand-btn i[b-r5m8hi9jy7] {
    font-size: 0.7rem !important;
    font-weight: normal !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Title with expand button - inline layout with dynamic indentation */
.title-with-expand[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.title-text[b-r5m8hi9jy7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-link[b-r5m8hi9jy7] {
    color: inherit;
    text-decoration: none;
}

.title-link:hover[b-r5m8hi9jy7] {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Placeholder for rows without expand button */
.expand-btn-placeholder[b-r5m8hi9jy7] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Hierarchy Row Styling - Clean & Professional */
.hierarchy-level-0[b-r5m8hi9jy7] {
    background-color: var(--card-bg);
    border-left: 4px solid var(--epic-color);
    font-weight: 600;
}

.hierarchy-level-1[b-r5m8hi9jy7] {
    background-color: transparent;
    border-left: 4px solid var(--feature-color);
    font-weight: 500;
}

.hierarchy-level-2[b-r5m8hi9jy7] {
    background-color: transparent;
    border-left: 4px solid var(--pbi-color);
    font-weight: 400;
}

.hierarchy-level-3[b-r5m8hi9jy7] {
    background-color: transparent;
    border-left: 4px solid var(--task-color);
    font-weight: 400;
}

.hierarchy-level-4[b-r5m8hi9jy7] {
    background-color: transparent;
    border-left: 4px solid var(--text-muted);
    font-weight: 400;
}

/* Search Match Highlighting */
.search-match[b-r5m8hi9jy7] {
    background-color: var(--warning-bg) !important;
    box-shadow: inset 0 0 0 2px var(--warning-color);
}

.search-match:hover[b-r5m8hi9jy7] {
    background-color: var(--warning-bg) !important;
}

.search-match .hierarchy-title .title-text[b-r5m8hi9jy7] {
    font-weight: 600;
}

/* Hover effects for hierarchy rows */
.modern-table tbody tr:hover[b-r5m8hi9jy7] {
    background: var(--bg-tertiary) !important;
}

.modern-table tbody tr[b-r5m8hi9jy7] {
    background: var(--card-bg);
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border-color);
}

.modern-table tbody td[b-r5m8hi9jy7] {
    padding: 0.5rem 0.625rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--bg-tertiary);
    vertical-align: middle;
    line-height: 1.4;
    color: var(--text-primary);
}

.modern-table tbody td:last-child[b-r5m8hi9jy7] {
    border-right: none;
}

/* Hierarchy Title with Indentation */
.hierarchy-title[b-r5m8hi9jy7] {
    padding-left: 0 !important;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.hierarchy-level-0 .hierarchy-title[b-r5m8hi9jy7] {
    font-weight: 600;
    color: var(--text-primary);
}

.hierarchy-level-1 .hierarchy-title[b-r5m8hi9jy7] {
    font-weight: 500;
    color: var(--text-primary);
}

.hierarchy-level-2 .hierarchy-title[b-r5m8hi9jy7],
.hierarchy-level-3 .hierarchy-title[b-r5m8hi9jy7],
.hierarchy-level-4 .hierarchy-title[b-r5m8hi9jy7] {
    font-weight: 400;
    color: var(--text-secondary);
}

.hierarchy-indent[b-r5m8hi9jy7] {
    flex-shrink: 0;
    background: transparent;
    position: relative;
}

/* Hierarchy is now visually indicated by:
   1. Left border color (different for each level)
   2. Title indentation (via inline padding on .title-with-expand)
   3. Font weight differences
*/

/* ========================================
   WORK ITEM TYPE ICONS (Azure DevOps Style)
   ======================================== */
[b-r5m8hi9jy7] .wit-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
    border-radius: 3px;
    cursor: help;
}

[b-r5m8hi9jy7] .wit-icon-wrapper svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ========================================
   BADGES - CONSISTENT SIZING
   ======================================== */
.type-badge[b-r5m8hi9jy7], .state-badge[b-r5m8hi9jy7] {
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 24px;
    line-height: 1;
}

/* Type Badge Colors */
.type-badge.bg-primary[b-r5m8hi9jy7] {
    background: var(--primary-gradient) !important;
    color: var(--text-on-primary) !important;
}

.type-badge.bg-danger[b-r5m8hi9jy7] {
    background: var(--danger-gradient) !important;
    color: var(--text-on-primary) !important;
}

.type-badge.bg-info[b-r5m8hi9jy7] {
    background: var(--info-gradient) !important;
    color: var(--text-on-primary) !important;
}

.type-badge.bg-success[b-r5m8hi9jy7] {
    background: var(--success-gradient) !important;
    color: var(--text-on-primary) !important;
}

.type-badge.bg-warning[b-r5m8hi9jy7] {
    background: var(--warning-gradient) !important;
    color: var(--text-on-dark) !important;
}

.type-badge.bg-secondary[b-r5m8hi9jy7] {
    background: var(--secondary-gradient) !important;
    color: var(--text-on-primary) !important;
}

/* State Badge Colors */
.state-badge.bg-info[b-r5m8hi9jy7] {
    background: var(--info-bg) !important;
    color: var(--info-color) !important;
    border: 1px solid var(--info-color) !important;
}

.state-badge.bg-primary[b-r5m8hi9jy7] {
    background: var(--pbi-bg) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.state-badge.bg-success[b-r5m8hi9jy7] {
    background: var(--success-bg) !important;
    color: var(--success-color) !important;
    border: 1px solid var(--success-color) !important;
}

.state-badge.bg-secondary[b-r5m8hi9jy7] {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.state-badge.bg-dark[b-r5m8hi9jy7] {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* ========================================
   PAGINATION - Compact
   ======================================== */
.pagination-container[b-r5m8hi9jy7] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.pagination-info[b-r5m8hi9jy7] {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 600;
}

.pagination[b-r5m8hi9jy7] {
    margin: 0;
    padding: 0;
}

.page-link[b-r5m8hi9jy7] {
    color: var(--primary-color);
    border-color: var(--border-color);
    background: var(--card-bg);
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.page-link:hover[b-r5m8hi9jy7] {
    background-color: var(--info-bg);
    border-color: var(--primary-color);
    color: var(--primary-hover);
}

.page-item.disabled .page-link[b-r5m8hi9jy7] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-r5m8hi9jy7] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state i[b-r5m8hi9jy7] {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state p[b-r5m8hi9jy7] {
    font-size: 1.125rem;
    margin-top: 1rem;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE
   ======================================== */
@media (max-width: 767.98px) {
    .epics-modern[b-r5m8hi9jy7] {
        padding: 0 0.5rem;
        /* Fill available height from parent flex container */
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    /* ===== Compact header ===== */
    .compact-header[b-r5m8hi9jy7] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .compact-header .header-left[b-r5m8hi9jy7] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .compact-header .header-icon[b-r5m8hi9jy7] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .compact-header .header-title[b-r5m8hi9jy7] {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .compact-header .header-right[b-r5m8hi9jy7] {
        flex-shrink: 0;
    }

    /* ===== Primary Filter Card - Collapsible on Mobile ===== */
    .primary-filter-card[b-r5m8hi9jy7] {
        padding: 0;
        margin-bottom: 0.5rem;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
    }

    /* Mobile filter toggle button - only visible on mobile */
    .mobile-filter-toggle[b-r5m8hi9jy7] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem;
        background: var(--card-bg);
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-filter-toggle > span:first-of-type[b-r5m8hi9jy7] {
        flex: 1;
        text-align: left;
    }

    .mobile-filter-toggle .filter-summary[b-r5m8hi9jy7] {
        flex-shrink: 0;
    }

    .mobile-filter-toggle .filter-count[b-r5m8hi9jy7] {
        background: var(--primary-color);
        color: white;
        padding: 0.125rem 0.5rem;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .mobile-filter-toggle .toggle-icon[b-r5m8hi9jy7] {
        color: var(--text-muted);
    }

    /* Collapsed state - hide filter row */
    .primary-filter-card.collapsed .primary-filter-row[b-r5m8hi9jy7] {
        display: none;
    }

    /* Expanded state - show filter row */
    .primary-filter-card.expanded .primary-filter-row[b-r5m8hi9jy7] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        padding: 0 0.75rem 0.75rem 0.75rem;
        border-top: 1px solid var(--border-light);
    }

    /* Filter mode toggle - full width on mobile */
    .filter-mode-toggle[b-r5m8hi9jy7] {
        width: 100%;
        justify-content: center;
    }

    .filter-mode-toggle .mode-btn[b-r5m8hi9jy7] {
        flex: 1;
        justify-content: center;
        min-height: 42px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .filter-mode-toggle .mode-btn span[b-r5m8hi9jy7] {
        display: inline; /* Keep text visible */
    }

    /* Inline dropdowns - full width stack */
    .inline-dropdown[b-r5m8hi9jy7],
    .team-filter-dropdown[b-r5m8hi9jy7],
    .state-dropdown[b-r5m8hi9jy7] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .primary-filter-actions[b-r5m8hi9jy7] {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .filter-toggle-btn[b-r5m8hi9jy7] {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    /* ===== Search Card (Advanced Filters) ===== */
    .search-card[b-r5m8hi9jy7] {
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .search-card-header[b-r5m8hi9jy7] {
        padding: 0.625rem 0.75rem;
    }

    .search-card-body[b-r5m8hi9jy7] {
        padding: 0.75rem;
    }

    /* Advanced search row - full width fields */
    .advanced-search-row[b-r5m8hi9jy7] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.625rem !important;
    }

    .advanced-search-field[b-r5m8hi9jy7] {
        width: 100%;
    }

    .advanced-search-field label[b-r5m8hi9jy7] {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .advanced-search-field .form-control[b-r5m8hi9jy7],
    .advanced-search-field .form-select[b-r5m8hi9jy7] {
        min-height: 44px;
        font-size: 0.9375rem; /* Prevents iOS zoom */
    }

    .advanced-search-actions[b-r5m8hi9jy7] {
        display: flex;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.25rem;
    }

    .advanced-search-actions .action-btn[b-r5m8hi9jy7] {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    .advanced-search-notice[b-r5m8hi9jy7] {
        font-size: 0.75rem;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

    /* ===== Results Panel ===== */
    .results-panel[b-r5m8hi9jy7] {
        border-radius: 10px;
        margin-bottom: 0;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .results-panel-header[b-r5m8hi9jy7] {
        flex-direction: column;
        gap: 0;
        padding: 0;
        position: relative;
    }

    /* Hide desktop title on mobile */
    .results-title[b-r5m8hi9jy7] {
        display: none;
    }

    /* Hide desktop header-actions on mobile */
    .header-actions[b-r5m8hi9jy7] {
        display: none;
    }

    /* Mobile results toggle - styled like Filters toggle */
    .mobile-results-toggle[b-r5m8hi9jy7] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem;
        background: var(--card-bg);
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-results-toggle > i:first-child[b-r5m8hi9jy7] {
        color: var(--primary-color);
    }

    .mobile-results-toggle > span[b-r5m8hi9jy7] {
        flex: 1;
        text-align: left;
    }

    .mobile-results-toggle .toggle-icon[b-r5m8hi9jy7] {
        color: var(--text-muted);
    }

    /* Collapsible toolbar container */
    .toolbar-collapsible[b-r5m8hi9jy7] {
        display: none;
        width: 100%;
        background: var(--bg-tertiary);
        border-top: 1px solid var(--border-light);
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .toolbar-collapsible.expanded[b-r5m8hi9jy7] {
        display: flex;
    }

    /* Hide fullscreen on mobile */
    .toolbar-collapsible .btn-fullscreen[b-r5m8hi9jy7] {
        display: none;
    }

    /* Results filter - full width when expanded */
    .results-filter[b-r5m8hi9jy7] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .results-filter input[b-r5m8hi9jy7] {
        min-height: 36px;
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem 0.25rem 1.75rem;
    }

    .results-filter i[b-r5m8hi9jy7] {
        font-size: 0.75rem;
        left: 0.5rem;
    }

    /* Header actions - single row compact */
    .header-actions[b-r5m8hi9jy7] {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.25rem;
        align-items: center;
        margin-left: auto;
    }

    /* View mode toggle - compact inline */
    .view-mode-toggle[b-r5m8hi9jy7] {
        display: flex;
        gap: 0;
        background: var(--bg-secondary);
        border-radius: 6px;
        padding: 2px;
        flex-shrink: 0;
    }

    .view-mode-radio[b-r5m8hi9jy7] {
        flex: 0 0 auto;
    }

    .view-mode-radio span[b-r5m8hi9jy7] {
        display: block;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
        border-radius: 4px;
        font-weight: 500;
    }

    .extended-columns-toggle[b-r5m8hi9jy7] {
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
        border-radius: 6px;
    }

    .extended-columns-toggle input[b-r5m8hi9jy7] {
        width: 14px;
        height: 14px;
    }

    .btn-hierarchy-action[b-r5m8hi9jy7],
    .btn-export[b-r5m8hi9jy7],
    .btn-fullscreen[b-r5m8hi9jy7] {
        min-height: 32px;
        min-width: 32px;
        width: 32px;
        padding: 0.25rem;
        font-size: 0.75rem;
        border-radius: 6px;
        justify-content: center;
    }

    .btn-hierarchy-action span[b-r5m8hi9jy7],
    .btn-export span[b-r5m8hi9jy7],
    .btn-fullscreen span[b-r5m8hi9jy7] {
        display: none; /* Hide text, show only icons on mobile */
    }

    /* ===== Pagination - Compact Inline ===== */
    .pagination-container[b-r5m8hi9jy7] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-top: 1px solid var(--border-light);
    }

    .pagination-info[b-r5m8hi9jy7] {
        font-size: 0.6875rem;
        color: var(--text-muted);
    }

    .pagination-info strong[b-r5m8hi9jy7] {
        font-weight: 500;
    }

    .pagination[b-r5m8hi9jy7] {
        gap: 0.125rem;
        margin: 0;
    }

    .pagination .page-item[b-r5m8hi9jy7] {
        margin: 0;
    }

    .pagination .page-link[b-r5m8hi9jy7] {
        min-width: 36px;
        min-height: 36px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 6px;
    }

    /* Shorter pagination text */
    .pagination .page-link:not([disabled])[b-r5m8hi9jy7] {
        padding: 0.25rem 0.375rem;
    }

    /* ===== Table/Datagrid - Critical Mobile Optimization ===== */
    .results-panel-body[b-r5m8hi9jy7] {
        padding: 0;
    }

    .table-container[b-r5m8hi9jy7] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        border-radius: 0 0 10px 10px;
    }

    /* Hint for horizontal scroll */
    .table-container[b-r5m8hi9jy7]::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.05));
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .table-container:not(:hover)[b-r5m8hi9jy7]::after {
        opacity: 1;
    }

    .modern-table[b-r5m8hi9jy7] {
        font-size: 0.75rem;
        min-width: 900px; /* Ensure horizontal scroll for data-heavy table */
    }

    .modern-table thead th[b-r5m8hi9jy7] {
        padding: 0.5rem 0.375rem;
        font-size: 0.6875rem;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .modern-table tbody td[b-r5m8hi9jy7] {
        padding: 0.5rem 0.375rem;
    }

    /* Frozen Title column - smaller on mobile */
    .frozen-columns .col-0[b-r5m8hi9jy7] {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }

    /* Disable frozen column on mobile - let it scroll normally */
    .hierarchy-table .frozen-col[b-r5m8hi9jy7],
    .frozen-columns tbody td.frozen-col[b-r5m8hi9jy7],
    .frozen-columns thead th.frozen-col[b-r5m8hi9jy7] {
        position: static !important;
        box-shadow: none !important;
    }

    /* Hierarchy indentation - tighter on mobile */
    .hierarchy-indent[b-r5m8hi9jy7] {
        width: 10px !important;
        min-width: 10px !important;
    }

    /* Work item title */
    .work-item-title[b-r5m8hi9jy7] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
    }

    .work-item-link[b-r5m8hi9jy7] {
        font-size: 0.75rem;
    }

    /* State badges - compact but readable */
    .state-badge[b-r5m8hi9jy7] {
        font-size: 0.5625rem;
        padding: 0.125rem 0.25rem;
        white-space: nowrap;
        min-width: 50px;
        text-align: center;
        letter-spacing: -0.02em;
    }

    /* Numeric cells */
    .modern-table td[class*="numeric"][b-r5m8hi9jy7],
    .modern-table td:nth-child(n+4)[b-r5m8hi9jy7] {
        font-size: 0.6875rem;
        white-space: nowrap;
    }

    /* ===== Fullscreen mode ===== */
    .results-fullscreen[b-r5m8hi9jy7] {
        position: fixed;
        top: var(--mobile-header-height, 56px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        margin: 0;
        border-radius: 0;
        background: var(--bg-primary);
    }

    .results-fullscreen .results-panel-header[b-r5m8hi9jy7] {
        padding: 0.5rem;
    }

    .results-fullscreen .table-container[b-r5m8hi9jy7] {
        height: calc(100vh - var(--mobile-header-height, 56px) - 150px);
    }
}

/* ===== Extra small screens (< 375px) ===== */
@media (max-width: 374px) {
    .epics-modern[b-r5m8hi9jy7] {
        padding: 0 0.375rem;
    }

    .primary-filter-card.expanded .primary-filter-row[b-r5m8hi9jy7] {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .mobile-filter-toggle[b-r5m8hi9jy7] {
        padding: 0.5rem;
    }

    .filter-mode-toggle .mode-btn[b-r5m8hi9jy7] {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .filter-mode-toggle .mode-btn i[b-r5m8hi9jy7] {
        display: none; /* Hide icons on very small screens */
    }

    /* Compact header actions for very small screens */
    .results-filter[b-r5m8hi9jy7] {
        width: 100%;
    }

    .view-mode-radio span[b-r5m8hi9jy7] {
        padding: 0.25rem 0.375rem;
        font-size: 0.625rem;
    }

    .extended-columns-toggle span[b-r5m8hi9jy7] {
        display: none; /* Just show checkbox */
    }

    .work-item-title[b-r5m8hi9jy7] {
        max-width: 100px;
    }

    .frozen-columns .col-0[b-r5m8hi9jy7] {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }
}

/* ========================================
   CHECKBOX LIST FOR MULTI-SELECT FILTERS
   ======================================== */

.checkbox-list[b-r5m8hi9jy7] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    max-height: 200px;
    min-height: 200px;
    overflow-y: auto;
}

.checkbox-list.scrollable[b-r5m8hi9jy7] {
    max-height: 200px;
    min-height: 200px;
}

.checkbox-item[b-r5m8hi9jy7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    user-select: none;
}

.checkbox-item:hover[b-r5m8hi9jy7] {
    background: var(--bg-secondary);
}

.checkbox-item input[type="checkbox"][b-r5m8hi9jy7] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    cursor: pointer;
    margin: 0;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.checkbox-item span[b-r5m8hi9jy7] {
    font-size: 0.9rem;
    color: var(--text-primary);
    flex: 1;
}

.checkbox-item input[type="checkbox"]:checked + span[b-r5m8hi9jy7] {
    font-weight: 500;
    color: var(--primary-color);
}

/* Scrollbar styling for checkbox lists */
.checkbox-list[b-r5m8hi9jy7]::-webkit-scrollbar {
    width: 8px;
}

.checkbox-list[b-r5m8hi9jy7]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.checkbox-list[b-r5m8hi9jy7]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.checkbox-list[b-r5m8hi9jy7]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ========================================
   FIXED HEIGHT FOR TREE VIEWS IN SEARCH
   ======================================== */

.tree-view-container[b-r5m8hi9jy7] {
    height: 200px;
    max-height: 200px;
    min-height: 200px;
    overflow: hidden;
}

.tree-view-container[b-r5m8hi9jy7]  .area-path-tree {
    max-height: 200px !important;
    min-height: 200px !important;
    height: 200px !important;
    overflow-y: auto !important;
}

/* Team dropdown styling */
.team-select[b-r5m8hi9jy7] {
    min-width: 200px;
    cursor: pointer;
}

.team-select:hover[b-r5m8hi9jy7] {
    border-color: var(--primary-color);
}

.team-select:focus[b-r5m8hi9jy7] {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* ========================================
   FROZEN COLUMNS
   ======================================== */

/* Body frozen columns get sticky positioning (below header z-index of 10) */
.frozen-columns tbody td.frozen-col[b-r5m8hi9jy7] {
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 5;
}

/* Header frozen columns get sticky positioning (above header z-index of 10) */
.frozen-columns thead th.frozen-col[b-r5m8hi9jy7] {
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 12 !important;
}

/* Column 0 - Title with expand button (350px wide, only frozen column) */
.frozen-columns .col-0[b-r5m8hi9jy7] {
    left: 0 !important;
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    /* Add shadow to show separation from scrollable columns */
    box-shadow: var(--frozen-col-shadow);
}

/* Background colors for frozen columns to prevent see-through when scrolling */
.frozen-columns thead th.frozen-col[b-r5m8hi9jy7] {
    background: var(--bg-tertiary) !important;
}

/* For column 0 (Title) - use background-color only (not background shorthand)
   so hierarchy level background-image rules can still draw the vertical lines */
.frozen-columns tbody td.frozen-col.col-0[b-r5m8hi9jy7] {
    background-color: var(--card-bg);
}

/* ========================================
   COLUMN HEADER TOOLTIPS
   ======================================== */

.modern-table thead th[b-r5m8hi9jy7] {
    position: relative;
    cursor: help;
}

.modern-table thead th[data-tooltip]:hover[b-r5m8hi9jy7]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    white-space: pre-line;
    min-width: 200px;
    max-width: 300px;
    box-shadow: var(--shadow-md);
    margin-top: 4px;
    line-height: 1.4;
}

/* Arrow for tooltip */
.modern-table thead th[data-tooltip]:hover[b-r5m8hi9jy7]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    z-index: 101;
    border: 6px solid transparent;
    border-bottom-color: var(--bg-primary);
    margin-top: -8px;
}

/* QA Percentage - red when over 25% */
.qa-percent-high[b-r5m8hi9jy7] {
    color: var(--danger-color);
    font-weight: 600;
}

/* Help link in column headers */
.help-link[b-r5m8hi9jy7] {
    text-decoration: none;
    font-size: 0.85em;
    margin-left: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.help-link:hover[b-r5m8hi9jy7] {
    opacity: 1;
}

/* ========================================
   MOBILE: DISABLE FROZEN COLUMNS
   Must be at end to override !important rules above
   ======================================== */
@media (max-width: 768px) {
    .frozen-columns tbody td.frozen-col[b-r5m8hi9jy7],
    .frozen-columns thead th.frozen-col[b-r5m8hi9jy7],
    .hierarchy-table .frozen-col[b-r5m8hi9jy7] {
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
    }
}
/* /Pages/Help/Forecasting.razor.rz.scp.css */
.help-page[b-66qvrpgvbo] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    color: var(--text-primary);
}

.help-header[b-66qvrpgvbo] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.help-header h1[b-66qvrpgvbo] {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.help-header .lead[b-66qvrpgvbo] {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.help-toc[b-66qvrpgvbo] {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.help-toc h4[b-66qvrpgvbo] {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.help-toc ul[b-66qvrpgvbo] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.help-toc a[b-66qvrpgvbo] {
    color: var(--primary-color);
    text-decoration: none;
}

.help-toc a:hover[b-66qvrpgvbo] {
    text-decoration: underline;
}

.help-section[b-66qvrpgvbo] {
    margin-bottom: 2.5rem;
    scroll-margin-top: 1rem;
}

.help-section h2[b-66qvrpgvbo] {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.help-section h4[b-66qvrpgvbo] {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.help-section p[b-66qvrpgvbo] {
    color: var(--text-secondary);
}

.help-table[b-66qvrpgvbo] {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.help-table th[b-66qvrpgvbo],
.help-table td[b-66qvrpgvbo] {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.help-table th[b-66qvrpgvbo] {
    background: var(--bg-secondary);
    font-weight: 600;
}

.help-table tr:hover[b-66qvrpgvbo] {
    background: var(--bg-secondary);
}

.info-box[b-66qvrpgvbo], .tip-box[b-66qvrpgvbo], .example-box[b-66qvrpgvbo] {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.info-box[b-66qvrpgvbo] {
    background: var(--info-box-bg);
    border-left: 4px solid var(--primary-color);
}

.tip-box[b-66qvrpgvbo] {
    background: var(--warning-box-bg);
    border-left: 4px solid var(--warning-color);
}

.example-box[b-66qvrpgvbo] {
    background: var(--success-box-bg);
    border-left: 4px solid var(--success-color);
}

.info-box h5[b-66qvrpgvbo], .tip-box h5[b-66qvrpgvbo], .example-box h5[b-66qvrpgvbo] {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.info-box h5[b-66qvrpgvbo] {
    color: var(--primary-color);
}

.tip-box h5[b-66qvrpgvbo] {
    color: var(--warning-text);
}

.example-box h5[b-66qvrpgvbo] {
    color: var(--success-color);
}

code.formula[b-66qvrpgvbo] {
    display: block;
    background: var(--code-bg);
    color: var(--code-color);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0.5rem 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
}

.badge-default[b-66qvrpgvbo] {
    background: var(--text-secondary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.best-practice[b-66qvrpgvbo] {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.best-practice h4[b-66qvrpgvbo] {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.best-practice ul[b-66qvrpgvbo] {
    margin-bottom: 0;
}

.help-footer[b-66qvrpgvbo] {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    text-align: center;
}

.confidence-high[b-66qvrpgvbo] { font-size: 1.2rem; }
.confidence-medium[b-66qvrpgvbo] { font-size: 1.2rem; }
.confidence-low[b-66qvrpgvbo] { font-size: 1.2rem; }

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .help-page[b-66qvrpgvbo] {
        padding: 0.75rem;
    }

    .help-header[b-66qvrpgvbo] {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .help-header h1[b-66qvrpgvbo] {
        font-size: 1.25rem;
    }

    .help-header .lead[b-66qvrpgvbo] {
        font-size: 0.875rem;
    }

    /* Table of contents - compact */
    .help-toc[b-66qvrpgvbo] {
        padding: 0.75rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .help-toc h4[b-66qvrpgvbo] {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    .help-toc ul[b-66qvrpgvbo] {
        gap: 0.375rem 1rem;
    }

    .help-toc a[b-66qvrpgvbo] {
        font-size: 0.8125rem;
    }

    /* Sections */
    .help-section[b-66qvrpgvbo] {
        margin-bottom: 1.5rem;
    }

    .help-section h2[b-66qvrpgvbo] {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.375rem;
    }

    .help-section h4[b-66qvrpgvbo] {
        font-size: 0.9375rem;
        margin-top: 1rem;
        margin-bottom: 0.375rem;
    }

    .help-section p[b-66qvrpgvbo] {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    /* Tables - scrollable */
    .help-table[b-66qvrpgvbo] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0.75rem 0;
        font-size: 0.75rem;
    }

    .help-table th[b-66qvrpgvbo],
    .help-table td[b-66qvrpgvbo] {
        padding: 0.5rem;
        white-space: nowrap;
    }

    .help-table th[b-66qvrpgvbo] {
        font-size: 0.6875rem;
    }

    /* Info boxes */
    .info-box[b-66qvrpgvbo], .tip-box[b-66qvrpgvbo], .example-box[b-66qvrpgvbo] {
        padding: 0.75rem;
        margin: 0.75rem 0;
        border-radius: 8px;
    }

    .info-box h5[b-66qvrpgvbo], .tip-box h5[b-66qvrpgvbo], .example-box h5[b-66qvrpgvbo] {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }

    .info-box p[b-66qvrpgvbo], .tip-box p[b-66qvrpgvbo], .example-box p[b-66qvrpgvbo] {
        font-size: 0.75rem;
    }

    .info-box ul[b-66qvrpgvbo], .tip-box ul[b-66qvrpgvbo], .example-box ul[b-66qvrpgvbo] {
        font-size: 0.75rem;
        padding-left: 1rem;
    }

    .info-box li[b-66qvrpgvbo], .tip-box li[b-66qvrpgvbo], .example-box li[b-66qvrpgvbo] {
        margin-bottom: 0.25rem;
    }

    /* Code blocks */
    code.formula[b-66qvrpgvbo] {
        padding: 0.5rem 0.75rem;
        font-size: 0.6875rem;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Best practices */
    .best-practice[b-66qvrpgvbo] {
        padding: 0.75rem;
        margin: 0.75rem 0;
        border-radius: 8px;
    }

    .best-practice h4[b-66qvrpgvbo] {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    .best-practice ul[b-66qvrpgvbo] {
        font-size: 0.75rem;
        padding-left: 1rem;
    }

    .best-practice li[b-66qvrpgvbo] {
        margin-bottom: 0.25rem;
    }

    /* Footer */
    .help-footer[b-66qvrpgvbo] {
        margin-top: 1.5rem;
        padding-top: 0.75rem;
        font-size: 0.8125rem;
    }

    /* Confidence icons */
    .confidence-high[b-66qvrpgvbo],
    .confidence-medium[b-66qvrpgvbo],
    .confidence-low[b-66qvrpgvbo] {
        font-size: 1rem;
    }

    /* Badge */
    .badge-default[b-66qvrpgvbo] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
}
/* /Pages/Projects.razor.rz.scp.css */
/* ========================================
   PROJECTS PAGE - Capacity Planning
   ======================================== */

.projects-page[b-0o3o909t5p] {
    width: 100%;
    height: calc(100vh - 170px); /* Account for header (70px) + main padding (32px) + footer (~50px) + margin */
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Page Header */
.page-header[b-0o3o909t5p] {
    flex-shrink: 0; /* Don't shrink the header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Loading Banner */
.loading-banner[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--info-color);
}

.header-left[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-0o3o909t5p] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-0o3o909t5p] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

.header-actions[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Desktop actions - visible on larger screens */
.desktop-actions[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile overflow menu - hidden on desktop */
.mobile-overflow-menu[b-0o3o909t5p] {
    display: none;
    position: relative;
}

/* Header Refresh Button */
.header-actions .btn-refresh[b-0o3o909t5p] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-actions .btn-refresh:hover:not(:disabled)[b-0o3o909t5p] {
    background: var(--header-border-light);
}

.header-actions .btn-refresh:disabled[b-0o3o909t5p] {
    opacity: 0.6;
    cursor: not-allowed;
}

.header-actions .btn-refresh i[b-0o3o909t5p] {
    font-size: 0.9rem;
}

.header-actions .spinner[b-0o3o909t5p] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-0o3o909t5p 1s linear infinite;
}

@keyframes spin-b-0o3o909t5p {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header Toggle (Show Completed) */
.header-toggle[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    border-radius: 6px;
    color: var(--text-on-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header-toggle:hover[b-0o3o909t5p] {
    background: var(--header-border-light);
}

.header-toggle.active[b-0o3o909t5p] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.header-toggle input[type="checkbox"][b-0o3o909t5p] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: white;
}

.header-toggle span[b-0o3o909t5p] {
    line-height: 1;
}

.header-actions .btn[b-0o3o909t5p] {
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.header-actions .btn:hover[b-0o3o909t5p] {
    background: var(--header-btn-hover-bg);
}

/* Button icon vertical alignment */
.btn i[b-0o3o909t5p],
.btn .oi[b-0o3o909t5p] {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Loading State */
.loading-container[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

/* Empty State */
.empty-state[b-0o3o909t5p] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.empty-state i[b-0o3o909t5p] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state h3[b-0o3o909t5p] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.empty-state p[b-0o3o909t5p] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Team Filter Section */
.team-filter-section[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Project Cards Scroll Container */
.project-cards-scroll-container[b-0o3o909t5p] {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.project-list-container[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.filter-label[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.filter-label i[b-0o3o909t5p] {
    color: var(--primary-color);
}

.team-checkboxes[b-0o3o909t5p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.team-checkbox[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.team-checkbox:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.team-checkbox.selected[b-0o3o909t5p] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.team-checkbox input[type="checkbox"][b-0o3o909t5p] {
    display: none;
}

.filter-actions[b-0o3o909t5p] {
    display: flex;
    gap: 0.5rem;
}

/* Status Filter */
.status-filter[b-0o3o909t5p] {
    margin-left: auto;
    border-left: 1px solid var(--border-color);
    padding-left: 1rem;
}

.status-checkbox[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    white-space: nowrap;
    color: var(--text-primary);
}

.status-checkbox:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
    border-color: var(--success-color);
}

.status-checkbox.selected[b-0o3o909t5p] {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.status-checkbox input[type="checkbox"][b-0o3o909t5p] {
    display: none;
}

/* Team Separator */
.team-separator[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 1rem 0;
}

.team-separator:first-of-type[b-0o3o909t5p] {
    margin-top: 0;
}

.team-separator-line[b-0o3o909t5p] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.team-separator-name[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    padding: 0.25rem 1rem;
    background: var(--primary-bg);
    border-radius: 20px;
}

.team-separator-name i[b-0o3o909t5p] {
    font-size: 0.9rem;
}

.team-project-count[b-0o3o909t5p] {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Priority Badge */
.priority-badge[b-0o3o909t5p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 0.4rem;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin-right: 0.5rem;
}

.project-title-row[b-0o3o909t5p] {
    display: flex;
    align-items: center;
}

/* Project Grid */
.project-grid[b-0o3o909t5p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.project-card[b-0o3o909t5p] {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid var(--border-color);
}

.project-card:hover[b-0o3o909t5p] {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.project-card-header[b-0o3o909t5p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.project-card-header h3[b-0o3o909t5p] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.project-description[b-0o3o909t5p] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.project-stats[b-0o3o909t5p] {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.75rem;
}

.stat[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value[b-0o3o909t5p] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label[b-0o3o909t5p] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.project-dates[b-0o3o909t5p] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Project Status Section */
.project-status-section[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.status-badge[b-0o3o909t5p] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-on-track[b-0o3o909t5p] {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

.status-at-risk[b-0o3o909t5p] {
    background: var(--status-low-bg);
    color: var(--status-low-text);
}

.status-late[b-0o3o909t5p] {
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.status-no-resources[b-0o3o909t5p] {
    background: var(--status-unassigned-bg);
    color: var(--status-unassigned-text);
}

.status-complete[b-0o3o909t5p] {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

/* Completed project card styling */
.project-card.completed-project[b-0o3o909t5p] {
    opacity: 0.85;
    border-left: 4px solid var(--success-color);
}

.project-card.completed-project:hover[b-0o3o909t5p] {
    opacity: 1;
}

/* Completed badge in status section */
.completed-badge[b-0o3o909t5p] {
    background: var(--success-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.progress-bar-container[b-0o3o909t5p] {
    flex: 1;
    height: 18px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.progress-bar[b-0o3o909t5p] {
    height: 100%;
    background: var(--progress-success-gradient);
    transition: width 0.3s ease;
}

.progress-text[b-0o3o909t5p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Project Forecast Footer */
.project-forecast[b-0o3o909t5p] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.project-forecast .forecast-date[b-0o3o909t5p] {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.project-forecast .forecast-date.projected[b-0o3o909t5p] {
    color: var(--primary-color);
    font-weight: 600;
}

.project-forecast .remaining-hours[b-0o3o909t5p] {
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 0.25rem;
}

.project-forecast .buffer-badge[b-0o3o909t5p] {
    display: inline-block;
    background: var(--text-secondary);
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
    font-weight: 500;
}

.project-actions[b-0o3o909t5p] {
    display: flex;
    gap: 0.25rem;
}

.btn-icon[b-0o3o909t5p] {
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px;
}

.btn-icon:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-icon.btn-danger:hover[b-0o3o909t5p] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

/* Detail View */
.project-detail[b-0o3o909t5p] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex child to allow shrinking */
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.detail-header[b-0o3o909t5p] {
    flex-shrink: 0; /* Don't shrink the header */
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.detail-header h2[b-0o3o909t5p] {
    margin: 0;
    flex: 1;
    font-size: 1.25rem;
    color: var(--text-primary);
}

/* Back button - icon only style */
.btn-back[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-back:hover[b-0o3o909t5p] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.detail-header .btn[b-0o3o909t5p] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Desktop detail actions - visible on desktop */
.desktop-detail-actions[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile detail menu - hidden on desktop */
.mobile-detail-menu[b-0o3o909t5p] {
    display: none;
    position: relative;
}

/* Tabs */
.nav-tabs[b-0o3o909t5p] {
    flex-shrink: 0; /* Don't shrink the tabs */
    padding: 0 1rem;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.nav-tabs .nav-link[b-0o3o909t5p] {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link i.oi[b-0o3o909t5p] {
    font-size: 0.9rem;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.nav-tabs .nav-link:hover[b-0o3o909t5p] {
    color: var(--primary-color);
    border-color: transparent;
}

.nav-tabs .nav-link.active[b-0o3o909t5p] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

.tab-content[b-0o3o909t5p] {
    flex: 1;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem; /* Reduced bottom padding */
    min-height: 0; /* Important for flex child to allow shrinking */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card-bg);
}

.schedule-tab-header[b-0o3o909t5p] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.tab-panel[b-0o3o909t5p] {
    animation: fadeIn-b-0o3o909t5p 0.2s ease;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

@keyframes fadeIn-b-0o3o909t5p {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Panel Header */
.panel-header[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.panel-header h4[b-0o3o909t5p] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-header .header-actions[b-0o3o909t5p] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.panel-header .header-actions .btn[b-0o3o909t5p] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: inherit;
}

.panel-header .header-actions .btn-primary[b-0o3o909t5p] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.panel-header .header-actions .btn-outline-secondary:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
}

/* Epic Selection */
.filter-row[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.team-select[b-0o3o909t5p] {
    width: auto;
    min-width: 200px;
}

.epic-selection-container[b-0o3o909t5p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.epic-list[b-0o3o909t5p] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.epic-list h5[b-0o3o909t5p] {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.epic-items[b-0o3o909t5p] {
    max-height: 400px;
    overflow-y: auto;
}

.epic-item[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--text-primary);
}

.epic-item.with-workstream[b-0o3o909t5p] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: default;
}

.epic-item.with-workstream .epic-info[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.epic-item.with-workstream .epic-actions[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.epic-item:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
}

.epic-search[b-0o3o909t5p] {
    position: relative;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.epic-search input[b-0o3o909t5p] {
    width: 100%;
    padding-right: 2rem;
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-clear-search[b-0o3o909t5p] {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.btn-clear-search:hover[b-0o3o909t5p] {
    color: var(--danger-color);
}

.epic-id[b-0o3o909t5p] {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 600;
    min-width: 60px;
}

.epic-id.epic-link[b-0o3o909t5p] {
    text-decoration: none;
    cursor: pointer;
}

.epic-id.epic-link:hover[b-0o3o909t5p] {
    text-decoration: underline;
    color: var(--primary-hover);
}

.epic-title[b-0o3o909t5p] {
    flex: 1;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.epic-effort[b-0o3o909t5p] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}

.workstream-select[b-0o3o909t5p] {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    max-width: 200px;
}

.workstream-select:focus[b-0o3o909t5p] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-focus);
}

.btn-add[b-0o3o909t5p], .btn-remove[b-0o3o909t5p] {
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.btn-add[b-0o3o909t5p] {
    color: var(--success-color);
}

.btn-add:hover[b-0o3o909t5p] {
    background: var(--success-bg);
}

.btn-remove[b-0o3o909t5p] {
    color: var(--danger-color);
}

.btn-remove:hover[b-0o3o909t5p] {
    background: var(--danger-bg);
}

/* Workstream Cards */
.workstream-list[b-0o3o909t5p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.workstream-card[b-0o3o909t5p] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
    padding: 1rem;
}

.workstream-header[b-0o3o909t5p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.workstream-header h5[b-0o3o909t5p] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.workstream-description[b-0o3o909t5p] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

/* Resource Cards */
.resource-cards[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resource-card[b-0o3o909t5p] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.resource-header[b-0o3o909t5p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.resource-info h5[b-0o3o909t5p] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.resource-meta[b-0o3o909t5p] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.resource-meta .team-alloc[b-0o3o909t5p] {
    background-color: var(--info-bg);
    color: var(--info-color);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem;
}

.resource-meta .workstream-split[b-0o3o909t5p] {
    background-color: var(--badge-purple-bg);
    color: var(--badge-purple-text);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.75rem;
}

.resource-meta .monthly-hours[b-0o3o909t5p] {
    background-color: var(--success-bg);
    color: var(--success-color);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.75rem;
}

.resource-dates[b-0o3o909t5p] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-top: 0.35rem;
    font-weight: 500;
}

.resource-dates i[b-0o3o909t5p] {
    margin-right: 0.35rem;
    color: var(--primary-color);
}

.resource-actions[b-0o3o909t5p] {
    display: flex;
    gap: 0.5rem;
}

.workstream-allocations[b-0o3o909t5p] {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.workstream-allocations > label[b-0o3o909t5p] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.allocation-grid[b-0o3o909t5p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
}

.allocation-item[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 0.5rem;
    border-radius: 4px;
    min-width: 0;
}

.allocation-item .ws-name[b-0o3o909t5p] {
    flex: 1;
    font-size: 0.8rem;
    padding-left: 0.5rem;
    min-width: 120px;
    color: var(--text-primary);
}

.allocation-input[b-0o3o909t5p] {
    width: 65px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: right;
    background: var(--input-bg);
    color: var(--text-primary);
}

.allocation-input:focus[b-0o3o909t5p] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-focus);
}

.percent-sign[b-0o3o909t5p] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.allocation-total[b-0o3o909t5p] {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.allocation-total.fully-allocated[b-0o3o909t5p] {
    color: var(--success-color);
}

.allocation-total.over-allocated[b-0o3o909t5p] {
    color: var(--danger-color);
}

.warning-icon[b-0o3o909t5p] {
    margin-left: 0.25rem;
}

/* Time-Off Section in Resource Card */
.time-off-section[b-0o3o909t5p] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.time-off-collapsible .time-off-header[b-0o3o909t5p] {
    margin-bottom: 0;
}

.time-off-expander[b-0o3o909t5p] {
    cursor: pointer;
    user-select: none;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.time-off-expander:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
}

.time-off-header-left[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-off-header-left .expander-icon[b-0o3o909t5p] {
    font-size: 0.7rem;
    color: var(--text-muted);
    width: 12px;
}

.time-off-badge[b-0o3o909t5p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
}

.time-off-summary[b-0o3o909t5p] {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: normal;
}

.time-off-header[b-0o3o909t5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.time-off-header label[b-0o3o909t5p] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
    color: var(--text-primary);
}

.time-off-list[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-left: 1.5rem;
}

.time-off-item[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
}

.time-off-dates[b-0o3o909t5p] {
    font-weight: 500;
    color: var(--text-primary);
}

.time-off-hours[b-0o3o909t5p] {
    color: var(--text-secondary);
}

.time-off-desc[b-0o3o909t5p] {
    color: var(--text-muted);
    font-style: italic;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-off-item .btn-icon[b-0o3o909t5p] {
    margin-left: auto;
}

/* Fixed Hours Section */
.fixed-hours-section[b-0o3o909t5p] {
    border-top: 2px solid var(--info-color);
    padding-top: 1rem;
}

.fixed-hours-section h5[b-0o3o909t5p] {
    color: var(--info-color);
    margin-bottom: 1rem;
}

.fixed-hours-card[b-0o3o909t5p] {
    border-left: 4px solid var(--info-color);
}

.fixed-hours-badge[b-0o3o909t5p] {
    background: var(--info-bg);
    color: var(--info-color);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}

.fixed-hours-desc[b-0o3o909t5p] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.fixed-hours-distribution[b-0o3o909t5p] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.fixed-hours-distribution label[b-0o3o909t5p] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}

.monthly-hours-grid[b-0o3o909t5p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.monthly-hours-item[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    min-width: 70px;
}

.monthly-hours-item .month-label[b-0o3o909t5p] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.monthly-hours-item .month-hours[b-0o3o909t5p] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--info-color);
}

/* Holidays Panel */
.holidays-panel[b-0o3o909t5p] {
    padding: 1rem;
}

.holidays-panel .empty-state[b-0o3o909t5p] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.holidays-panel .empty-state i[b-0o3o909t5p] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.holidays-panel table[b-0o3o909t5p] {
    margin-top: 1rem;
}

/* ========================================
   DIALOGS
   ======================================== */
.dialog-backdrop[b-0o3o909t5p] {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-0o3o909t5p] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 450px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog.dialog-sm[b-0o3o909t5p] {
    width: 380px;
}

.dialog.dialog-lg[b-0o3o909t5p] {
    width: 550px;
}

.dialog.dialog-xl[b-0o3o909t5p] {
    width: 800px;
}

.dialog-header[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.dialog-header h3[b-0o3o909t5p] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.dialog .btn-close[b-0o3o909t5p] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}

.dialog .btn-close:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.dialog-body[b-0o3o909t5p] {
    padding: 1.5rem;
    overflow-y: auto;
}

.dialog-body .form-group[b-0o3o909t5p] {
    margin-bottom: 1rem;
}

.dialog-body .form-group:last-child[b-0o3o909t5p] {
    margin-bottom: 0;
}

.dialog-body label[b-0o3o909t5p] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.dialog-body .form-control[b-0o3o909t5p] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.dialog-body .form-control:focus[b-0o3o909t5p] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-focus);
}

.dialog-body .form-control-color[b-0o3o909t5p] {
    width: 60px;
    height: 38px;
    padding: 0.25rem;
}

.dialog-body .completed-checkbox[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dialog-body .completed-checkbox:hover[b-0o3o909t5p] {
    border-color: var(--success-color);
    background: var(--success-bg);
}

.dialog-body .completed-checkbox:has(.form-check-input:checked)[b-0o3o909t5p] {
    border-color: var(--success-color);
    background: var(--success-bg);
}

.dialog-body .completed-checkbox .form-check-input[b-0o3o909t5p] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--card-bg);
    margin: 0;
    position: relative;
}

.dialog-body .completed-checkbox .form-check-input:checked[b-0o3o909t5p] {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.dialog-body .completed-checkbox .form-check-label[b-0o3o909t5p] {
    display: inline;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--text-secondary);
    margin: 0;
    user-select: none;
}

.dialog-body .completed-checkbox:has(.form-check-input:checked) .form-check-label[b-0o3o909t5p] {
    color: var(--success-color);
}

.dialog-footer[b-0o3o909t5p] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
    border-radius: 0 0 12px 12px;
}

.dialog-footer .btn[b-0o3o909t5p] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.dialog-footer .btn-secondary[b-0o3o909t5p] {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
}

.dialog-footer .btn-secondary:hover[b-0o3o909t5p] {
    background: var(--hover-bg);
}

.dialog-footer .btn-primary[b-0o3o909t5p] {
    background: var(--primary-color);
    border: none;
    color: white;
}

.dialog-footer .btn-primary:hover[b-0o3o909t5p] {
    background: var(--primary-hover);
}

.dialog-footer .btn-danger[b-0o3o909t5p] {
    background: var(--danger-color);
    border: none;
    color: white;
}

.dialog-footer .btn-danger:hover[b-0o3o909t5p] {
    background: var(--danger-hover);
}

/* Workstream Allocation Grid in Dialog */
.workstream-allocation-grid[b-0o3o909t5p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.workstream-allocation-row[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workstream-label[b-0o3o909t5p] {
    flex: 1;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0 !important;
}

.workstream-input[b-0o3o909t5p] {
    width: 70px !important;
    text-align: center;
    flex-shrink: 0;
}

.percent-sign[b-0o3o909t5p] {
    color: var(--text-muted);
    font-size: 0.875rem;
    width: 15px;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container[b-0o3o909t5p] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    animation: slideIn-b-0o3o909t5p 0.3s ease-out;
}

@keyframes slideIn-b-0o3o909t5p {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 450px;
}

.toast-success[b-0o3o909t5p] {
    background: var(--toast-success-gradient);
    color: var(--text-on-primary);
}

.toast-error[b-0o3o909t5p] {
    background: var(--toast-error-gradient);
    color: var(--text-on-primary);
}

.toast-icon[b-0o3o909t5p] {
    font-size: 1.25rem;
}

.toast-message[b-0o3o909t5p] {
    flex: 1;
    font-size: 0.9rem;
}

.toast-close[b-0o3o909t5p] {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.8;
}

.toast-close:hover[b-0o3o909t5p] {
    opacity: 1;
}

/* Help link in form labels */
.help-link[b-0o3o909t5p] {
    text-decoration: none;
    font-size: 0.85em;
    margin-left: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.help-link:hover[b-0o3o909t5p] {
    opacity: 1;
}

/* ========================================
   HISTORY TAB - Snapshots
   ======================================== */

.history-panel[b-0o3o909t5p] {
    padding: 1rem;
}

.history-panel .panel-header[b-0o3o909t5p] {
    margin-bottom: 1rem;
}

.history-panel .panel-header h4[b-0o3o909t5p] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.history-actions[b-0o3o909t5p] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.history-actions .btn[b-0o3o909t5p] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.snapshot-comparison-row[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.snapshot-comparison-row label[b-0o3o909t5p] {
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.snapshot-list table[b-0o3o909t5p] {
    font-size: 0.9rem;
}

.snapshot-list .badge[b-0o3o909t5p] {
    font-size: 0.75rem;
}

.snapshot-list .clickable-row[b-0o3o909t5p] {
    cursor: pointer;
}

.snapshot-list .clickable-row:hover[b-0o3o909t5p] {
    background-color: var(--hover-bg);
}

.empty-state[b-0o3o909t5p] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state i[b-0o3o909t5p] {
    display: block;
    margin-bottom: 1rem;
}

/* Comparison Dialog */
.comparison-dates .card-header[b-0o3o909t5p] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.comparison-dates .card-body[b-0o3o909t5p] {
    padding: 0.75rem;
    font-size: 0.85rem;
}

.comparison-dates .card-body p[b-0o3o909t5p] {
    margin-bottom: 0.25rem;
}

.impact-factors[b-0o3o909t5p] {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 6px;
}

.impact-factor-item[b-0o3o909t5p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.impact-factor-item:last-child[b-0o3o909t5p] {
    border-bottom: none;
}

.impact-icon[b-0o3o909t5p] {
    font-size: 1.2rem;
}

.impact-hours[b-0o3o909t5p] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ========================================
   BUDGET TRACKING TAB
   ======================================== */

.budget-panel.tab-panel[b-0o3o909t5p] {
    padding: 1rem;
    background: var(--card-bg);
    height: 100%;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Budget Summary Cards - Condensed */
.budget-summary[b-0o3o909t5p] {
    margin-bottom: 0.75rem;
}

.budget-stat-cards[b-0o3o909t5p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.budget-stat-card[b-0o3o909t5p] {
    flex: 1;
    min-width: 100px;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    border: 1px solid var(--border-light);
}

.budget-stat-card.warning-card[b-0o3o909t5p] {
    background: var(--warning-bg);
    border-color: var(--warning-color);
}

.budget-stat-card .stat-label[b-0o3o909t5p] {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.15rem;
}

.budget-stat-card .stat-value[b-0o3o909t5p] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.budget-stat-card .stat-warning[b-0o3o909t5p] {
    font-size: 0.65rem;
    color: var(--warning-text);
    margin-top: 0.1rem;
}

/* Budget Progress Bar - Condensed */
.budget-progress-container[b-0o3o909t5p] {
    margin-bottom: 0.75rem;
}

.budget-progress-bar[b-0o3o909t5p] {
    height: 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.budget-progress-bar .progress-actual[b-0o3o909t5p] {
    background: var(--progress-success-gradient);
    transition: width 0.3s ease;
}

.budget-progress-bar .progress-forecast[b-0o3o909t5p] {
    background: linear-gradient(135deg, var(--text-muted) 0%, var(--border-color) 100%);
    opacity: 0.6;
    transition: width 0.3s ease;
}

.progress-labels[b-0o3o909t5p] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.legend-dot[b-0o3o909t5p] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    margin-left: 10px;
}

.legend-dot.actual[b-0o3o909t5p] {
    background: var(--success-color);
}

.legend-dot.forecast[b-0o3o909t5p] {
    background: var(--text-muted);
}

/* Budget Depletion Table */
.budget-table-container[b-0o3o909t5p] {
    flex: 1;
    overflow: auto;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.budget-depletion-table[b-0o3o909t5p] {
    margin-bottom: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
}

.budget-depletion-table th[b-0o3o909t5p],
.budget-depletion-table td[b-0o3o909t5p] {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.budget-depletion-table thead th[b-0o3o909t5p] {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--border-color);
}

.budget-depletion-table tbody tr[b-0o3o909t5p] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.budget-depletion-table tbody tr:hover[b-0o3o909t5p] {
    background-color: var(--hover-bg);
}

.budget-depletion-table tbody tr.expanded[b-0o3o909t5p] {
    background-color: var(--info-bg);
}

.budget-depletion-table tbody tr.current-month[b-0o3o909t5p] {
    background-color: var(--success-bg);
    font-weight: 500;
}

.budget-depletion-table tbody tr.current-month:hover[b-0o3o909t5p] {
    background-color: var(--success-bg);
}

.budget-depletion-table tbody tr.future-month[b-0o3o909t5p] {
    color: var(--text-muted);
}

.budget-depletion-table tbody tr.depletion-month[b-0o3o909t5p] {
    background-color: var(--warning-bg);
}

.budget-depletion-table tbody tr.depletion-month:hover[b-0o3o909t5p] {
    background-color: var(--warning-bg);
}

.expand-cell[b-0o3o909t5p] {
    width: 30px;
    text-align: center;
    color: var(--text-muted);
}

.expand-cell i[b-0o3o909t5p] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.month-label[b-0o3o909t5p] {
    font-weight: 500;
    color: var(--text-primary);
}

.forecast-hours[b-0o3o909t5p] {
    font-style: italic;
    color: var(--text-muted);
}

/* Mini Progress Bar in Table */
.mini-progress[b-0o3o909t5p] {
    display: inline-block;
    width: 50px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.mini-progress-bar[b-0o3o909t5p] {
    height: 100%;
    background: var(--success-color);
    transition: width 0.3s ease;
}

/* Resource Detail Row */
.resource-detail-row[b-0o3o909t5p] {
    background: var(--bg-secondary) !important;
}

.resource-detail-row:hover[b-0o3o909t5p] {
    background: var(--bg-secondary) !important;
}

.resource-detail-row td[b-0o3o909t5p] {
    padding: 0 !important;
    border-top: none;
}

.resource-details[b-0o3o909t5p] {
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    animation: slideDown-b-0o3o909t5p 0.2s ease;
}

@keyframes slideDown-b-0o3o909t5p {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.resource-breakdown-table[b-0o3o909t5p] {
    background: var(--card-bg);
    border-radius: 6px;
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);
}

.resource-breakdown-table thead th[b-0o3o909t5p] {
    background: var(--bg-tertiary);
    font-size: 0.8rem;
    padding: 0.5rem;
    color: var(--text-primary);
}

.resource-breakdown-table tbody td[b-0o3o909t5p] {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    color: var(--text-primary);
}

/* Badge Styles for Budget */
.budget-depletion-table .badge[b-0o3o909t5p] {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.badge-info[b-0o3o909t5p] {
    background-color: var(--info-color);
    color: white;
}

.badge-secondary[b-0o3o909t5p] {
    background-color: var(--text-muted);
    color: white;
}

.badge-warning[b-0o3o909t5p] {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .projects-page[b-0o3o909t5p] {
        padding: 0 0.5rem;
        height: auto;
        min-height: calc(100vh - var(--mobile-header-height, 56px) - 40px);
        overflow: visible;
    }

    /* ===== Page header ===== */
    .page-header[b-0o3o909t5p] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.625rem;
        border-radius: 10px;
    }

    .header-left[b-0o3o909t5p] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header-icon[b-0o3o909t5p] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .header-title[b-0o3o909t5p] {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .header-actions[b-0o3o909t5p] {
        display: flex;
        gap: 0.375rem;
        flex-shrink: 0;
        margin-left: auto;
    }

    .header-actions .btn[b-0o3o909t5p] {
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .header-actions .btn .btn-text[b-0o3o909t5p] {
        display: none;
    }

    .header-actions .btn i[b-0o3o909t5p] {
        margin-right: 0;
    }

    /* Hide desktop actions and New Project button on mobile */
    .desktop-actions[b-0o3o909t5p],
    .header-actions > .btn-primary[b-0o3o909t5p] {
        display: none;
    }

    /* Show mobile overflow menu */
    .mobile-overflow-menu[b-0o3o909t5p] {
        display: block;
    }

    .overflow-menu-btn[b-0o3o909t5p] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--header-icon-bg);
        border: 1px solid var(--header-border-light);
        color: var(--text-on-primary);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .overflow-menu-btn:hover[b-0o3o909t5p] {
        background: var(--header-border-light);
    }

    .overflow-dropdown[b-0o3o909t5p] {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 180px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 1100;
        overflow: hidden;
        animation: dropdownFadeIn-b-0o3o909t5p 0.15s ease-out;
    }

    @keyframes dropdownFadeIn-b-0o3o909t5p {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .overflow-item[b-0o3o909t5p] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.75rem 1rem;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.15s ease;
        text-align: left;
    }

    .overflow-item:hover[b-0o3o909t5p] {
        background: var(--bg-tertiary);
    }

    .overflow-item i[b-0o3o909t5p] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        width: 18px;
        text-align: center;
    }

    .overflow-item.toggle-item[b-0o3o909t5p] {
        position: relative;
    }

    .overflow-item.toggle-item input[type="checkbox"][b-0o3o909t5p] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .overflow-item.toggle-item i[b-0o3o909t5p] {
        opacity: 0.3;
    }

    .overflow-item.toggle-item.active i[b-0o3o909t5p] {
        opacity: 1;
        color: var(--success-color);
    }

    .overflow-item:disabled[b-0o3o909t5p] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .spinner-sm[b-0o3o909t5p] {
        width: 14px;
        height: 14px;
        border: 2px solid var(--border-color);
        border-top: 2px solid var(--primary-color);
        border-radius: 50%;
        animation: spin-b-0o3o909t5p 1s linear infinite;
    }

    /* ===== Team Filter Section - Mobile Redesign ===== */
    .team-filter-section[b-0o3o909t5p] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        padding: 0.625rem;
        margin-bottom: 0.625rem;
        border-radius: 10px;
    }

    .filter-label[b-0o3o909t5p] {
        font-size: 0.75rem;
        margin-bottom: 0;
    }

    .team-checkboxes[b-0o3o909t5p] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        width: 100%;
    }

    .team-checkbox[b-0o3o909t5p] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        border-radius: 16px;
    }

    .team-checkbox input[type="checkbox"][b-0o3o909t5p] {
        width: 14px;
        height: 14px;
    }

    .filter-actions[b-0o3o909t5p] {
        display: flex;
        gap: 0.375rem;
        width: 100%;
    }

    .filter-actions .btn[b-0o3o909t5p] {
        flex: 1;
        min-height: 36px;
        font-size: 0.75rem;
    }

    .status-filter[b-0o3o909t5p] {
        width: 100%;
    }

    .status-checkbox[b-0o3o909t5p] {
        width: 100%;
        justify-content: center;
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    /* ===== Project List Container ===== */
    .project-list-container[b-0o3o909t5p] {
        height: auto;
        overflow: visible;
    }

    .project-cards-scroll-container[b-0o3o909t5p] {
        overflow: visible;
        padding-right: 0;
    }

    /* ===== Team Separator ===== */
    .team-separator[b-0o3o909t5p] {
        margin: 1rem 0 0.625rem;
        padding: 0 0.25rem;
    }

    .team-separator-name[b-0o3o909t5p] {
        font-size: 0.8125rem;
        padding: 0 0.5rem;
    }

    .team-project-count[b-0o3o909t5p] {
        font-size: 0.6875rem;
    }

    /* ===== Project Grid - Single Column ===== */
    .project-grid[b-0o3o909t5p] {
        grid-template-columns: 1fr !important;
        gap: 0.625rem;
    }

    /* ===== Project Cards - Enhanced Mobile Design ===== */
    .project-card[b-0o3o909t5p] {
        padding: 0.875rem;
        border-radius: 10px;
        border-width: 1px;
    }

    .project-card-header[b-0o3o909t5p] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .project-title-row[b-0o3o909t5p] {
        flex: 1;
        min-width: 0;
    }

    .project-card-header h3[b-0o3o909t5p] {
        font-size: 0.9375rem;
        line-height: 1.3;
        word-wrap: break-word;
    }

    .priority-badge[b-0o3o909t5p] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    .project-actions[b-0o3o909t5p] {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .project-actions .btn-icon[b-0o3o909t5p] {
        width: 32px;
        height: 32px;
        padding: 0;
        font-size: 0.75rem;
    }

    .project-description[b-0o3o909t5p] {
        font-size: 0.8125rem;
        margin-bottom: 0.625rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ===== Project Status Section ===== */
    .project-status-section[b-0o3o909t5p] {
        margin-bottom: 0.625rem;
    }

    .status-badge[b-0o3o909t5p] {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
    }

    .progress-bar-container[b-0o3o909t5p] {
        height: 6px;
        margin-top: 0.375rem;
    }

    .progress-text[b-0o3o909t5p] {
        font-size: 0.6875rem;
    }

    /* ===== Project Stats - Compact Grid ===== */
    .project-stats[b-0o3o909t5p] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .stat[b-0o3o909t5p] {
        text-align: center;
        padding: 0.375rem;
        background: var(--bg-secondary);
        border-radius: 6px;
    }

    .stat-value[b-0o3o909t5p] {
        font-size: 1rem;
        font-weight: 600;
    }

    .stat-label[b-0o3o909t5p] {
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    /* ===== Project Dates ===== */
    .project-dates[b-0o3o909t5p] {
        font-size: 0.75rem;
        padding: 0.375rem 0;
        border-top: 1px solid var(--border-color);
    }

    /* ===== Project Forecast ===== */
    .project-forecast[b-0o3o909t5p] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
        margin-top: 0.375rem;
    }

    .forecast-date[b-0o3o909t5p] {
        font-size: 0.6875rem;
    }

    .remaining-hours[b-0o3o909t5p] {
        font-size: 0.75rem;
    }

    .buffer-badge[b-0o3o909t5p] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* ===== Loading State ===== */
    .loading-container[b-0o3o909t5p] {
        padding: 2rem 1rem;
    }

    .loading-container p[b-0o3o909t5p] {
        font-size: 0.875rem;
    }

    /* ===== Empty State ===== */
    .empty-state[b-0o3o909t5p] {
        padding: 2rem 1rem;
    }

    .empty-state i[b-0o3o909t5p] {
        font-size: 2.5rem;
    }

    .empty-state h3[b-0o3o909t5p] {
        font-size: 1rem;
    }

    .empty-state p[b-0o3o909t5p] {
        font-size: 0.875rem;
    }

    /* ===== Project Detail View ===== */
    .project-detail[b-0o3o909t5p] {
        padding: 0;
        border-radius: 10px;
    }

    .detail-header[b-0o3o909t5p] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0;
    }

    .detail-header h2[b-0o3o909t5p] {
        font-size: 1rem;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-back[b-0o3o909t5p] {
        width: 32px;
        height: 32px;
    }

    /* Hide desktop actions on mobile */
    .desktop-detail-actions[b-0o3o909t5p] {
        display: none;
    }

    /* Show mobile detail menu */
    .mobile-detail-menu[b-0o3o909t5p] {
        display: block;
        position: relative;
    }

    .mobile-detail-menu .overflow-menu-btn[b-0o3o909t5p] {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        border-radius: 8px;
        cursor: pointer;
    }

    .mobile-detail-menu .overflow-dropdown[b-0o3o909t5p] {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 160px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 100;
        overflow: hidden;
    }

    .mobile-detail-menu .overflow-item[b-0o3o909t5p] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 1rem;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-detail-menu .overflow-item:hover[b-0o3o909t5p] {
        background: var(--hover-bg);
    }

    .mobile-detail-menu .overflow-item i[b-0o3o909t5p] {
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    /* ===== Tab Navigation ===== */
    .tab-nav[b-0o3o909t5p],
    .nav-tabs[b-0o3o909t5p] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 0.5rem;
    }

    .tab-nav[b-0o3o909t5p]::-webkit-scrollbar,
    .nav-tabs[b-0o3o909t5p]::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item[b-0o3o909t5p] {
        flex-shrink: 0;
    }

    .tab-btn[b-0o3o909t5p],
    .nav-link[b-0o3o909t5p] {
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px;
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    /* Hide tab labels on mobile, show only icons and counts */
    .nav-link .tab-label[b-0o3o909t5p] {
        display: none;
    }

    .nav-link .tab-count[b-0o3o909t5p] {
        font-size: 0.7rem;
    }

    /* Tab content - reduce padding on mobile */
    .tab-content[b-0o3o909t5p] {
        padding: 0.5rem;
    }

    /* Delivery schedule - full width on mobile */
    .tab-content > .delivery-schedule[b-0o3o909t5p] {
        margin: -0.5rem;
        border-radius: 0;
    }

    /* ===== Data Tables - Horizontal Scroll ===== */
    .table-responsive[b-0o3o909t5p],
    .data-table-container[b-0o3o909t5p] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
        border-radius: 8px;
    }

    .data-table[b-0o3o909t5p],
    .budget-depletion-table[b-0o3o909t5p],
    .resource-breakdown-table[b-0o3o909t5p] {
        font-size: 0.75rem;
        min-width: 600px;
    }

    .data-table th[b-0o3o909t5p],
    .data-table td[b-0o3o909t5p] {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }

    /* ===== Charts Section ===== */
    .chart-container[b-0o3o909t5p] {
        min-height: 220px;
    }

    .chart-card[b-0o3o909t5p] {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .chart-card h3[b-0o3o909t5p] {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    /* ===== Modal/Dialog Adjustments ===== */
    .modal-dialog[b-0o3o909t5p] {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .modal-body[b-0o3o909t5p] {
        padding: 1rem;
    }

    .modal-footer[b-0o3o909t5p] {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-0o3o909t5p] {
        flex: 1;
        min-height: 44px;
    }
}

/* ===== Extra small screens ===== */
@media (max-width: 374px) {
    .projects-page[b-0o3o909t5p] {
        padding: 0 0.375rem;
    }

    .page-header[b-0o3o909t5p] {
        padding: 0.5rem;
    }

    .header-title[b-0o3o909t5p] {
        font-size: 0.9375rem;
    }

    .header-actions .btn[b-0o3o909t5p] {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .header-actions .btn span[b-0o3o909t5p] {
        display: none; /* Hide text, show only icons */
    }

    .team-checkbox[b-0o3o909t5p] {
        padding: 0.3125rem 0.5rem;
        font-size: 0.6875rem;
    }

    .project-card[b-0o3o909t5p] {
        padding: 0.625rem;
    }

    .project-stats[b-0o3o909t5p] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
    }

    .stat-value[b-0o3o909t5p] {
        font-size: 0.875rem;
    }

    .detail-actions .btn[b-0o3o909t5p] {
        min-width: 100%;
    }
}
/* /Pages/Reports.razor.rz.scp.css */
.reports-page[b-ft1f6l66m4] {
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Page Header - matches other pages */
.page-header[b-ft1f6l66m4] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.header-left[b-ft1f6l66m4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-ft1f6l66m4] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-ft1f6l66m4] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

.loading-container[b-ft1f6l66m4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-secondary);
}

.reports-container[b-ft1f6l66m4] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Report Cards */
.report-cards[b-ft1f6l66m4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.report-card[b-ft1f6l66m4] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.report-card:hover[b-ft1f6l66m4] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.report-card.selected[b-ft1f6l66m4] {
    border-color: var(--primary-color);
    background: var(--nav-item-active-bg);
}

.report-card-icon[b-ft1f6l66m4] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.report-card-icon.executive[b-ft1f6l66m4] { background: var(--report-icon-executive-bg); color: var(--report-icon-executive-color); }
.report-card-icon.project[b-ft1f6l66m4] { background: var(--report-icon-project-bg); color: var(--report-icon-project-color); }
.report-card-icon.team[b-ft1f6l66m4] { background: var(--report-icon-team-bg); color: var(--report-icon-team-color); }
.report-card-icon.resource[b-ft1f6l66m4] { background: var(--report-icon-resource-bg); color: var(--report-icon-resource-color); }

.report-card-content h3[b-ft1f6l66m4] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.report-card-content p[b-ft1f6l66m4] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.report-card-badge[b-ft1f6l66m4] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Config Panel */
.report-config-panel[b-ft1f6l66m4] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.report-config-panel h2[b-ft1f6l66m4] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    color: var(--text-primary);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.config-section[b-ft1f6l66m4] {
    margin-bottom: 1.5rem;
}

.config-label[b-ft1f6l66m4] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.date-inputs[b-ft1f6l66m4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.date-inputs .form-control[b-ft1f6l66m4] {
    max-width: 180px;
}

.date-separator[b-ft1f6l66m4] {
    color: var(--text-secondary);
}

.date-presets[b-ft1f6l66m4] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preset-btn[b-ft1f6l66m4] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover[b-ft1f6l66m4] {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.preset-btn.active[b-ft1f6l66m4] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.config-section select.form-control[b-ft1f6l66m4] {
    max-width: 400px;
}

.config-actions[b-ft1f6l66m4] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-generate[b-ft1f6l66m4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
}

.btn-generate.disabled[b-ft1f6l66m4] {
    opacity: 0.5;
    pointer-events: none;
}

.btn-generate i[b-ft1f6l66m4] {
    font-size: 1.1rem;
}

/* Format Toggle */
.format-toggle[b-ft1f6l66m4] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.format-btn[b-ft1f6l66m4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.format-btn:hover[b-ft1f6l66m4] {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.format-btn.active[b-ft1f6l66m4] {
    background: var(--nav-item-active-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.format-btn i[b-ft1f6l66m4] {
    font-size: 1rem;
}

.format-hint[b-ft1f6l66m4] {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .reports-page[b-ft1f6l66m4] {
        padding: 0.75rem;
    }

    /* Page header */
    .page-header[b-ft1f6l66m4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .header-icon[b-ft1f6l66m4] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        border-radius: 10px;
    }

    .header-title[b-ft1f6l66m4] {
        font-size: 1.25rem;
    }

    /* Reports container */
    .reports-container[b-ft1f6l66m4] {
        gap: 1rem;
    }

    /* Report cards grid */
    .report-cards[b-ft1f6l66m4] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .report-card[b-ft1f6l66m4] {
        padding: 1rem;
        border-radius: 10px;
        min-height: 72px;
    }

    .report-card .card-icon[b-ft1f6l66m4] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 1.25rem;
    }

    .report-card h3[b-ft1f6l66m4] {
        font-size: 0.9375rem;
    }

    .report-card p[b-ft1f6l66m4] {
        font-size: 0.8125rem;
    }

    /* Report modal / details */
    .report-details-container[b-ft1f6l66m4] {
        padding: 0.75rem;
    }

    .report-header[b-ft1f6l66m4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .report-actions[b-ft1f6l66m4] {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .report-actions .btn[b-ft1f6l66m4] {
        flex: 1;
        min-width: 100px;
        min-height: 44px;
        justify-content: center;
    }

    /* Format buttons - scrollable row */
    .format-buttons[b-ft1f6l66m4] {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .format-btn[b-ft1f6l66m4] {
        flex-shrink: 0;
        min-height: 44px;
        min-width: 80px;
    }

    /* Parameter form */
    .parameter-form[b-ft1f6l66m4] {
        padding: 0.75rem;
    }

    .parameter-form .form-group[b-ft1f6l66m4] {
        margin-bottom: 0.75rem;
    }

    .parameter-form label[b-ft1f6l66m4] {
        font-size: 0.8125rem;
    }

    .parameter-form .form-control[b-ft1f6l66m4],
    .parameter-form .form-select[b-ft1f6l66m4] {
        min-height: 44px;
        font-size: 1rem;
    }

    /* Data preview / table */
    .report-preview[b-ft1f6l66m4] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .report-table[b-ft1f6l66m4] {
        font-size: 0.8125rem;
        min-width: 500px;
    }

    .report-table th[b-ft1f6l66m4],
    .report-table td[b-ft1f6l66m4] {
        padding: 0.5rem 0.375rem;
    }
}
/* /Pages/Resources.razor.rz.scp.css */
/* ========================================
   RESOURCES PAGE - Resource Management
   ======================================== */

/* Override main scroll container for Resources page - scrolling happens in panels */
.resources-page-active #main-scroll-container[b-36uuodkosu] {
    overflow: hidden !important;
}

.resources-page-active #main-content[b-36uuodkosu] {
    overflow: hidden !important;
}

.resources-page[b-36uuodkosu] {
    width: 100%;
    height: calc(100vh - 170px);
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: hidden;
}

/* Page Header */
.page-header[b-36uuodkosu] {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: visible;
}

.header-row[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-left[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.header-icon[b-36uuodkosu] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-36uuodkosu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

.header-filters[b-36uuodkosu] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Desktop actions - visible on larger screens */
.desktop-actions[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile overflow menu - hidden on desktop */
.mobile-overflow-menu[b-36uuodkosu] {
    display: none;
    position: relative;
}

/* Header Refresh Button */
.header-filters .btn-refresh[b-36uuodkosu] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.header-filters .btn-refresh:hover:not(:disabled)[b-36uuodkosu] {
    background: var(--header-border-light);
}

.header-filters .btn-refresh:disabled[b-36uuodkosu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.header-filters .btn-refresh i[b-36uuodkosu] {
    font-size: 0.8rem;
}

.header-filters .spinner[b-36uuodkosu] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid var(--text-on-primary);
    border-radius: 50%;
    animation: spin-b-36uuodkosu 1s linear infinite;
}

@keyframes spin-b-36uuodkosu {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header-filters .form-control-sm[b-36uuodkosu] {
    background: var(--input-bg);
    border: 1px solid var(--header-border-light);
    font-size: 0.75rem;
    height: 30px;
    width: 200px;
    flex-shrink: 0;
}

.header-filters .show-filter[b-36uuodkosu] {
    background: var(--input-bg);
    border: 1px solid var(--header-border-light);
    font-size: 0.75rem;
    height: 30px;
    padding: 0.2rem 1.5rem 0.2rem 0.5rem;
    flex-shrink: 0;
    border-radius: 4px;
    width: 130px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Header dropdowns for Team/Project filtering */
.header-dropdown[b-36uuodkosu] {
    min-width: 180px;
    max-width: 250px;
    flex-shrink: 1;
}

.header-dropdown[b-36uuodkosu]  .dropdown-trigger {
    background: var(--input-bg);
    border: 1px solid var(--header-border-light);
    min-height: 38px;
}

.header-dropdown[b-36uuodkosu]  .dropdown-trigger:hover {
    background: var(--bg-primary);
}

.header-dropdown[b-36uuodkosu]  .dropdown-panel {
    min-width: 220px;
}

/* Loading State */
.loading-container[b-36uuodkosu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

/* Empty State */
.empty-state[b-36uuodkosu] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.empty-state i[b-36uuodkosu] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state h3[b-36uuodkosu] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.empty-state p[b-36uuodkosu] {
    color: var(--text-secondary);
}

/* KPI Cards - Compact */
.kpi-cards[b-36uuodkosu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kpi-card[b-36uuodkosu] {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: var(--shadow-sm);
}

.kpi-card.warning[b-36uuodkosu] {
    border-left: 3px solid var(--warning-color);
}

.kpi-icon[b-36uuodkosu] {
    width: 36px;
    height: 36px;
    background: var(--primary-bg);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.kpi-card.warning .kpi-icon[b-36uuodkosu] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.kpi-content[b-36uuodkosu] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
}

.kpi-value[b-36uuodkosu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.kpi-label[b-36uuodkosu] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Resource List Container */
.resource-list-container[b-36uuodkosu] {
    flex: 1;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.resource-table-wrapper[b-36uuodkosu] {
    flex: 1;
    overflow: auto;
}

.resource-table[b-36uuodkosu] {
    width: 100%;
    border-collapse: collapse;
}

.resource-table thead[b-36uuodkosu] {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.resource-table th[b-36uuodkosu] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.resource-table th.sortable[b-36uuodkosu] {
    cursor: pointer;
}

.resource-table th.sortable:hover[b-36uuodkosu] {
    color: var(--primary-color);
}

.resource-table td[b-36uuodkosu] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.resource-row[b-36uuodkosu] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.resource-row:hover[b-36uuodkosu] {
    background: var(--hover-bg);
}

/* Name Cell with Avatar */
.name-cell[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar[b-36uuodkosu] {
    width: 36px;
    height: 36px;
    background: var(--dialog-header-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.avatar.large[b-36uuodkosu] {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
}

.name-info[b-36uuodkosu] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.name-info .name[b-36uuodkosu] {
    font-weight: 600;
    color: var(--text-primary);
}

.name-info .email[b-36uuodkosu] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Allocation Badge */
.allocation-badge[b-36uuodkosu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--primary-bg);
    color: var(--primary-color);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
}

.allocation-badge.over[b-36uuodkosu] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

/* Utilization Bar */
.utilization-bar[b-36uuodkosu] {
    width: 100%;
    max-width: 120px;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.utilization-bar.small[b-36uuodkosu] {
    height: 16px;
    max-width: 100px;
}

.bar-fill[b-36uuodkosu] {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.bar-fill.low[b-36uuodkosu] { background: var(--utilization-low-bg); }
.bar-fill.medium[b-36uuodkosu] { background: var(--utilization-medium-bg); }
.bar-fill.good[b-36uuodkosu] { background: var(--utilization-good-bg); }
.bar-fill.high[b-36uuodkosu] { background: var(--utilization-high-bg); }
.bar-fill.critical[b-36uuodkosu] { background: var(--utilization-critical-bg); }

.bar-label[b-36uuodkosu] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Status Badge */
.status-badge[b-36uuodkosu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.low[b-36uuodkosu] { background: var(--status-low-bg); color: var(--status-low-text); }
.status-badge.medium[b-36uuodkosu] { background: var(--status-medium-bg); color: var(--status-medium-text); }
.status-badge.good[b-36uuodkosu] { background: var(--status-good-bg); color: var(--status-good-text); }
.status-badge.high[b-36uuodkosu] { background: var(--status-high-bg); color: var(--status-high-text); }
.status-badge.critical[b-36uuodkosu] { background: var(--status-critical-bg); color: var(--status-critical-text); }
.status-badge.unassigned[b-36uuodkosu] { background: var(--status-unassigned-bg); color: var(--status-unassigned-text); }

/* Unassigned resource row styling */
.resource-row.unassigned[b-36uuodkosu] {
    background-color: var(--bg-secondary);
    opacity: 0.9;
}

.resource-row.unassigned:hover[b-36uuodkosu] {
    background-color: var(--hover-bg);
}

/* ========================================
   RESOURCE DETAIL VIEW
   ======================================== */

.resource-detail[b-36uuodkosu] {
    flex: 1;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.detail-header[b-36uuodkosu] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.resource-info-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.resource-info-header .info h2[b-36uuodkosu] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.resource-info-header .email[b-36uuodkosu] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.quick-stats[b-36uuodkosu] {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.quick-stats span[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Tabs */
.nav-tabs[b-36uuodkosu] {
    flex-shrink: 0;
    padding: 0 1rem;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
}

.nav-tabs .nav-link[b-36uuodkosu] {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link:hover[b-36uuodkosu] {
    color: var(--primary-color);
    border-color: transparent;
}

.nav-tabs .nav-link.active[b-36uuodkosu] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

.tab-content[b-36uuodkosu] {
    flex: 1;
    padding: 1.5rem;
    overflow: auto;
}

.tab-panel h4[b-36uuodkosu] {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.panel-header-row[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.panel-header-row h4[b-36uuodkosu] {
    margin: 0;
}

/* Monthly Table */
.monthly-table-wrapper[b-36uuodkosu] {
    overflow: auto;
}

.monthly-table[b-36uuodkosu] {
    width: 100%;
    border-collapse: collapse;
}

.monthly-table th[b-36uuodkosu],
.monthly-table td[b-36uuodkosu] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.monthly-table thead th[b-36uuodkosu] {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.monthly-table tr.current-month[b-36uuodkosu] {
    background: var(--current-month-bg);
}

.monthly-table tr.past[b-36uuodkosu] {
    color: var(--text-muted);
}

.monthly-table tr.future[b-36uuodkosu] {
    color: var(--text-muted);
    font-style: italic;
}

/* Project Allocation Cards */
.project-cards[b-36uuodkosu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.project-alloc-card[b-36uuodkosu] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.project-alloc-card .card-header[b-36uuodkosu] {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.project-alloc-card .card-header h5[b-36uuodkosu] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.project-alloc-card .card-body[b-36uuodkosu] {
    padding: 1rem;
}

.info-row[b-36uuodkosu] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.info-row .label[b-36uuodkosu] {
    color: var(--text-secondary);
}

.info-row .value[b-36uuodkosu] {
    font-weight: 500;
    color: var(--text-primary);
}

.workstream-list[b-36uuodkosu] {
    margin-top: 0.75rem;
}

.workstream-list .label[b-36uuodkosu] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.workstream-tag[b-36uuodkosu] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--primary-bg);
    color: var(--primary-color);
    border-radius: 4px;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Future Project Allocations Section */
.future-section-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--info-color);
}

.future-section-header i[b-36uuodkosu] {
    font-size: 1rem;
}

/* Future project cards */
.project-alloc-card.future[b-36uuodkosu] {
    border-color: var(--info-color);
    background: var(--info-bg);
}

.project-alloc-card.future .card-header[b-36uuodkosu] {
    background: var(--status-medium-bg);
    border-bottom-color: var(--info-color);
}

.allocation-badge.future[b-36uuodkosu] {
    background: var(--status-medium-bg);
    color: var(--status-medium-text);
}

.info-row.highlight[b-36uuodkosu] {
    color: var(--status-medium-text);
}

.info-row.highlight .value[b-36uuodkosu] {
    font-weight: 600;
}

/* Work Items Table */
.workitem-table-wrapper[b-36uuodkosu] {
    overflow: auto;
}

.workitem-table[b-36uuodkosu] {
    width: 100%;
    border-collapse: collapse;
}

.workitem-table th[b-36uuodkosu],
.workitem-table td[b-36uuodkosu] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.workitem-table thead th[b-36uuodkosu] {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.workitem-id[b-36uuodkosu] {
    font-family: monospace;
    color: var(--text-secondary);
    white-space: nowrap;
}

.workitem-title[b-36uuodkosu] {
    max-width: 400px;
    min-width: 200px;
}

.title-cell[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-36uuodkosu] .wit-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[b-36uuodkosu] .wit-icon-wrapper svg {
    width: 16px;
    height: 16px;
}

.title-link[b-36uuodkosu] {
    color: var(--primary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-link:hover[b-36uuodkosu] {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.state-badge[b-36uuodkosu] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.state-badge.new[b-36uuodkosu] { background: var(--status-medium-bg); color: var(--status-medium-text); }
.state-badge.active[b-36uuodkosu], .state-badge.in-progress[b-36uuodkosu] { background: var(--status-low-bg); color: var(--status-low-text); }
.state-badge.resolved[b-36uuodkosu] { background: var(--status-good-bg); color: var(--status-good-text); }
.state-badge.closed[b-36uuodkosu] { background: var(--bg-tertiary); color: var(--text-secondary); }

.parent-info[b-36uuodkosu] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Time-Off Table */
.timeoff-table-wrapper[b-36uuodkosu] {
    overflow: auto;
}

.timeoff-table[b-36uuodkosu] {
    width: 100%;
    border-collapse: collapse;
}

.timeoff-table th[b-36uuodkosu],
.timeoff-table td[b-36uuodkosu] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.timeoff-table thead th[b-36uuodkosu] {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.timeoff-table tr.past[b-36uuodkosu] {
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    .project-cards[b-36uuodkosu] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   KPIs TAB STYLES
   ======================================== */

.kpis-panel[b-36uuodkosu] {
    padding: 1rem 0;
}

.loading-kpis[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-secondary);
}

/* KPI Cards */
.kpi-cards[b-36uuodkosu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.kpi-card[b-36uuodkosu] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}

.kpi-card.accuracy[b-36uuodkosu] {
    border-left: 4px solid var(--success-color);
}

.kpi-value[b-36uuodkosu] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-value.under50[b-36uuodkosu] { color: var(--warning-color); }
.kpi-value.range50to80[b-36uuodkosu] { color: var(--info-color); }
.kpi-value.range80to120[b-36uuodkosu] { color: var(--success-color); }
.kpi-value.range120to150[b-36uuodkosu] { color: var(--utilization-high-bg); }
.kpi-value.over150[b-36uuodkosu] { color: var(--danger-color); }

.kpi-value-split[b-36uuodkosu] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-value-split .bug-pct[b-36uuodkosu] { color: var(--danger-color); }
.kpi-value-split .separator[b-36uuodkosu] { color: var(--text-muted); margin: 0 0.25rem; }
.kpi-value-split .pbi-pct[b-36uuodkosu] { color: var(--info-color); }

.kpi-label[b-36uuodkosu] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

.kpi-sublabel[b-36uuodkosu] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Accuracy Distribution */
.accuracy-distribution[b-36uuodkosu] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.accuracy-distribution h4[b-36uuodkosu] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.distribution-chart[b-36uuodkosu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.distribution-row[b-36uuodkosu] {
    display: grid;
    grid-template-columns: 70px 1fr 40px 100px;
    align-items: center;
    gap: 0.75rem;
}

.distribution-row.target[b-36uuodkosu] {
    background: var(--success-bg);
    margin: 0 -0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
}

.dist-label[b-36uuodkosu] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
}

.dist-bar-container[b-36uuodkosu] {
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar[b-36uuodkosu] {
    height: 100%;
    border-radius: 4px;
    min-width: 4px;
    transition: width 0.3s ease;
}

.dist-bar.under50[b-36uuodkosu] { background: var(--utilization-low-bg); }
.dist-bar.range50to80[b-36uuodkosu] { background: var(--utilization-medium-bg); }
.dist-bar.range80to120[b-36uuodkosu] { background: var(--utilization-good-bg); }
.dist-bar.range120to150[b-36uuodkosu] { background: var(--utilization-high-bg); }
.dist-bar.over150[b-36uuodkosu] { background: var(--utilization-critical-bg); }

.dist-count[b-36uuodkosu] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.dist-meaning[b-36uuodkosu] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Completed Items Section */
.completed-items-section[b-36uuodkosu] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
}

.completed-items-section h4[b-36uuodkosu] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.completed-table-wrapper[b-36uuodkosu] {
    overflow-x: auto;
}

.completed-table[b-36uuodkosu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.completed-table th[b-36uuodkosu] {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.completed-table td[b-36uuodkosu] {
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.completed-table tbody tr:hover[b-36uuodkosu] {
    background: var(--hover-bg);
}

.completed-table .item-title[b-36uuodkosu] {
    max-width: 300px;
}

/* Accuracy Badge */
.accuracy-badge[b-36uuodkosu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.accuracy-badge.under50[b-36uuodkosu] {
    background: var(--status-low-bg);
    color: var(--status-low-text);
}

.accuracy-badge.range50to80[b-36uuodkosu],
.accuracy-badge.\35 0to80[b-36uuodkosu] {
    background: var(--status-medium-bg);
    color: var(--status-medium-text);
}

.accuracy-badge.range80to120[b-36uuodkosu],
.accuracy-badge.\38 0to120[b-36uuodkosu] {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

.accuracy-badge.range120to150[b-36uuodkosu],
.accuracy-badge.\31 20to150[b-36uuodkosu] {
    background: var(--status-high-bg);
    color: var(--status-high-text);
}

.accuracy-badge.over150[b-36uuodkosu] {
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.accuracy-badge.no-estimate[b-36uuodkosu] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Responsive KPI Cards */
@media (max-width: 1200px) {
    .kpi-cards[b-36uuodkosu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .distribution-row[b-36uuodkosu] {
        grid-template-columns: 60px 1fr 30px 80px;
    }
}

/* ========================================
   DIALOGS
   ======================================== */
.dialog-backdrop[b-36uuodkosu] {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-36uuodkosu] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 450px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog.dialog-sm[b-36uuodkosu] {
    width: 380px;
}

.dialog-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.dialog-header h3[b-36uuodkosu] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.dialog .btn-close[b-36uuodkosu] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}

.dialog .btn-close:hover[b-36uuodkosu] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.dialog-body[b-36uuodkosu] {
    padding: 1.5rem;
    overflow-y: auto;
}

.dialog-body .form-group[b-36uuodkosu] {
    margin-bottom: 1rem;
}

.dialog-body .form-group:last-child[b-36uuodkosu] {
    margin-bottom: 0;
}

.dialog-body label[b-36uuodkosu] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.dialog-body .form-control[b-36uuodkosu] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.dialog-body .form-control:focus[b-36uuodkosu] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.dialog-footer[b-36uuodkosu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 12px 12px;
}

.dialog-footer .btn[b-36uuodkosu] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.dialog-footer .btn-secondary[b-36uuodkosu] {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-secondary);
}

.dialog-footer .btn-secondary:hover[b-36uuodkosu] {
    background: var(--hover-bg);
}

.dialog-footer .btn-primary[b-36uuodkosu] {
    background: var(--primary-color);
    border: none;
    color: white;
}

.dialog-footer .btn-primary:hover[b-36uuodkosu] {
    background: var(--primary-hover);
}

/* Time-Off Header */
.timeoff-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.timeoff-header h4[b-36uuodkosu] {
    margin: 0;
    color: var(--text-primary);
}

/* Collapsible Section */
.collapsible-section[b-36uuodkosu] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    overflow: hidden;
}

.collapsible-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.collapsible-header:hover[b-36uuodkosu] {
    background: var(--hover-bg);
}

.collapsible-header .oi[b-36uuodkosu] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.collapsible-title[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.collapsible-title .oi[b-36uuodkosu] {
    font-size: 1rem;
    color: var(--primary-color);
}

.count-badge[b-36uuodkosu] {
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    min-width: 1.5rem;
    text-align: center;
}

.collapsible-summary[b-36uuodkosu] {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.collapsible-content[b-36uuodkosu] {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    animation: slideDown-b-36uuodkosu 0.2s ease-out;
}

@keyframes slideDown-b-36uuodkosu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ACTIVITY TAB
   ======================================== */

.activity-panel[b-36uuodkosu] {
    padding: 1rem;
}

.activity-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.activity-header h4[b-36uuodkosu] {
    margin: 0;
    color: var(--text-primary);
}

.period-buttons[b-36uuodkosu] {
    display: flex;
    gap: 0.5rem;
}

.custom-date-range[b-36uuodkosu] {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.date-inputs[b-36uuodkosu] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.date-inputs .form-group[b-36uuodkosu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-inputs label[b-36uuodkosu] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.loading-activity[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-secondary);
}

.activity-chart-container[b-36uuodkosu] {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.activity-summary h5[b-36uuodkosu] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-cards[b-36uuodkosu] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.activity-summary-card[b-36uuodkosu] {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--border-color);
    min-width: 150px;
}

.activity-summary-card .activity-type[b-36uuodkosu] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-summary-card .activity-hours[b-36uuodkosu] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
}

.activity-summary-card .activity-percent[b-36uuodkosu] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.no-activity-data[b-36uuodkosu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.no-activity-data i[b-36uuodkosu] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ========================================
   CROSS-PROJECT ALLOCATION VIEW
   ======================================== */

/* Expand button for project breakdown */
.expand-btn[b-36uuodkosu] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.expand-btn:hover[b-36uuodkosu] {
    background: var(--primary-bg);
    color: var(--primary-color);
}

.expand-btn i[b-36uuodkosu] {
    font-size: 0.75rem;
}

/* Allocation status badges */
.allocation-badge.full[b-36uuodkosu] {
    background: var(--status-low-bg);
    color: var(--status-low-text);
}

.allocation-badge.partial[b-36uuodkosu] {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

.allocation-badge.none[b-36uuodkosu] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Workstream badges */
.workstream-badge[b-36uuodkosu] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.workstream-badge.dev[b-36uuodkosu] {
    background: var(--status-medium-bg);
    color: var(--status-medium-text);
}

.workstream-badge.qa[b-36uuodkosu] {
    background: var(--badge-qa-bg);
    color: var(--badge-qa-text);
}

.workstream-badge.small[b-36uuodkosu] {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
}

/* Project breakdown rows */
.project-breakdown-row[b-36uuodkosu] {
    background: var(--hover-bg);
    font-size: 0.9rem;
}

.project-breakdown-row:hover[b-36uuodkosu] {
    background: var(--bg-tertiary);
}

/* Future allocation rows */
.project-breakdown-row.future-allocation[b-36uuodkosu] {
    background: var(--info-bg);
    border-left: 3px solid var(--info-color);
}

.project-breakdown-row.future-allocation:hover[b-36uuodkosu] {
    background: var(--status-medium-bg);
}

.project-name-cell[b-36uuodkosu] {
    padding-left: 2.5rem !important;
}

.project-indent[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.project-indent i[b-36uuodkosu] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Future allocation calendar icon */
.future-allocation .project-indent i.oi-calendar[b-36uuodkosu] {
    color: var(--info-color);
}

/* Upcoming badge */
.upcoming-badge[b-36uuodkosu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: var(--status-medium-bg);
    color: var(--status-medium-text);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    white-space: nowrap;
}

.upcoming-badge i[b-36uuodkosu] {
    font-size: 0.65rem;
    color: var(--status-medium-text);
}

/* Mini allocation badge for breakdown rows */
.allocation-mini[b-36uuodkosu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.allocation-mini.future[b-36uuodkosu] {
    color: var(--info-color);
}

/* Over-allocated row highlight */
.resource-row.over[b-36uuodkosu] {
    background: var(--danger-bg);
}

.resource-row.over:hover[b-36uuodkosu] {
    background: var(--status-critical-bg);
}

/* Text muted */
.text-muted[b-36uuodkosu] {
    color: var(--text-muted);
}

/* View Toggle Buttons */
.workitems-controls[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.view-toggle[b-36uuodkosu] {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.toggle-btn[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.625rem;
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.toggle-btn:hover[b-36uuodkosu] {
    background: var(--hover-bg);
}

.toggle-btn.active[b-36uuodkosu] {
    background: var(--primary-color);
    color: white;
}

.toggle-btn + .toggle-btn[b-36uuodkosu] {
    border-left: 1px solid var(--border-color);
}

/* Kanban Board */
.kanban-board[b-36uuodkosu] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    min-height: 400px;
}

.kanban-column[b-36uuodkosu] {
    flex: 1;
    min-width: 250px;
    max-width: 320px;
    background: var(--bg-secondary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.kanban-column-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.875rem;
}

.kanban-header-new[b-36uuodkosu] {
    background: var(--status-medium-bg);
    color: var(--status-medium-text);
}

.kanban-header-active[b-36uuodkosu] {
    background: var(--status-low-bg);
    color: var(--status-low-text);
}

.kanban-header-resolved[b-36uuodkosu] {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

.kanban-header-closed[b-36uuodkosu] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.kanban-header-default[b-36uuodkosu] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.kanban-state-name[b-36uuodkosu] {
    font-weight: 600;
}

.kanban-count[b-36uuodkosu] {
    background: var(--hover-bg);
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.kanban-cards[b-36uuodkosu] {
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kanban-card[b-36uuodkosu] {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}

.kanban-card:hover[b-36uuodkosu] {
    box-shadow: var(--shadow-md);
}

.kanban-card-header[b-36uuodkosu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.kanban-card-type[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.kanban-card-id[b-36uuodkosu] {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.kanban-card-id:hover[b-36uuodkosu] {
    color: var(--primary-color);
    text-decoration: underline;
}

.kanban-priority[b-36uuodkosu] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.kanban-priority.priority-1[b-36uuodkosu] {
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.kanban-priority.priority-2[b-36uuodkosu] {
    background: var(--status-low-bg);
    color: var(--status-low-text);
}

.kanban-priority.priority-3[b-36uuodkosu] {
    background: var(--status-medium-bg);
    color: var(--status-medium-text);
}

.kanban-card-title[b-36uuodkosu] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
    word-break: break-word;
}

.kanban-card-title:hover[b-36uuodkosu] {
    color: var(--primary-color);
}

.kanban-card-parent[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.75rem;
}

.kanban-parent-link[b-36uuodkosu] {
    color: var(--text-secondary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-parent-link:hover[b-36uuodkosu] {
    color: var(--primary-color);
    text-decoration: underline;
}

.kanban-empty[b-36uuodkosu] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 2rem 1rem;
    font-style: italic;
}

/* Work Item Breakdown Table Styles */
.chart-hint[b-36uuodkosu] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.chart-hint i[b-36uuodkosu] {
    font-size: 0.7rem;
}

.workitem-breakdown[b-36uuodkosu] {
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.breakdown-header[b-36uuodkosu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breakdown-header h5[b-36uuodkosu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.breakdown-filter-info[b-36uuodkosu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breakdown-filter-info .filter-label[b-36uuodkosu] {
    color: var(--text-secondary);
}

.breakdown-filter-info .filter-value[b-36uuodkosu] {
    font-weight: 500;
    color: var(--info-color);
    background-color: var(--info-bg);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.breakdown-filter-info .btn[b-36uuodkosu] {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
}

.breakdown-table-wrapper[b-36uuodkosu] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

.breakdown-table[b-36uuodkosu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.breakdown-table thead[b-36uuodkosu] {
    position: sticky;
    top: 0;
    background-color: var(--bg-secondary);
    z-index: 1;
}

.breakdown-table th[b-36uuodkosu] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
}

.breakdown-table td[b-36uuodkosu] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.breakdown-table tbody tr:hover[b-36uuodkosu] {
    background-color: var(--hover-bg);
}

.breakdown-table tfoot[b-36uuodkosu] {
    background-color: var(--bg-secondary);
}

.breakdown-table tfoot td[b-36uuodkosu] {
    padding: 0.625rem 0.75rem;
    border-top: 2px solid var(--border-color);
    border-bottom: none;
}

/* Breakdown table uses existing .title-cell and .title-link classes from work items tab */
.breakdown-table .workitem-title-cell[b-36uuodkosu] {
    max-width: 350px;
}

.breakdown-table .workitem-id[b-36uuodkosu] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
}

.activity-badge[b-36uuodkosu] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.hours-cell[b-36uuodkosu] {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .resources-page[b-36uuodkosu] {
        padding: 0 0.5rem;
        height: calc(100vh - 100px);
        max-height: calc(100vh - 100px);
        overflow: hidden;
    }

    /* Page header */
    .page-header[b-36uuodkosu] {
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.75rem;
        border-radius: 10px;
    }

    .header-row[b-36uuodkosu] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .header-left[b-36uuodkosu] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header-icon[b-36uuodkosu] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .header-title[b-36uuodkosu] {
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .header-filters[b-36uuodkosu] {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Hide desktop actions on mobile */
    .desktop-actions[b-36uuodkosu] {
        display: none;
    }

    /* Show mobile overflow menu */
    .mobile-overflow-menu[b-36uuodkosu] {
        display: block;
    }

    /* Header dropdown - hidden on mobile, filters in overflow menu */
    .header-dropdown[b-36uuodkosu] {
        display: none;
    }

    .overflow-menu-btn[b-36uuodkosu] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--header-icon-bg);
        border: 1px solid var(--header-border-light);
        color: var(--text-on-primary);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .overflow-menu-btn:hover[b-36uuodkosu] {
        background: var(--header-border-light);
    }

    .overflow-dropdown[b-36uuodkosu] {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 220px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 1100;
        overflow: hidden;
        animation: resourcesDropdownFadeIn-b-36uuodkosu 0.15s ease-out;
    }

    @keyframes resourcesDropdownFadeIn-b-36uuodkosu {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .overflow-filter-item[b-36uuodkosu] {
        padding: 0.75rem 1rem;
    }

    .overflow-filter-item label[b-36uuodkosu] {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.375rem;
    }

    .overflow-filter-item .form-control[b-36uuodkosu],
    .overflow-filter-item .form-select[b-36uuodkosu] {
        width: 100%;
        height: 36px;
        font-size: 0.875rem;
        background: var(--input-bg);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    .overflow-divider[b-36uuodkosu] {
        height: 1px;
        background: var(--border-color);
        margin: 0.25rem 0;
    }

    .overflow-item[b-36uuodkosu] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.75rem 1rem;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 0.15s ease;
        text-align: left;
    }

    .overflow-item:hover[b-36uuodkosu] {
        background: var(--bg-tertiary);
    }

    .overflow-item i[b-36uuodkosu] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        width: 16px;
        text-align: center;
    }

    .overflow-item:disabled[b-36uuodkosu] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .spinner-sm[b-36uuodkosu] {
        width: 14px;
        height: 14px;
        border: 2px solid var(--border-color);
        border-top: 2px solid var(--primary-color);
        border-radius: 50%;
        animation: spin-b-36uuodkosu 1s linear infinite;
    }

    /* ===== KPI Cards - Single Row on Mobile ===== */
    .kpi-cards[b-36uuodkosu] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.375rem;
        margin-bottom: 0.5rem;
    }

    .kpi-card[b-36uuodkosu] {
        flex-direction: column;
        text-align: center;
        padding: 0.375rem 0.25rem;
        gap: 0.25rem;
    }

    .kpi-card.warning[b-36uuodkosu] {
        border-left: none;
        border-top: 2px solid var(--warning-color);
    }

    .kpi-icon[b-36uuodkosu] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        border-radius: 4px;
    }

    .kpi-content[b-36uuodkosu] {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .kpi-value[b-36uuodkosu] {
        font-size: 0.9rem;
        font-weight: 700;
    }

    .kpi-label[b-36uuodkosu] {
        font-size: 0.5rem;
        text-transform: uppercase;
        line-height: 1.2;
    }

    /* ===== Resource Detail View - Mobile Optimized ===== */
    .resource-detail[b-36uuodkosu] {
        padding: 0;
    }

    .detail-header[b-36uuodkosu] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .detail-header .btn-back[b-36uuodkosu] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }

    .detail-header .btn-back .btn-text[b-36uuodkosu] {
        display: none;
    }

    .resource-info-header[b-36uuodkosu] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
    }

    .resource-info-header .avatar.large[b-36uuodkosu] {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .resource-info-header .info[b-36uuodkosu] {
        min-width: 0;
        flex: 1;
    }

    .resource-info-header .info h2[b-36uuodkosu] {
        font-size: 0.9375rem;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .resource-info-header .info .email[b-36uuodkosu] {
        display: none;
    }

    .resource-info-header .quick-stats[b-36uuodkosu] {
        display: flex;
        gap: 0.625rem;
        font-size: 0.6875rem;
        margin-top: 0.125rem;
    }

    .detail-actions[b-36uuodkosu] {
        display: flex;
        gap: 0.375rem;
    }

    .detail-actions .btn[b-36uuodkosu] {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        gap: 0.25rem;
    }

    /* Hide button text on mobile, show only icons */
    .detail-actions .btn .btn-text[b-36uuodkosu] {
        display: none;
    }

    /* ===== Nav Tabs - Horizontal Scroll ===== */
    .resource-detail .nav-tabs[b-36uuodkosu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: 0 0.5rem;
        gap: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .resource-detail .nav-tabs[b-36uuodkosu]::-webkit-scrollbar {
        display: none;
    }

    .resource-detail .nav-tabs .nav-item[b-36uuodkosu] {
        flex-shrink: 0;
    }

    .resource-detail .nav-tabs .nav-link[b-36uuodkosu] {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Hide tab text on mobile, show only icons */
    .resource-detail .nav-tabs .nav-link .tab-label[b-36uuodkosu] {
        display: none;
    }

    /* ===== Tab Content - Mobile Optimized ===== */
    .resource-detail .tab-content[b-36uuodkosu] {
        padding: 0;
    }

    .resource-detail .tab-panel[b-36uuodkosu] {
        padding: 0.75rem;
    }

    .resource-detail .tab-panel h4[b-36uuodkosu] {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }

    /* Monthly table - horizontal scroll */
    .monthly-table-wrapper[b-36uuodkosu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    .monthly-table[b-36uuodkosu] {
        font-size: 0.75rem;
        min-width: 450px;
    }

    .monthly-table th[b-36uuodkosu],
    .monthly-table td[b-36uuodkosu] {
        padding: 0.5rem 0.375rem;
    }

    .monthly-table .utilization-bar.small[b-36uuodkosu] {
        min-width: 60px;
    }

    /* Project cards */
    .project-cards[b-36uuodkosu] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .project-alloc-card .card-header[b-36uuodkosu] {
        padding: 0.5rem 0.75rem;
    }

    .project-alloc-card .card-header h5[b-36uuodkosu] {
        font-size: 0.875rem;
    }

    .project-alloc-card .card-body[b-36uuodkosu] {
        padding: 0.75rem;
    }

    .info-row[b-36uuodkosu] {
        font-size: 0.8125rem;
    }

    /* Future section header */
    .future-section-header[b-36uuodkosu] {
        margin-top: 1.25rem;
        padding-top: 1rem;
        font-size: 0.875rem;
    }

    /* Work items table */
    .work-items-table-wrapper[b-36uuodkosu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    /* Time-off table */
    .timeoff-table-wrapper[b-36uuodkosu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }

    /* Split pane layout - stack on mobile */
    .split-container[b-36uuodkosu] {
        flex-direction: column;
    }

    .resource-list-panel[b-36uuodkosu] {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 40vh;
        border-radius: 10px;
    }

    .resource-detail-panel[b-36uuodkosu] {
        flex: 1;
        min-height: 0;
        border-radius: 10px;
    }

    /* Panel headers */
    .panel-header[b-36uuodkosu] {
        padding: 0.625rem 0.75rem;
        min-height: 48px;
    }

    .panel-header h2[b-36uuodkosu] {
        font-size: 0.875rem;
    }

    /* Resource list items */
    .resource-item[b-36uuodkosu] {
        padding: 0.75rem;
        min-height: 56px;
    }

    .resource-avatar[b-36uuodkosu] {
        width: 36px;
        height: 36px;
    }

    .resource-name[b-36uuodkosu] {
        font-size: 0.875rem;
    }

    .resource-role[b-36uuodkosu] {
        font-size: 0.75rem;
    }

    /* Tab navigation */
    .tab-nav[b-36uuodkosu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tab-nav[b-36uuodkosu]::-webkit-scrollbar {
        display: none;
    }

    .tab-btn[b-36uuodkosu] {
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Stats grid */
    .stats-grid[b-36uuodkosu] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }

    .stat-card[b-36uuodkosu] {
        padding: 0.625rem;
    }

    .stat-value[b-36uuodkosu] {
        font-size: 1.25rem;
    }

    .stat-label[b-36uuodkosu] {
        font-size: 0.6875rem;
    }

    /* Tables - horizontal scroll */
    .table-responsive[b-36uuodkosu],
    .data-table-container[b-36uuodkosu] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .data-table[b-36uuodkosu],
    .breakdown-table[b-36uuodkosu] {
        font-size: 0.8125rem;
        min-width: 600px;
    }

    .data-table th[b-36uuodkosu],
    .data-table td[b-36uuodkosu] {
        padding: 0.5rem 0.375rem;
    }

    /* Assignment cards */
    .assignment-card[b-36uuodkosu] {
        padding: 0.75rem;
    }

    .assignment-header[b-36uuodkosu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Charts */
    .chart-container[b-36uuodkosu] {
        min-height: 250px;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .stats-grid[b-36uuodkosu] {
        grid-template-columns: 1fr !important;
    }

    .resource-list-panel[b-36uuodkosu] {
        max-height: 35vh;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* ========================================
   SETTINGS PAGE - Global Configuration
   ======================================== */

.settings-page[b-akdra2i7vb] {
    width: 100%;
    padding: 0 0.5rem;
}

/* Page Header */
.page-header[b-akdra2i7vb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--settings-header-gradient);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.header-left[b-akdra2i7vb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-akdra2i7vb] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-on-primary);
}

.header-title[b-akdra2i7vb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

/* Loading State */
.loading-container[b-akdra2i7vb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

/* Tabs */
.settings-tabs[b-akdra2i7vb] {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.tab-nav[b-akdra2i7vb] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 0 1rem;
}

.tab-btn[b-akdra2i7vb] {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.tab-btn:hover[b-akdra2i7vb] {
    color: var(--primary-color);
}

.tab-btn.active[b-akdra2i7vb] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content[b-akdra2i7vb] {
    padding: 1.5rem;
    min-height: 400px;
}

.tab-panel[b-akdra2i7vb] {
    animation: fadeIn-b-akdra2i7vb 0.2s ease;
}

@keyframes fadeIn-b-akdra2i7vb {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Panel Header */
.panel-header[b-akdra2i7vb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.panel-header h4[b-akdra2i7vb] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Empty State */
.empty-state[b-akdra2i7vb] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.empty-state.small[b-akdra2i7vb] {
    padding: 2rem;
}

.empty-state i[b-akdra2i7vb] {
    font-size: 2rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state p[b-akdra2i7vb] {
    color: var(--text-secondary);
    margin: 0;
}

/* Workstream List */
.workstream-list[b-akdra2i7vb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.workstream-card[b-akdra2i7vb] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
    padding: 1rem;
}

.workstream-header[b-akdra2i7vb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.workstream-header h5[b-akdra2i7vb] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workstream-actions[b-akdra2i7vb] {
    display: flex;
    gap: 0.25rem;
}

.workstream-description[b-akdra2i7vb] {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.workstream-badges[b-akdra2i7vb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Button Icons */
.btn-icon[b-akdra2i7vb] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-akdra2i7vb] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon.btn-danger:hover[b-akdra2i7vb] {
    background: var(--danger-color);
    color: var(--text-on-primary);
}

/* Holidays Panel */
.holidays-panel .table[b-akdra2i7vb] {
    margin-top: 1rem;
}

.holidays-panel .table th[b-akdra2i7vb] {
    border-top: none;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ========================================
   DIALOGS
   ======================================== */
.dialog-backdrop[b-akdra2i7vb] {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-akdra2i7vb] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 450px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog.dialog-sm[b-akdra2i7vb] {
    width: 380px;
}

.dialog-header[b-akdra2i7vb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.dialog-header h3[b-akdra2i7vb] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.dialog .btn-close[b-akdra2i7vb] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
}

.dialog .btn-close:hover[b-akdra2i7vb] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.dialog-body[b-akdra2i7vb] {
    padding: 1.5rem;
    overflow-y: auto;
}

.dialog-body .form-group[b-akdra2i7vb] {
    margin-bottom: 1rem;
}

.dialog-body label[b-akdra2i7vb] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.dialog-body .form-control[b-akdra2i7vb] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.dialog-body .form-control:focus[b-akdra2i7vb] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: var(--focus-ring);
}

.dialog-body .form-control-color[b-akdra2i7vb] {
    width: 60px;
    height: 38px;
    padding: 0.25rem;
}

.dialog-footer[b-akdra2i7vb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    border-radius: 0 0 12px 12px;
}

.dialog-footer .btn[b-akdra2i7vb] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
}

.dialog-footer .btn-secondary[b-akdra2i7vb] {
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
}

.dialog-footer .btn-secondary:hover[b-akdra2i7vb] {
    background: var(--border-color);
}

.dialog-footer .btn-primary[b-akdra2i7vb] {
    background: var(--primary-color);
    border: none;
    color: var(--text-on-primary);
}

.dialog-footer .btn-primary:hover[b-akdra2i7vb] {
    background: var(--primary-hover);
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container[b-akdra2i7vb] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
}

.toast[b-akdra2i7vb] {
    min-width: 280px;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.toast-success[b-akdra2i7vb] {
    background: var(--success-color);
    color: var(--text-on-primary);
}

.toast-error[b-akdra2i7vb] {
    background: var(--danger-color);
    color: var(--text-on-primary);
}

.toast-body[b-akdra2i7vb] {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .settings-page[b-akdra2i7vb] {
        padding: 0 0.5rem;
    }

    /* Page header */
    .page-header[b-akdra2i7vb] {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .header-icon[b-akdra2i7vb] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .header-title[b-akdra2i7vb] {
        font-size: 1.1rem;
    }

    /* ===== Hide text labels on mobile ===== */
    .tab-label[b-akdra2i7vb],
    .btn-text[b-akdra2i7vb] {
        display: none;
    }

    /* Tabs - icon-only */
    .settings-tabs[b-akdra2i7vb] {
        border-radius: 10px;
    }

    .tab-nav[b-akdra2i7vb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 0.5rem;
        gap: 0.25rem;
    }

    .tab-nav[b-akdra2i7vb]::-webkit-scrollbar {
        display: none;
    }

    .tab-btn[b-akdra2i7vb] {
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 40px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .tab-content[b-akdra2i7vb] {
        padding: 0.75rem;
    }

    /* Panel headers */
    .panel-header[b-akdra2i7vb] {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .panel-header h4[b-akdra2i7vb] {
        font-size: 0.9375rem;
        flex: 1;
    }

    .panel-header .btn[b-akdra2i7vb] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }

    .text-muted[b-akdra2i7vb] {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Workstream cards */
    .workstream-list[b-akdra2i7vb] {
        gap: 0.5rem;
    }

    .workstream-card[b-akdra2i7vb] {
        padding: 0.625rem;
        border-radius: 8px;
    }

    .workstream-header h5[b-akdra2i7vb] {
        font-size: 0.875rem;
    }

    .workstream-description[b-akdra2i7vb] {
        font-size: 0.75rem;
        margin: 0.375rem 0;
    }

    .workstream-badges[b-akdra2i7vb] {
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .workstream-badges .badge[b-akdra2i7vb] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    .workstream-actions[b-akdra2i7vb] {
        gap: 0.25rem;
    }

    .workstream-actions .btn-icon[b-akdra2i7vb] {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    /* Holiday list */
    .location-group[b-akdra2i7vb] {
        margin-bottom: 1rem;
    }

    .location-header[b-akdra2i7vb] {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    .holiday-list[b-akdra2i7vb] {
        gap: 0.375rem;
    }

    .holiday-item[b-akdra2i7vb] {
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .holiday-date[b-akdra2i7vb] {
        font-size: 0.75rem;
        min-width: 70px;
    }

    .holiday-name[b-akdra2i7vb] {
        font-size: 0.8125rem;
    }

    .holiday-actions .btn-icon[b-akdra2i7vb] {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    /* Form elements */
    .form-row[b-akdra2i7vb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group[b-akdra2i7vb] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-group label[b-akdra2i7vb] {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .form-control[b-akdra2i7vb],
    .form-select[b-akdra2i7vb] {
        min-height: 40px;
        font-size: 0.875rem;
    }

    /* Setting items */
    .setting-item[b-akdra2i7vb] {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .setting-info[b-akdra2i7vb] {
        width: 100%;
    }

    .setting-control[b-akdra2i7vb] {
        width: 100%;
        justify-content: flex-end;
    }

    /* Buttons */
    .btn[b-akdra2i7vb] {
        min-height: 40px;
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    .btn-sm[b-akdra2i7vb] {
        min-height: 36px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Empty state */
    .empty-state[b-akdra2i7vb] {
        padding: 1rem;
    }

    .empty-state i[b-akdra2i7vb] {
        font-size: 2rem;
    }

    .empty-state p[b-akdra2i7vb] {
        font-size: 0.8125rem;
    }

    /* Dialog - full screen */
    .dialog[b-akdra2i7vb] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .dialog-header[b-akdra2i7vb] {
        padding: 0.75rem;
    }

    .dialog-header h3[b-akdra2i7vb] {
        font-size: 1rem;
    }

    .dialog-body[b-akdra2i7vb] {
        padding: 0.75rem;
    }

    .dialog-footer[b-akdra2i7vb] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .dialog-footer .btn[b-akdra2i7vb] {
        flex: 1;
        font-size: 0.8125rem;
    }

    /* Toast notifications */
    .toast-container[b-akdra2i7vb] {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        max-width: 100%;
    }

    .toast[b-akdra2i7vb] {
        font-size: 0.8125rem;
    }
}
/* /Pages/Teams.razor.rz.scp.css */
/* ========================================
   TEAMS PAGE - Modern Design
   ======================================== */

/* Override main scroll container for Teams page - scrolling happens in panels */
.teams-page-active #main-scroll-container[b-z3j4ydyx6q] {
    overflow: hidden !important;
}

.teams-page-active #main-content[b-z3j4ydyx6q] {
    overflow: hidden !important;
    padding: 0 !important;
}

.teams-page[b-z3j4ydyx6q] {
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    /* Calculate height: 100vh - header(70px) - footer(~45px) */
    height: calc(100vh - 115px);
    max-height: calc(100vh - 115px);
    min-height: 0;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER (matches Projects/Epics)
   ======================================== */
.compact-header[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--page-header-gradient);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.header-left[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-z3j4ydyx6q] {
    width: 36px;
    height: 36px;
    background: var(--header-icon-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 1.1rem;
}

.header-title[b-z3j4ydyx6q] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    margin: 0;
}

/* ========================================
   TEAMS CONTAINER
   ======================================== */
.teams-container[b-z3j4ydyx6q] {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.teams-list-panel[b-z3j4ydyx6q],
.team-details-panel[b-z3j4ydyx6q] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.teams-list-panel[b-z3j4ydyx6q] {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    transition: width 0.3s ease, min-width 0.3s ease;
}

.teams-list-panel.collapsed[b-z3j4ydyx6q] {
    width: 48px;
    min-width: 48px;
}

.teams-list-panel.collapsed .panel-body[b-z3j4ydyx6q] {
    display: none;
}

.teams-list-panel.collapsed .panel-header[b-z3j4ydyx6q] {
    justify-content: center;
    padding: 0.75rem;
}

.team-details-panel[b-z3j4ydyx6q] {
    flex: 1;
    min-height: 0;
}

.panel-header[b-z3j4ydyx6q] {
    padding: 0.75rem 1rem;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.panel-header-actions[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-collapse[b-z3j4ydyx6q],
.btn-expand[b-z3j4ydyx6q] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--primary-bg);
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-collapse:hover[b-z3j4ydyx6q],
.btn-expand:hover[b-z3j4ydyx6q] {
    background: var(--primary-color);
    color: white;
}

.panel-header h2[b-z3j4ydyx6q] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.panel-header h2 i[b-z3j4ydyx6q] {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.panel-body[b-z3j4ydyx6q] {
    flex: 1;
    overflow: auto;
    padding: 0.75rem;
    min-height: 0;
}

/* Team details panel body needs flex layout for content to fill space */
.team-details-panel .panel-body[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

/* ========================================
   TEAM LIST
   ======================================== */
.team-list[b-z3j4ydyx6q] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-item[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 0.35rem;
}

.team-item:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
}

.team-item.selected[b-z3j4ydyx6q] {
    background: var(--primary-bg);
    border-color: var(--primary-color);
}

.team-info[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.team-name[b-z3j4ydyx6q] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-meta[b-z3j4ydyx6q] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.team-stat[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.team-stat i[b-z3j4ydyx6q] {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.team-actions[b-z3j4ydyx6q] {
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.team-item:hover .team-actions[b-z3j4ydyx6q] {
    opacity: 1;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-add-team[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);
}

.btn-add-team:hover[b-z3j4ydyx6q] {
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.3);
}

.btn-icon[b-z3j4ydyx6q] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.btn-icon:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    color: var(--primary-color);
}

.btn-icon.btn-danger:hover[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

.btn-primary[b-z3j4ydyx6q] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled)[b-z3j4ydyx6q] {
    transform: translateY(-1px);
    box-shadow: var(--btn-primary-hover-shadow);
}

.btn-primary:disabled[b-z3j4ydyx6q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-z3j4ydyx6q] {
    padding: 0.625rem 1.25rem;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
}

.btn-danger[b-z3j4ydyx6q] {
    padding: 0.625rem 1.25rem;
    background: var(--danger-color);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover:not(:disabled)[b-z3j4ydyx6q] {
    background: var(--danger-hover);
}

.btn-danger:disabled[b-z3j4ydyx6q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-refresh[b-z3j4ydyx6q] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh:hover:not(:disabled)[b-z3j4ydyx6q] {
    transform: scale(1.05);
}

.btn-refresh:disabled[b-z3j4ydyx6q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-tree-control[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-tree-control:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    border-color: var(--text-muted);
}

/* ========================================
   AREA PATH PANEL
   ======================================== */
.header-actions[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cache-info[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cache-info i[b-z3j4ydyx6q] {
    color: var(--primary-color);
}

.area-path-controls[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.selection-info[b-z3j4ydyx6q] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.area-path-tree-container[b-z3j4ydyx6q] {
    flex: 1;
    overflow: auto;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.75rem;
    min-height: 0;
}

/* Override the global area-path-tree styles to remove its own scrolling */
.area-path-tree-container[b-z3j4ydyx6q]  .area-path-tree {
    max-height: none !important;
    overflow-y: visible !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.area-path-actions[b-z3j4ydyx6q] {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

/* ========================================
   STATES
   ======================================== */
.loading-state[b-z3j4ydyx6q],
.empty-state[b-z3j4ydyx6q],
.no-selection-state[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
    height: 100%;
}

.empty-state i[b-z3j4ydyx6q],
.no-selection-state i[b-z3j4ydyx6q] {
    font-size: 3rem;
    color: var(--text-muted);
}

.loading-state .spinner-border[b-z3j4ydyx6q] {
    color: var(--primary-color);
}

/* ========================================
   DIALOGS
   ======================================== */
.dialog-backdrop[b-z3j4ydyx6q] {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-z3j4ydyx6q] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 450px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dialog.dialog-sm[b-z3j4ydyx6q] {
    width: 380px;
}

.dialog-header[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.dialog-header h3[b-z3j4ydyx6q] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.btn-close[b-z3j4ydyx6q] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}

.btn-close:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.dialog-body[b-z3j4ydyx6q] {
    padding: 1.5rem;
    overflow: auto;
}

.dialog-body .form-group[b-z3j4ydyx6q] {
    margin-bottom: 1.25rem;
}

.dialog-body .form-group:last-child[b-z3j4ydyx6q] {
    margin-bottom: 0;
}

.dialog-body label[b-z3j4ydyx6q] {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.dialog-body .form-control[b-z3j4ydyx6q] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
    background: var(--input-bg);
    color: var(--text-primary);
}

.dialog-body .form-control:focus[b-z3j4ydyx6q] {
    outline: none;
    border-color: var(--primary-color);
}

.dialog-body textarea.form-control[b-z3j4ydyx6q] {
    resize: vertical;
    min-height: 80px;
}

.dialog-body .alert[b-z3j4ydyx6q] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-top: 1rem;
}

.dialog-body .alert-danger[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-border);
}

.dialog-footer[b-z3j4ydyx6q] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
    border-radius: 0 0 16px 16px;
}

.text-muted[b-z3j4ydyx6q] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.dialog-body p[b-z3j4ydyx6q] {
    margin: 0 0 0.5rem 0;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast-container[b-z3j4ydyx6q] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    animation: slideIn-b-z3j4ydyx6q 0.3s ease-out;
}

@keyframes slideIn-b-z3j4ydyx6q {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    min-width: 300px;
    max-width: 450px;
}

.toast-success[b-z3j4ydyx6q] {
    background: var(--success-gradient);
    color: var(--text-on-primary);
}

.toast-error[b-z3j4ydyx6q] {
    background: var(--danger-gradient);
    color: var(--text-on-primary);
}

.toast-icon[b-z3j4ydyx6q] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toast-message[b-z3j4ydyx6q] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.toast-close[b-z3j4ydyx6q] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-icon-bg);
    border: none;
    border-radius: 6px;
    color: var(--text-on-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toast-close:hover[b-z3j4ydyx6q] {
    background: var(--header-border-light);
}

/* ========================================
   TABS
   ======================================== */
.team-tabs[b-z3j4ydyx6q] {
    display: flex;
    border-bottom: 2px solid var(--border-subtle);
    background: var(--surface-secondary);
    padding: 0 1rem;
    flex-shrink: 0;
}

.tab-button[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.tab-button:hover[b-z3j4ydyx6q] {
    color: var(--primary-color);
    background: var(--primary-bg);
}

.tab-button.active[b-z3j4ydyx6q] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--card-bg);
}

.tab-button i[b-z3j4ydyx6q] {
    font-size: 0.85rem;
}

.tab-count[b-z3j4ydyx6q] {
    font-size: 0.75rem;
    background: var(--hover-bg);
    color: var(--text-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 500;
}

.tab-button.active .tab-count[b-z3j4ydyx6q] {
    background: var(--primary-bg);
    color: var(--primary-color);
}

/* ========================================
   TAB HEADER
   ======================================== */
.tab-header[b-z3j4ydyx6q] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.tab-header .btn-secondary[b-z3j4ydyx6q] {
    padding: 0.5rem 1rem;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.tab-header .btn-secondary:hover:not(:disabled)[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    border-color: var(--border-color);
}

.tab-header .btn-secondary:disabled[b-z3j4ydyx6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   MEMBER LIST
   ======================================== */
.member-list[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.member-list[b-z3j4ydyx6q]::-webkit-scrollbar {
    width: 6px;
}

.member-list[b-z3j4ydyx6q]::-webkit-scrollbar-track {
    background: var(--surface-secondary);
    border-radius: 3px;
}

.member-list[b-z3j4ydyx6q]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.member-list[b-z3j4ydyx6q]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.member-item[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--surface-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    transition: all 0.2s;
}

.member-item:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    border-color: var(--border-color);
}

.member-info[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.member-name[b-z3j4ydyx6q] {
    font-weight: 600;
    color: var(--text-primary);
}

.member-details[b-z3j4ydyx6q] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.member-role[b-z3j4ydyx6q] {
    background: var(--primary-bg);
    color: var(--primary-color);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.member-allocation[b-z3j4ydyx6q] {
    color: var(--text-muted);
}

.member-location[b-z3j4ydyx6q] {
    background: var(--warning-bg);
    color: var(--warning-color);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.member-location i[b-z3j4ydyx6q] {
    font-size: 0.7rem;
}

.member-view-mode[b-z3j4ydyx6q] {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.75rem;
}

.view-mode-dev[b-z3j4ydyx6q] {
    background: var(--success-bg);
    color: var(--success-color);
}

.view-mode-qa[b-z3j4ydyx6q] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.view-mode-all[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    color: var(--text-secondary);
}

.member-actions[b-z3j4ydyx6q] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-edit[b-z3j4ydyx6q] {
    color: var(--text-muted);
}

.btn-edit:hover:not(:disabled)[b-z3j4ydyx6q] {
    color: var(--primary-color);
    background: var(--primary-bg);
}

.form-control-static[b-z3j4ydyx6q] {
    padding: 0.5rem 0.75rem;
    background: var(--surface-secondary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ========================================
   PROJECT LIST
   ======================================== */
.project-list[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.project-list[b-z3j4ydyx6q]::-webkit-scrollbar {
    width: 6px;
}

.project-list[b-z3j4ydyx6q]::-webkit-scrollbar-track {
    background: var(--surface-secondary);
    border-radius: 3px;
}

.project-list[b-z3j4ydyx6q]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.project-list[b-z3j4ydyx6q]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.project-card[b-z3j4ydyx6q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    transition: all 0.2s;
}

.project-card:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xs);
}

.project-priority[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 2rem;
    padding-top: 0.25rem;
}

.project-priority .btn-move[b-z3j4ydyx6q] {
    padding: 0.125rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.project-priority .btn-move:hover:not(:disabled)[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    color: var(--primary-color);
}

.project-priority .btn-move:disabled[b-z3j4ydyx6q] {
    opacity: 0.3;
    cursor: not-allowed;
}

.priority-number[b-z3j4ydyx6q] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    min-width: 1.5rem;
    text-align: center;
}

.project-info[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.project-header[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-name[b-z3j4ydyx6q] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.project-code[b-z3j4ydyx6q] {
    font-size: 0.7rem;
    background: var(--hover-bg);
    color: var(--text-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 600;
    font-family: monospace;
}

.project-status[b-z3j4ydyx6q] {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-active[b-z3j4ydyx6q] {
    background: var(--success-bg);
    color: var(--success-color);
}

.status-onhold[b-z3j4ydyx6q] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.status-planning[b-z3j4ydyx6q] {
    background: var(--info-bg);
    color: var(--info-color);
}

.status-completed[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    color: var(--text-secondary);
}

.status-cancelled[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

.risk-indicator[b-z3j4ydyx6q] {
    font-size: 0.875rem;
    line-height: 1;
}

.risk-green[b-z3j4ydyx6q] {
    color: var(--success-color);
}

.risk-yellow[b-z3j4ydyx6q] {
    color: var(--warning-color);
}

.risk-red[b-z3j4ydyx6q] {
    color: var(--danger-color);
}

.project-role[b-z3j4ydyx6q] {
    font-size: 0.8rem;
    background: var(--warning-bg);
    color: var(--warning-color);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    width: fit-content;
}

.project-details[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.project-dates[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.project-dates i[b-z3j4ydyx6q] {
    font-size: 0.7rem;
}

.days-remaining[b-z3j4ydyx6q] {
    font-weight: 500;
}

.days-remaining.urgent[b-z3j4ydyx6q] {
    color: var(--danger-color);
    font-weight: 600;
}

.days-remaining.overdue[b-z3j4ydyx6q] {
    color: var(--danger-color);
    font-weight: 600;
}

.project-metrics[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-container[b-z3j4ydyx6q] {
    position: relative;
    width: 100px;
    height: 8px;
    background: var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-z3j4ydyx6q] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-z3j4ydyx6q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-shadow: 0 0 2px var(--card-bg);
}

.forecasted-date[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.forecasted-date i[b-z3j4ydyx6q] {
    font-size: 0.7rem;
    color: var(--primary-color);
}

/* ========================================
   TIMELINE TAB - MODERN DESIGN
   ======================================== */

/* Timeline tab content wrapper - fills available space with flex */
.timeline-tab-content[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.timeline-controls[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.timeline-range-label[b-z3j4ydyx6q] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.timeline-actions[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mode Toggle (Sequential/Parallel) */
.mode-toggle[b-z3j4ydyx6q] {
    display: flex;
    background: var(--surface-secondary);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.btn-mode[b-z3j4ydyx6q] {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-mode:hover:not(.active)[b-z3j4ydyx6q] {
    background: var(--hover-bg);
    color: var(--text-secondary);
}

.btn-mode.active[b-z3j4ydyx6q] {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow-xs);
}

.btn-mode i[b-z3j4ydyx6q] {
    font-size: 0.7rem;
}

.btn-refresh[b-z3j4ydyx6q] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.8rem;
    font-weight: 500;
}

.btn-refresh:hover:not(:disabled)[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Outer wrapper controls overall scrolling */
.timeline-outer-wrapper[b-z3j4ydyx6q] {
    flex: 1;
    min-height: 0;
    overflow: auto; /* Both horizontal and vertical */
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Custom scrollbar for timeline outer wrapper */
.timeline-outer-wrapper[b-z3j4ydyx6q]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.timeline-outer-wrapper[b-z3j4ydyx6q]::-webkit-scrollbar-track {
    background: var(--surface-secondary);
    border-radius: 5px;
}

.timeline-outer-wrapper[b-z3j4ydyx6q]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
    border: 2px solid var(--surface-secondary);
}

.timeline-outer-wrapper[b-z3j4ydyx6q]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.timeline-outer-wrapper[b-z3j4ydyx6q]::-webkit-scrollbar-corner {
    background: var(--surface-secondary);
}

.timeline-scroll-wrapper[b-z3j4ydyx6q] {
    /* Inner wrapper for content sizing */
    min-height: 0;
}

.timeline-container[b-z3j4ydyx6q] {
    background: var(--card-bg);
}

/* Timeline header - sticky at top when vertical scrolling */
.timeline-header[b-z3j4ydyx6q] {
    display: flex;
    background: var(--surface-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Resource label in header - sticky both top and left (corner cell) */
.timeline-resource-label[b-z3j4ydyx6q] {
    width: 200px;
    min-width: 200px;
    padding: 0.5rem 1rem;
    border-right: 1px solid var(--border-color);
    text-align: left;
    background: var(--surface-secondary);
    position: sticky;
    left: 0;
    z-index: 21; /* Above everything */
}

.timeline-months[b-z3j4ydyx6q] {
    display: flex;
    flex: 1;
}

.timeline-month[b-z3j4ydyx6q] {
    padding: 0.5rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: background-color 0.15s ease;
}

.timeline-month:hover[b-z3j4ydyx6q] {
    background: var(--primary-bg);
}

.timeline-month:last-child[b-z3j4ydyx6q] {
    border-right: none;
}

.timeline-row[b-z3j4ydyx6q] {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 40px;
    transition: background-color 0.15s ease;
}

.timeline-row:nth-child(even)[b-z3j4ydyx6q] {
    background: var(--row-stripe-bg);
}

.timeline-row:hover[b-z3j4ydyx6q] {
    background: var(--primary-bg);
}

.timeline-row:last-child[b-z3j4ydyx6q] {
    border-bottom: none;
}

/* Resource name column - sticky on left when horizontal scrolling */
.timeline-resource-name[b-z3j4ydyx6q] {
    width: 200px;
    min-width: 200px;
    padding: 0.4rem 1rem;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg);
    position: sticky;
    left: 0;
    z-index: 10;
}

.timeline-resource-name .resource-name[b-z3j4ydyx6q] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.resource-actions[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.timeline-resource-name .btn-icon[b-z3j4ydyx6q] {
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.35rem;
    border-radius: 6px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
}

.timeline-resource-name .btn-icon:hover[b-z3j4ydyx6q] {
    background: var(--primary-bg);
    color: var(--primary-color);
    transform: scale(1.1);
}

.timeline-row:hover .timeline-resource-name .btn-icon[b-z3j4ydyx6q] {
    opacity: 1;
}

.timeline-bars-container[b-z3j4ydyx6q] {
    flex: 1;
    position: relative;
    min-height: 48px;
    padding: 4px 0;
}

.timeline-grid[b-z3j4ydyx6q] {
    position: absolute;
    inset: 0;
    display: flex;
}

.timeline-lanes[b-z3j4ydyx6q] {
    position: absolute;
    inset: 0;
    padding: 0 2px;
}

.timeline-month-cell[b-z3j4ydyx6q] {
    border-right: 1px solid var(--border-subtle);
    transition: background-color 0.2s ease;
}

.timeline-month-cell:last-child[b-z3j4ydyx6q] {
    border-right: none;
}

.timeline-month-cell.over-allocated[b-z3j4ydyx6q] {
    background: linear-gradient(180deg, rgba(var(--danger-rgb), 0.12) 0%, rgba(var(--danger-rgb), 0.06) 100%);
    position: relative;
}

.timeline-month-cell.over-allocated[b-z3j4ydyx6q]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--utilization-bar-over);
}

/* Allocation Bar - Modern Pill Style with Project Color */
.allocation-bar[b-z3j4ydyx6q] {
    position: absolute;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: var(--allocation-bar-shadow);
    border: 1px solid var(--allocation-bar-border);
    /* Project color comes from inline style, this ensures good contrast */
}

.allocation-bar[b-z3j4ydyx6q]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--allocation-bar-overlay);
    pointer-events: none;
    z-index: 2;
    border-radius: 7px;
}

.allocation-bar:hover[b-z3j4ydyx6q] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--allocation-bar-hover-shadow);
    z-index: 10;
}

.allocation-bar:active[b-z3j4ydyx6q] {
    transform: translateY(-1px) scale(1.005);
}

/* Workstream segments within allocation bar */
.workstream-segments[b-z3j4ydyx6q] {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: 7px;
    overflow: hidden;
}

.workstream-segment[b-z3j4ydyx6q] {
    height: 100%;
    transition: all 0.2s ease;
    position: relative;
}

.workstream-segment[b-z3j4ydyx6q]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--segment-highlight-gradient);
    pointer-events: none;
}

.workstream-segment:not(:last-child)[b-z3j4ydyx6q] {
    border-right: 2px solid var(--segment-divider);
}

.allocation-bar:hover .workstream-segment[b-z3j4ydyx6q] {
    filter: brightness(1.05) saturate(1.1);
}

/* Allocation Label - Better readability */
.allocation-label[b-z3j4ydyx6q] {
    position: relative;
    z-index: 3;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-on-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--allocation-label-shadow);
    padding: 0 0.875rem;
    letter-spacing: 0.1px;
    line-height: 1.3;
}

/* Resize handles for allocation bars */
.resize-handle[b-z3j4ydyx6q] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14px;
    cursor: ew-resize;
    z-index: 4;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resize-handle[b-z3j4ydyx6q]::after {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--resize-handle-bg);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.resize-handle-left[b-z3j4ydyx6q] {
    left: 0;
    border-radius: 8px 0 0 8px;
    background: var(--resize-handle-left-gradient);
}

.resize-handle-right[b-z3j4ydyx6q] {
    right: 0;
    border-radius: 0 8px 8px 0;
    background: var(--resize-handle-right-gradient);
}

.allocation-bar:hover .resize-handle[b-z3j4ydyx6q] {
    opacity: 1;
}

.resize-handle:hover[b-z3j4ydyx6q] {
    background-color: var(--resize-handle-hover-bg);
}

.resize-handle:hover[b-z3j4ydyx6q]::after {
    background: var(--text-on-primary);
    height: 24px;
    width: 5px;
}

.allocation-bar.resizing[b-z3j4ydyx6q] {
    opacity: 0.9;
    box-shadow: var(--allocation-bar-resizing-shadow);
    z-index: 100;
}

/* Priority Badge - Shows sequence order in sequential mode */
.priority-badge[b-z3j4ydyx6q] {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--priority-badge-bg);
    color: var(--text-on-primary);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 5;
    text-shadow: none;
    letter-spacing: 0.3px;
}

/* Delay Indicator - Shows when project is delayed */
.delay-indicator[b-z3j4ydyx6q] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--danger-gradient);
    color: var(--text-on-primary);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 3px;
    text-shadow: var(--text-shadow-dark);
    box-shadow: var(--delay-indicator-shadow);
}

.delay-indicator i[b-z3j4ydyx6q] {
    font-size: 0.55rem;
}

/* Delayed allocation bar styling */
.allocation-bar.delayed[b-z3j4ydyx6q] {
    border: 2px solid rgba(var(--danger-rgb), 0.6) !important;
    animation: pulse-border-b-z3j4ydyx6q 2s ease-in-out infinite;
}

/* Deadline miss - more severe styling */
.allocation-bar.deadline-miss[b-z3j4ydyx6q] {
    border: 3px solid var(--danger-color) !important;
    animation: pulse-border-severe-b-z3j4ydyx6q 1.5s ease-in-out infinite;
}

@keyframes pulse-border-b-z3j4ydyx6q {
    0%, 100% {
        border-color: rgba(var(--danger-rgb), 0.6);
        box-shadow: var(--pulse-border-start);
    }
    50% {
        border-color: rgba(var(--danger-rgb), 0.9);
        box-shadow: var(--pulse-border-mid);
    }
}

@keyframes pulse-border-severe-b-z3j4ydyx6q {
    0%, 100% {
        border-color: var(--danger-color);
        box-shadow: var(--pulse-border-severe-start);
    }
    50% {
        border-color: var(--danger-hover);
        box-shadow: var(--pulse-border-severe-mid);
    }
}

/* Deadline miss delay indicator */
.delay-indicator.deadline-miss[b-z3j4ydyx6q] {
    background: var(--danger-severe-gradient);
    font-weight: 800;
}

/* Sequential mode row styling */
.timeline-row.sequential-mode .timeline-bars-container[b-z3j4ydyx6q] {
    min-height: 64px !important;
}

.timeline-row.sequential-mode .timeline-resource-name[b-z3j4ydyx6q] {
    min-height: 64px !important;
}

/* Adjust allocation label position when priority badge is present */
.sequential-mode .allocation-label[b-z3j4ydyx6q] {
    padding-left: 2rem;
}

/* Summary Row - Enhanced & Sticky at bottom */
.timeline-summary-row[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    border-top: 2px solid var(--border-color);
    position: sticky;
    bottom: 0;
    z-index: 15;
    min-height: 32px !important;
}

.timeline-summary-row .timeline-resource-name[b-z3j4ydyx6q] {
    font-weight: 700;
    background: var(--surface-secondary); /* Solid background for sticky positioning */
    min-height: 32px !important;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 0.4rem 1rem;
}

.timeline-summary-row .timeline-summary-cells[b-z3j4ydyx6q] {
    background: var(--surface-secondary); /* Solid background for sticky */
}

.timeline-summary-cells[b-z3j4ydyx6q] {
    flex: 1;
    display: flex;
    min-height: 32px;
}

.summary-cell[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-color);
}

.summary-cell:last-child[b-z3j4ydyx6q] {
    border-right: none;
}

.summary-value[b-z3j4ydyx6q] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    background: var(--card-bg);
    border-radius: 6px;
    box-shadow: var(--shadow-xs);
}

/* Timeline Legend - Modern Cards */
.timeline-legend[b-z3j4ydyx6q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-color);
}

.legend-title[b-z3j4ydyx6q] {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.25rem;
}

.legend-item[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    cursor: default;
}

.legend-item:hover[b-z3j4ydyx6q] {
    border-color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.legend-color[b-z3j4ydyx6q] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: var(--color-dot-shadow);
}

.workstream-legend[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    border-top: none;
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

.workstream-legend .legend-title[b-z3j4ydyx6q] {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.workstream-legend .legend-item[b-z3j4ydyx6q] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    background: var(--card-bg);
}

.workstream-legend .legend-color[b-z3j4ydyx6q] {
    width: 12px;
    height: 12px;
}

/* Timeline Empty & Loading States */
.timeline-container .empty-state[b-z3j4ydyx6q],
.timeline-container .loading-state[b-z3j4ydyx6q] {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--surface-secondary);
}

.timeline-container .empty-state i[b-z3j4ydyx6q],
.timeline-container .loading-state i[b-z3j4ydyx6q] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Button secondary small for timeline controls */
.btn-secondary.btn-sm[b-z3j4ydyx6q] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary.btn-sm:hover:not(:disabled)[b-z3j4ydyx6q] {
    background: var(--card-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.btn-secondary.btn-sm:disabled[b-z3j4ydyx6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete button in edit allocation dialog */
.btn-danger[b-z3j4ydyx6q] {
    background: var(--danger-gradient);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover:not(:disabled)[b-z3j4ydyx6q] {
    filter: brightness(0.95);
    box-shadow: var(--shadow-md);
}

.btn-danger:disabled[b-z3j4ydyx6q] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Form control static for read-only display in dialogs */
.form-control-static[b-z3j4ydyx6q] {
    padding: 0.5rem 0;
    font-weight: 500;
    color: var(--text-primary);
}

/* ========================================
   PROJECT IMPACT PANEL - MODERN DESIGN
   ======================================== */

.project-impact-panel[b-z3j4ydyx6q] {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-top: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.project-impact-panel.collapsed[b-z3j4ydyx6q] {
    margin-top: 0.5rem;
}

.impact-header[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface-secondary);
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.impact-header:hover[b-z3j4ydyx6q] {
    background: var(--hover-bg);
}

.project-impact-panel.collapsed .impact-header[b-z3j4ydyx6q] {
    border-bottom: none;
}

.impact-header h4[b-z3j4ydyx6q] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.impact-header h4 i[b-z3j4ydyx6q] {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.impact-header h4 i:first-child[b-z3j4ydyx6q] {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.impact-table[b-z3j4ydyx6q] {
    width: 100%;
}

.impact-table-header[b-z3j4ydyx6q] {
    display: flex;
    background: var(--surface-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.impact-table-row[b-z3j4ydyx6q] {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.15s ease;
}

.impact-table-row:nth-child(even)[b-z3j4ydyx6q] {
    background: var(--row-stripe-bg);
}

.impact-table-row:last-child[b-z3j4ydyx6q] {
    border-bottom: none;
}

.impact-table-row:hover[b-z3j4ydyx6q] {
    background: var(--primary-bg);
}

.impact-col[b-z3j4ydyx6q] {
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.col-project[b-z3j4ydyx6q] {
    flex: 2;
    min-width: 180px;
    gap: 0.625rem;
}

.col-date[b-z3j4ydyx6q] {
    flex: 1;
    min-width: 100px;
    color: var(--text-secondary);
    font-weight: 500;
}

.col-days[b-z3j4ydyx6q] {
    flex: 0.8;
    min-width: 80px;
    font-weight: 600;
}

.col-resources[b-z3j4ydyx6q] {
    flex: 0.6;
    min-width: 70px;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
}

.col-fte[b-z3j4ydyx6q] {
    flex: 0.5;
    min-width: 50px;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-color);
}

.col-hours[b-z3j4ydyx6q] {
    flex: 0.7;
    min-width: 70px;
    justify-content: flex-end;
    font-weight: 600;
    color: var(--text-secondary);
}

.col-status[b-z3j4ydyx6q] {
    flex: 1;
    min-width: 120px;
    justify-content: center;
}

.project-color-dot[b-z3j4ydyx6q] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: var(--color-dot-shadow);
}

.project-name[b-z3j4ydyx6q] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge[b-z3j4ydyx6q] {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.status-badge.status-good[b-z3j4ydyx6q] {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}

.status-badge.status-warning[b-z3j4ydyx6q] {
    background: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-border);
}

.status-badge.status-danger[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-border);
}

.text-danger[b-z3j4ydyx6q] {
    color: var(--danger-color) !important;
    font-weight: 700;
}

.text-warning[b-z3j4ydyx6q] {
    color: var(--warning-color) !important;
    font-weight: 700;
}

.text-muted[b-z3j4ydyx6q] {
    color: var(--text-muted) !important;
}

/* ========================================
   PROJECT IMPACT TAB
   ======================================== */

.impact-tab-content[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
}

.impact-tab-content .empty-state[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
}

.impact-tab-content .empty-state i[b-z3j4ydyx6q] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ========================================
   PROJECT IMPACT GANTT VISUALIZATION
   ======================================== */

.impact-gantt[b-z3j4ydyx6q] {
    width: 100%;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
}

.impact-gantt-full[b-z3j4ydyx6q] {
    /* Full width variant */
}

/* Gantt Header & Row - use flex for sticky project column + scrollable timeline */
.gantt-header[b-z3j4ydyx6q],
.gantt-row[b-z3j4ydyx6q] {
    display: flex;
    min-width: max-content;
    min-height: 40px;
}

.gantt-header[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 3;
}

.gantt-row[b-z3j4ydyx6q] {
    border-bottom: 1px solid var(--border-subtle);
}

.gantt-row:nth-child(even)[b-z3j4ydyx6q] {
    background: var(--row-stripe-bg);
}

.gantt-row:hover[b-z3j4ydyx6q] {
    background: var(--primary-bg);
}

.gantt-col[b-z3j4ydyx6q] {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

/* Project column - sticky left */
.gantt-col.col-project[b-z3j4ydyx6q] {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    z-index: 2;
    gap: 0.5rem;
    border-right: 1px solid var(--border-color);
    background: var(--card-bg);
}

.gantt-header .gantt-col.col-project[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.gantt-row:nth-child(even) .gantt-col.col-project[b-z3j4ydyx6q] {
    background: var(--row-stripe-bg);
}

.gantt-row:hover .gantt-col.col-project[b-z3j4ydyx6q] {
    background: var(--primary-bg);
}

.gantt-col.col-project .project-name[b-z3j4ydyx6q] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timeline column - fixed width for horizontal scroll */
.gantt-col.col-timeline[b-z3j4ydyx6q] {
    width: 800px;
    min-width: 800px;
    flex-shrink: 0;
    padding: 0.5rem 0;
    position: relative;
}

/* Status dot */
.status-dot[b-z3j4ydyx6q] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: help;
    flex-shrink: 0;
}

.status-dot.status-green[b-z3j4ydyx6q] {
    background: var(--success-color);
    box-shadow: 0 0 0 2px var(--success-bg);
}

.status-dot.status-yellow[b-z3j4ydyx6q] {
    background: var(--warning-color);
    box-shadow: 0 0 0 2px var(--warning-bg);
}

.status-dot.status-red[b-z3j4ydyx6q] {
    background: var(--danger-color);
    box-shadow: 0 0 0 2px var(--danger-bg);
}

.status-dot.status-gray[b-z3j4ydyx6q] {
    background: var(--text-muted);
    box-shadow: 0 0 0 2px var(--hover-bg);
}

/* Gantt Timeline Header */
.gantt-timeline-header[b-z3j4ydyx6q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.gantt-scale[b-z3j4ydyx6q] {
    position: relative;
    width: 100%;
    height: 100%;
}

.gantt-scale-marker[b-z3j4ydyx6q] {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.gantt-scale-label[b-z3j4ydyx6q] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Month Gridlines */
.gantt-gridline[b-z3j4ydyx6q] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    z-index: 1;
}

/* Gantt Bar Container */
.gantt-bar-container[b-z3j4ydyx6q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    background: var(--surface-secondary);
    border-radius: 4px;
    overflow: visible;
}

/* Projected Work Bar */
.gantt-bar[b-z3j4ydyx6q] {
    position: absolute;
    top: 4px;
    height: 20px;
    border-radius: 4px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    z-index: 3;
    cursor: pointer;
}

.gantt-bar:hover[b-z3j4ydyx6q] {
    transform: scaleY(1.15);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.gantt-bar.status-green[b-z3j4ydyx6q] {
    border: 2px solid rgba(var(--success-rgb), 0.6);
}

.gantt-bar.status-yellow[b-z3j4ydyx6q] {
    border: 2px solid rgba(var(--warning-rgb), 0.6);
}

.gantt-bar.status-red[b-z3j4ydyx6q] {
    border: 2px solid rgba(var(--danger-rgb), 0.6);
}

.gantt-bar-empty[b-z3j4ydyx6q] {
    position: absolute;
    top: 8px;
    left: 4px;
    right: 4px;
    height: 12px;
    background: repeating-linear-gradient(
        -45deg,
        var(--border-color),
        var(--border-color) 4px,
        var(--surface-secondary) 4px,
        var(--surface-secondary) 8px
    );
    border-radius: 3px;
    opacity: 0.6;
}


/* Deadline Marker */
.gantt-deadline-marker[b-z3j4ydyx6q] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--text-muted);
    z-index: 4;
    transform: translateX(-50%);
}

.gantt-deadline-marker[b-z3j4ydyx6q]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--text-muted);
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    box-shadow: var(--shadow-xs);
}

.gantt-deadline-marker.overdue[b-z3j4ydyx6q] {
    background: var(--danger-color);
}

.gantt-deadline-marker.overdue[b-z3j4ydyx6q]::before {
    background: var(--danger-color);
}

/* Variance Badge */
.variance-badge[b-z3j4ydyx6q] {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.variance-badge.status-green[b-z3j4ydyx6q] {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}

.variance-badge.status-yellow[b-z3j4ydyx6q] {
    background: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-border);
}

.variance-badge.status-red[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-border);
}

.variance-badge.status-gray[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Status Badge Colors for Gantt */
.status-badge.status-green[b-z3j4ydyx6q] {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}

.status-badge.status-yellow[b-z3j4ydyx6q] {
    background: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-border);
}

.status-badge.status-red[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-border);
}

.status-badge.status-gray[b-z3j4ydyx6q] {
    background: var(--surface-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* ========================================
   TIME-OFF BLACKOUT MONTHS
   ======================================== */
.blackout-grid[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.year-row[b-z3j4ydyx6q] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.year-label[b-z3j4ydyx6q] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 60px;
    font-size: 0.95rem;
}

.months-grid[b-z3j4ydyx6q] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
    flex: 1;
}

.month-checkbox[b-z3j4ydyx6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    background: var(--surface-secondary);
    border: 2px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.month-checkbox:hover:not(.past)[b-z3j4ydyx6q] {
    background: var(--primary-bg);
    border-color: var(--primary-color);
}

.month-checkbox.checked[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    border-color: var(--danger-color);
}

.month-checkbox.checked:hover:not(.past)[b-z3j4ydyx6q] {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.month-checkbox.past[b-z3j4ydyx6q] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--hover-bg);
}

.month-checkbox input[type="checkbox"][b-z3j4ydyx6q] {
    display: none;
}

.month-name[b-z3j4ydyx6q] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.month-checkbox.checked .month-name[b-z3j4ydyx6q] {
    color: var(--danger-color);
}

.month-checkbox.checked .month-name[b-z3j4ydyx6q]::before {
    content: "🚫 ";
}

.blackout-summary[b-z3j4ydyx6q] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    color: var(--warning-color);
    font-size: 0.9rem;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    /* Main container adjustments */
    .teams-page[b-z3j4ydyx6q] {
        padding: 0.5rem;
        height: calc(100vh - 101px); /* Account for mobile header */
        max-height: calc(100vh - 101px);
    }

    /* Compact header mobile */
    .compact-header[b-z3j4ydyx6q] {
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .header-icon[b-z3j4ydyx6q] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .header-title[b-z3j4ydyx6q] {
        font-size: 1.1rem;
    }

    /* Switch to stacked layout on mobile */
    .teams-container[b-z3j4ydyx6q] {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Teams list - collapsible on mobile */
    .teams-list-panel[b-z3j4ydyx6q] {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 35vh;
        flex-shrink: 0;
        border-radius: 10px;
    }

    .teams-list-panel.collapsed[b-z3j4ydyx6q] {
        max-height: 44px;
        overflow: hidden;
    }

    .teams-list-panel.collapsed .panel-body[b-z3j4ydyx6q] {
        display: none;
    }

    /* Details panel fills remaining space */
    .team-details-panel[b-z3j4ydyx6q] {
        flex: 1;
        min-height: 0;
        border-radius: 10px;
    }

    /* Panel headers - compact */
    .panel-header[b-z3j4ydyx6q] {
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }

    .panel-header h2[b-z3j4ydyx6q] {
        font-size: 0.8125rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .panel-header h2 i[b-z3j4ydyx6q] {
        font-size: 0.875rem;
    }

    /* Hide collapse/expand buttons on mobile */
    .btn-collapse[b-z3j4ydyx6q],
    .btn-expand[b-z3j4ydyx6q] {
        display: none !important;
    }

    /* Always show panel body on mobile (no collapse) */
    .teams-list-panel.collapsed[b-z3j4ydyx6q] {
        max-height: none;
        width: 100% !important;
        min-width: 100% !important;
    }

    .teams-list-panel.collapsed .panel-body[b-z3j4ydyx6q] {
        display: block;
    }

    .teams-list-panel.collapsed .panel-header[b-z3j4ydyx6q] {
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
    }

    .panel-body[b-z3j4ydyx6q] {
        padding: 0.5rem;
    }

    /* ===== Hide button text on mobile ===== */
    .btn-text[b-z3j4ydyx6q] {
        display: none;
    }

    .btn-add-team[b-z3j4ydyx6q],
    .btn-secondary[b-z3j4ydyx6q],
    .btn-tree-control[b-z3j4ydyx6q],
    .btn-export[b-z3j4ydyx6q] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
        min-height: 36px;
    }

    .panel-header-actions[b-z3j4ydyx6q] {
        gap: 0.375rem;
    }

    /* ===== Team Tabs - Icon Only ===== */
    .team-tabs[b-z3j4ydyx6q] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.5rem;
        gap: 0.25rem;
    }

    .team-tabs[b-z3j4ydyx6q]::-webkit-scrollbar {
        display: none;
    }

    .tab-button[b-z3j4ydyx6q] {
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Hide tab label text on mobile */
    .tab-button .tab-label[b-z3j4ydyx6q] {
        display: none;
    }

    .tab-button .tab-count[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
        min-width: 18px;
    }

    /* ===== Tab Header Actions ===== */
    .tab-header[b-z3j4ydyx6q] {
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0.5rem;
    }

    .tab-header h4[b-z3j4ydyx6q] {
        font-size: 0.875rem;
        width: 100%;
    }

    .tab-header p.text-muted[b-z3j4ydyx6q] {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    /* ===== Area Path Controls ===== */
    .area-path-controls[b-z3j4ydyx6q] {
        gap: 0.375rem;
        flex-wrap: wrap;
    }

    .selection-info[b-z3j4ydyx6q] {
        font-size: 0.75rem;
    }

    .area-path-tree-container[b-z3j4ydyx6q] {
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .area-path-actions[b-z3j4ydyx6q] {
        padding: 0.5rem;
    }

    .area-path-actions .btn-primary[b-z3j4ydyx6q] {
        width: 100%;
        font-size: 0.8125rem;
        padding: 0.5rem;
    }

    /* ===== Team List Items ===== */
    .team-item[b-z3j4ydyx6q],
    .team-list-item[b-z3j4ydyx6q] {
        padding: 0.625rem 0.5rem;
        min-height: 48px;
        margin-bottom: 0.25rem;
    }

    .team-info[b-z3j4ydyx6q] {
        gap: 0.25rem;
    }

    .team-name[b-z3j4ydyx6q] {
        font-size: 0.8125rem;
    }

    .team-meta[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
        gap: 0.5rem;
    }

    .team-stat[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
    }

    .team-actions[b-z3j4ydyx6q] {
        gap: 0.25rem;
    }

    .team-actions .btn-icon[b-z3j4ydyx6q] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .team-avatar[b-z3j4ydyx6q] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .team-member-count[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
    }

    /* Search input */
    .teams-search[b-z3j4ydyx6q] {
        min-height: 40px;
        font-size: 0.875rem;
    }

    /* Team details content */
    .team-header[b-z3j4ydyx6q] {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .team-header-info[b-z3j4ydyx6q] {
        width: 100%;
    }

    .team-header-actions[b-z3j4ydyx6q] {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .team-header-actions .btn[b-z3j4ydyx6q] {
        flex: 1;
        min-width: 80px;
        min-height: 36px;
        justify-content: center;
        font-size: 0.75rem;
    }

    /* ===== Project Cards - Compact ===== */
    .project-list[b-z3j4ydyx6q] {
        gap: 0.375rem;
    }

    .project-card[b-z3j4ydyx6q] {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .project-priority[b-z3j4ydyx6q] {
        min-width: 28px;
    }

    .priority-number[b-z3j4ydyx6q] {
        font-size: 0.75rem;
        width: 20px;
        height: 20px;
    }

    .btn-move[b-z3j4ydyx6q] {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }

    .project-info[b-z3j4ydyx6q] {
        gap: 0.25rem;
    }

    .project-header[b-z3j4ydyx6q] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .project-name[b-z3j4ydyx6q] {
        font-size: 0.8125rem;
    }

    .project-code[b-z3j4ydyx6q],
    .project-status[b-z3j4ydyx6q],
    .risk-indicator[b-z3j4ydyx6q] {
        font-size: 0.625rem;
        padding: 0.125rem 0.25rem;
    }

    .project-role[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
    }

    .project-details[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .project-dates[b-z3j4ydyx6q],
    .days-remaining[b-z3j4ydyx6q] {
        font-size: 0.625rem;
    }

    .project-metrics[b-z3j4ydyx6q] {
        gap: 0.375rem;
    }

    .progress-container[b-z3j4ydyx6q] {
        height: 14px;
        min-width: 60px;
    }

    .progress-text[b-z3j4ydyx6q] {
        font-size: 0.625rem;
    }

    .forecasted-date[b-z3j4ydyx6q] {
        font-size: 0.625rem;
    }

    /* ===== Member List - Compact ===== */
    .member-list[b-z3j4ydyx6q] {
        gap: 0.375rem;
    }

    .member-item[b-z3j4ydyx6q] {
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .member-info[b-z3j4ydyx6q] {
        gap: 0.125rem;
    }

    .member-name[b-z3j4ydyx6q] {
        font-size: 0.8125rem;
    }

    .member-details[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .member-role[b-z3j4ydyx6q],
    .member-allocation[b-z3j4ydyx6q],
    .member-view-mode[b-z3j4ydyx6q],
    .member-location[b-z3j4ydyx6q] {
        font-size: 0.625rem;
        padding: 0.125rem 0.25rem;
    }

    .member-actions[b-z3j4ydyx6q] {
        gap: 0.25rem;
    }

    .member-actions .btn-icon[b-z3j4ydyx6q] {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    /* Member cards grid */
    .members-grid[b-z3j4ydyx6q] {
        grid-template-columns: 1fr !important;
        gap: 0.375rem;
    }

    .member-card[b-z3j4ydyx6q] {
        padding: 0.5rem;
    }

    .member-avatar[b-z3j4ydyx6q] {
        width: 36px;
        height: 36px;
    }

    /* Statistics cards */
    .stats-grid[b-z3j4ydyx6q] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.375rem;
    }

    .stat-card[b-z3j4ydyx6q] {
        padding: 0.5rem;
    }

    .stat-value[b-z3j4ydyx6q] {
        font-size: 1.1rem;
    }

    .stat-label[b-z3j4ydyx6q] {
        font-size: 0.625rem;
    }

    /* Sprint cards */
    .sprint-card[b-z3j4ydyx6q] {
        padding: 0.5rem;
    }

    .sprint-header[b-z3j4ydyx6q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .sprint-name[b-z3j4ydyx6q] {
        font-size: 0.875rem;
    }

    .sprint-dates[b-z3j4ydyx6q] {
        font-size: 0.6875rem;
    }

    /* Progress bars */
    .progress-bar-container[b-z3j4ydyx6q] {
        height: 5px;
    }

    /* ===== Empty State - Compact ===== */
    .empty-state[b-z3j4ydyx6q] {
        padding: 1rem;
    }

    .empty-state i[b-z3j4ydyx6q] {
        font-size: 2rem;
    }

    .empty-state p[b-z3j4ydyx6q] {
        font-size: 0.8125rem;
    }

    .empty-state .btn-primary[b-z3j4ydyx6q] {
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
    }

    /* ===== No Selection State ===== */
    .no-selection-state[b-z3j4ydyx6q] {
        padding: 1rem;
    }

    .no-selection-state i[b-z3j4ydyx6q] {
        font-size: 2rem;
    }

    .no-selection-state p[b-z3j4ydyx6q] {
        font-size: 0.875rem;
    }

    /* Modal adjustments */
    .team-modal .modal-dialog[b-z3j4ydyx6q],
    .dialog-backdrop .dialog[b-z3j4ydyx6q] {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
    }

    .team-modal .modal-content[b-z3j4ydyx6q],
    .dialog-backdrop .dialog[b-z3j4ydyx6q] {
        height: 100%;
        border-radius: 0;
    }

    .team-modal .modal-body[b-z3j4ydyx6q],
    .dialog-body[b-z3j4ydyx6q] {
        padding: 0.75rem;
    }

    .dialog-header[b-z3j4ydyx6q] {
        padding: 0.625rem 0.75rem;
    }

    .dialog-header h3[b-z3j4ydyx6q] {
        font-size: 1rem;
    }

    .dialog-footer[b-z3j4ydyx6q] {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .dialog-footer .btn[b-z3j4ydyx6q] {
        flex: 1;
        font-size: 0.8125rem;
        padding: 0.5rem;
    }

    /* Calendar/blackout months grid */
    .blackout-grid[b-z3j4ydyx6q] {
        gap: 0.75rem;
    }

    .months-grid[b-z3j4ydyx6q] {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.25rem;
    }

    .month-checkbox[b-z3j4ydyx6q] {
        padding: 0.25rem 0.125rem;
    }

    .month-name[b-z3j4ydyx6q] {
        font-size: 0.625rem;
    }

    .year-row[b-z3j4ydyx6q] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    .year-label[b-z3j4ydyx6q] {
        text-align: center;
        font-size: 0.8125rem;
    }

    .blackout-summary[b-z3j4ydyx6q] {
        font-size: 0.75rem;
        padding: 0.5rem;
    }

    /* Capacity table */
    .capacity-table[b-z3j4ydyx6q] {
        font-size: 0.75rem;
    }

    .capacity-table th[b-z3j4ydyx6q],
    .capacity-table td[b-z3j4ydyx6q] {
        padding: 0.375rem 0.25rem;
    }

    /* Form fields */
    .form-group[b-z3j4ydyx6q] {
        margin-bottom: 0.625rem;
    }

    .form-group label[b-z3j4ydyx6q] {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .form-control[b-z3j4ydyx6q],
    .form-select[b-z3j4ydyx6q] {
        min-height: 40px;
        font-size: 0.875rem;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .teams-list-panel[b-z3j4ydyx6q] {
        max-height: 30vh;
    }

    .stats-grid[b-z3j4ydyx6q] {
        grid-template-columns: 1fr !important;
    }

    .months-grid[b-z3j4ydyx6q] {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-header-actions .btn[b-z3j4ydyx6q] {
        min-width: 70px;
        font-size: 0.6875rem;
    }

    .tab-button[b-z3j4ydyx6q] {
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }

    .tab-button .tab-count[b-z3j4ydyx6q] {
        font-size: 0.625rem;
        padding: 0.0625rem 0.25rem;
    }

    .project-card[b-z3j4ydyx6q] {
        padding: 0.375rem;
    }

    .member-item[b-z3j4ydyx6q] {
        padding: 0.375rem;
    }
}
/* /Pages/WorkItems.razor.rz.scp.css */
/* ========================================
   WORK ITEMS SEARCH - Modern Design
   Inspired by Property Search
   ======================================== */

/* Main Container */
.work-items-modern[b-jx5w9xuvuj] {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========================================
   HERO HEADER SECTION
   ======================================== */
.search-hero[b-jx5w9xuvuj] {
    position: relative;
    background: var(--page-header-gradient);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-primary-lg);
}

.hero-background-pattern[b-jx5w9xuvuj] {
    position: absolute;
    inset: 0;
    background: var(--hero-pattern-bg);
    animation: patternShift-b-jx5w9xuvuj 20s ease-in-out infinite;
}

@keyframes patternShift-b-jx5w9xuvuj {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-10px, -10px) scale(1.05); }
}

.hero-content[b-jx5w9xuvuj] {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hero-icon-wrapper[b-jx5w9xuvuj] {
    position: relative;
    animation: float-b-jx5w9xuvuj 3s ease-in-out infinite;
}

@keyframes float-b-jx5w9xuvuj {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-icon[b-jx5w9xuvuj] {
    width: 50px;
    height: 50px;
    background: var(--header-icon-bg);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-on-primary);
    border: 3px solid var(--header-border-light);
    box-shadow: var(--shadow-lg);
}

.hero-title[b-jx5w9xuvuj] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-on-primary);
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: var(--text-shadow-dark);
}

.hero-subtitle[b-jx5w9xuvuj] {
    font-size: 0.9rem;
    color: var(--text-on-primary-muted);
    margin: 0;
    max-width: 600px;
    line-height: 1.4;
    font-weight: 400;
}

/* ========================================
   SEARCH CARD
   ======================================== */
.search-card[b-jx5w9xuvuj] {
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.search-card:hover[b-jx5w9xuvuj] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.search-card-header[b-jx5w9xuvuj] {
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-card-header i[b-jx5w9xuvuj] {
    font-size: 1.25rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    line-height: 1;
}

.search-card-header h5[b-jx5w9xuvuj] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25rem;
    display: flex;
    align-items: center;
}

.search-card-body[b-jx5w9xuvuj] {
    padding: 1.5rem;
}

/* ========================================
   SEARCH CONTROLS BAR
   ======================================== */
.search-controls[b-jx5w9xuvuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-top: 1rem;
}

.results-per-page[b-jx5w9xuvuj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-label[b-jx5w9xuvuj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.control-label i[b-jx5w9xuvuj] {
    display: flex;
    align-items: center;
    line-height: 1;
}

.page-size-select[b-jx5w9xuvuj] {
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-size-select:hover[b-jx5w9xuvuj] {
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-md);
}

.page-size-select:focus[b-jx5w9xuvuj] {
    outline: none;
    border-color: var(--primary-hover);
    box-shadow: var(--focus-ring);
}

.search-actions[b-jx5w9xuvuj] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-jx5w9xuvuj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.action-btn[b-jx5w9xuvuj]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--header-border-light);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.action-btn:hover[b-jx5w9xuvuj]::before {
    width: 300px;
    height: 300px;
}

.action-btn i[b-jx5w9xuvuj],
.action-btn span[b-jx5w9xuvuj] {
    position: relative;
    z-index: 1;
}

.btn-clear[b-jx5w9xuvuj] {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

.btn-clear:hover[b-jx5w9xuvuj] {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-search[b-jx5w9xuvuj] {
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-primary);
}

.btn-search:hover:not(:disabled)[b-jx5w9xuvuj] {
    background: var(--primary-gradient-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

.btn-search:disabled[b-jx5w9xuvuj] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   RESULTS PANEL
   ======================================== */
.results-panel[b-jx5w9xuvuj] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
    overflow: hidden;
}

.results-panel-header[b-jx5w9xuvuj] {
    padding: 1.25rem 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.results-title[b-jx5w9xuvuj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.results-title i[b-jx5w9xuvuj] {
    font-size: 1.25rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    line-height: 1;
}

.results-title h5[b-jx5w9xuvuj] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25rem;
    display: flex;
    align-items: center;
}

.btn-export[b-jx5w9xuvuj] {
    background: var(--card-bg);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export:hover[b-jx5w9xuvuj] {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

.btn-export:disabled[b-jx5w9xuvuj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.results-panel-body[b-jx5w9xuvuj] {
    padding: 1.5rem;
}

/* ========================================
   DATA TABLE STYLING
   ======================================== */
.modern-table[b-jx5w9xuvuj] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.modern-table thead th[b-jx5w9xuvuj] {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--table-header-bg);
    color: var(--table-header-text);
    text-align: left;
    border: none;
    white-space: nowrap;
    line-height: 1.2;
}

.modern-table thead th:first-child[b-jx5w9xuvuj] {
    border-top-left-radius: 8px;
}

.modern-table thead th:last-child[b-jx5w9xuvuj] {
    border-top-right-radius: 8px;
}

.modern-table tbody tr[b-jx5w9xuvuj] {
    transition: all 0.2s ease;
}

.modern-table tbody tr:nth-child(odd)[b-jx5w9xuvuj] {
    background-color: var(--card-bg);
}

.modern-table tbody tr:nth-child(even)[b-jx5w9xuvuj] {
    background-color: var(--bg-tertiary);
}

.modern-table tbody tr:hover[b-jx5w9xuvuj] {
    background: var(--table-row-hover) !important;
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 var(--primary-color);
    cursor: pointer;
}

.modern-table tbody td[b-jx5w9xuvuj] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.modern-table tbody tr:last-child td:first-child[b-jx5w9xuvuj] {
    border-bottom-left-radius: 8px;
}

.modern-table tbody tr:last-child td:last-child[b-jx5w9xuvuj] {
    border-bottom-right-radius: 8px;
}

/* ========================================
   BADGES
   ======================================== */
.type-badge[b-jx5w9xuvuj], .state-badge[b-jx5w9xuvuj] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

/* Type Badge Colors - Use semantic work item type variables */
.type-badge.bg-primary[b-jx5w9xuvuj] {
    background: var(--pbi-bg) !important;
    color: var(--pbi-color) !important;
}

.type-badge.bg-danger[b-jx5w9xuvuj] {
    background: var(--epic-bg) !important;
    color: var(--epic-color) !important;
}

.type-badge.bg-info[b-jx5w9xuvuj] {
    background: var(--feature-bg) !important;
    color: var(--feature-color) !important;
}

.type-badge.bg-success[b-jx5w9xuvuj] {
    background: var(--task-bg) !important;
    color: var(--task-color) !important;
}

.type-badge.bg-warning[b-jx5w9xuvuj] {
    background: var(--warning-bg) !important;
    color: var(--warning-color) !important;
}

.type-badge.bg-secondary[b-jx5w9xuvuj] {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

/* State Badge Colors */
.state-badge.bg-info[b-jx5w9xuvuj] {
    background: var(--info-bg) !important;
    color: var(--info-color) !important;
    border: 1px solid var(--info-color) !important;
}

.state-badge.bg-primary[b-jx5w9xuvuj] {
    background: var(--pbi-bg) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.state-badge.bg-success[b-jx5w9xuvuj] {
    background: var(--success-bg) !important;
    color: var(--success-color) !important;
    border: 1px solid var(--success-color) !important;
}

.state-badge.bg-secondary[b-jx5w9xuvuj] {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.state-badge.bg-dark[b-jx5w9xuvuj] {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination-container[b-jx5w9xuvuj] {
    padding: 0.75rem 1rem;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info[b-jx5w9xuvuj] {
    font-size: 0.875rem;
    color: var(--primary-color);
    font-weight: 600;
}

.pagination[b-jx5w9xuvuj] {
    margin: 0;
    padding: 0;
}

.page-link[b-jx5w9xuvuj] {
    color: var(--primary-color);
    border-color: var(--border-color);
    background: var(--card-bg);
    font-weight: 600;
}

.page-link:hover[b-jx5w9xuvuj] {
    background-color: var(--info-bg);
    border-color: var(--primary-color);
    color: var(--primary-hover);
}

.page-item.disabled .page-link[b-jx5w9xuvuj] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.page-item.active .page-link[b-jx5w9xuvuj] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-jx5w9xuvuj] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state i[b-jx5w9xuvuj] {
    font-size: 4rem;
    opacity: 0.3;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.empty-state p[b-jx5w9xuvuj] {
    font-size: 1.125rem;
    margin-top: 1rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media (max-width: 767.98px) {
    .work-items-modern[b-jx5w9xuvuj] {
        padding: 0 0.5rem;
    }

    /* ===== Hide text labels on mobile ===== */
    .btn-text[b-jx5w9xuvuj] {
        display: none;
    }

    /* Hero section - compact */
    .search-hero[b-jx5w9xuvuj] {
        padding: 0.75rem;
        border-radius: 10px;
        margin-bottom: 0.5rem;
    }

    .hero-icon-wrapper[b-jx5w9xuvuj] {
        margin-bottom: 0.375rem;
    }

    .hero-icon[b-jx5w9xuvuj] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .hero-title[b-jx5w9xuvuj] {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    .hero-subtitle[b-jx5w9xuvuj] {
        font-size: 0.75rem;
        display: none;
    }

    /* Search card */
    .search-card[b-jx5w9xuvuj] {
        margin-bottom: 0.5rem;
        border-radius: 10px;
    }

    .search-card-header[b-jx5w9xuvuj] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .search-card-header h5[b-jx5w9xuvuj] {
        font-size: 0.875rem;
    }

    .search-card-body[b-jx5w9xuvuj] {
        padding: 0.75rem;
    }

    /* Form filters - 2-column grid */
    .search-card-body .row[b-jx5w9xuvuj] {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }

    .search-card-body .col-md-3[b-jx5w9xuvuj] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .search-card-body .form-label[b-jx5w9xuvuj] {
        font-size: 0.6875rem;
        margin-bottom: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        color: var(--text-muted);
    }

    .search-card-body .form-select[b-jx5w9xuvuj],
    .search-card-body .form-control[b-jx5w9xuvuj] {
        min-height: 36px;
        font-size: 0.8125rem;
        padding: 0.375rem 0.5rem;
    }

    /* Search controls bar */
    .search-controls[b-jx5w9xuvuj] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--border-color);
    }

    .results-per-page[b-jx5w9xuvuj] {
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    .page-size-select[b-jx5w9xuvuj] {
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .control-label[b-jx5w9xuvuj] {
        font-size: 0.75rem;
    }

    .search-actions[b-jx5w9xuvuj] {
        display: flex;
        gap: 0.375rem;
    }

    .action-btn[b-jx5w9xuvuj] {
        min-height: 36px;
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    .action-btn span[b-jx5w9xuvuj] {
        display: none;
    }

    .action-btn i[b-jx5w9xuvuj] {
        margin-right: 0;
    }

    /* Results panel */
    .results-panel[b-jx5w9xuvuj] {
        border-radius: 10px;
    }

    .results-panel-header[b-jx5w9xuvuj] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        padding: 0.625rem 0.75rem;
    }

    .results-title[b-jx5w9xuvuj] {
        gap: 0.375rem;
    }

    .results-title h5[b-jx5w9xuvuj] {
        font-size: 0.9375rem;
    }

    .results-info[b-jx5w9xuvuj] {
        font-size: 0.75rem;
    }

    .header-actions[b-jx5w9xuvuj] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        justify-content: flex-start;
    }

    .header-actions .btn[b-jx5w9xuvuj] {
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Pagination - compact */
    .pagination-container[b-jx5w9xuvuj] {
        padding: 0.5rem 0.75rem;
    }

    .pagination[b-jx5w9xuvuj] {
        gap: 0.125rem;
    }

    .pagination .page-link[b-jx5w9xuvuj] {
        min-width: 36px;
        min-height: 36px;
        padding: 0.375rem;
        font-size: 0.75rem;
    }

    /* Table container - horizontal scroll */
    .table-container[b-jx5w9xuvuj] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
        scrollbar-width: thin;
    }

    .table-container[b-jx5w9xuvuj]::-webkit-scrollbar {
        height: 6px;
    }

    .table-container[b-jx5w9xuvuj]::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }

    .modern-table[b-jx5w9xuvuj] {
        font-size: 0.75rem;
        min-width: 550px;
    }

    .modern-table thead th[b-jx5w9xuvuj] {
        padding: 0.5rem 0.375rem;
        font-size: 0.6875rem;
        white-space: nowrap;
    }

    .modern-table tbody td[b-jx5w9xuvuj] {
        padding: 0.5rem 0.375rem;
    }

    /* Work item titles - truncate */
    .work-item-title[b-jx5w9xuvuj] {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* State badges */
    .state-badge[b-jx5w9xuvuj] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* Type badges */
    .type-badge[b-jx5w9xuvuj] {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* Priority indicator */
    .priority-indicator[b-jx5w9xuvuj] {
        width: 18px;
        height: 18px;
        font-size: 0.6875rem;
    }

    /* Empty state */
    .empty-state[b-jx5w9xuvuj] {
        padding: 1.5rem 1rem;
    }

    .empty-state i[b-jx5w9xuvuj] {
        font-size: 2rem;
    }

    .empty-state h5[b-jx5w9xuvuj] {
        font-size: 1rem;
    }

    .empty-state p[b-jx5w9xuvuj] {
        font-size: 0.8125rem;
    }

    /* Detail panel - full screen */
    .detail-panel[b-jx5w9xuvuj] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        border-radius: 0;
    }

    .detail-panel-header[b-jx5w9xuvuj] {
        padding: 0.75rem;
    }

    .detail-panel-body[b-jx5w9xuvuj] {
        padding: 0.75rem;
    }

    /* Alert */
    .alert[b-jx5w9xuvuj] {
        font-size: 0.8125rem;
        padding: 0.625rem 0.75rem;
        border-radius: 8px;
    }
}

/* Extra small screens */
@media (max-width: 374px) {
    .work-item-title[b-jx5w9xuvuj] {
        max-width: 150px;
    }

    .header-actions .btn[b-jx5w9xuvuj] {
        min-width: 80px;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
}
/* /Shared/AccessDenied.razor.rz.scp.css */
/* ========================================
   ACCESS DENIED PAGE STYLES
   ======================================== */

.access-denied-page[b-l34ed2svrd] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    padding: 1rem;
}

.access-denied-container[b-l34ed2svrd] {
    width: 100%;
    max-width: 480px;
}

.access-denied-card[b-l34ed2svrd] {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    text-align: center;
}

.access-denied-icon[b-l34ed2svrd] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--warning-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.access-denied-icon .oi[b-l34ed2svrd] {
    font-size: 2.5rem;
    color: var(--warning-text-dark);
}

.access-denied-card h1[b-l34ed2svrd] {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.access-denied-message[b-l34ed2svrd] {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.access-denied-actions[b-l34ed2svrd] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-home[b-l34ed2svrd],
.btn-signout[b-l34ed2svrd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-home[b-l34ed2svrd] {
    background: var(--primary-color);
    color: var(--text-on-primary);
}

.btn-home:hover[b-l34ed2svrd] {
    background: var(--primary-hover);
    color: var(--text-on-primary);
    text-decoration: none;
}

.btn-signout[b-l34ed2svrd] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-signout:hover[b-l34ed2svrd] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

/* /Shared/LoadingPage.razor.rz.scp.css */
/* ========================================
   LOADING PAGE STYLES
   ======================================== */

.loading-page[b-hmkzv8x5ov] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--login-page-gradient);
}

.loading-container[b-hmkzv8x5ov] {
    text-align: center;
    color: var(--text-on-primary);
}

.loading-spinner[b-hmkzv8x5ov] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--spinner-track);
    border-top-color: var(--text-on-primary);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin-b-hmkzv8x5ov 1s linear infinite;
}

@keyframes spin-b-hmkzv8x5ov {
    to {
        transform: rotate(360deg);
    }
}

.loading-message[b-hmkzv8x5ov] {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

/* /Shared/LoginDisplay.razor.rz.scp.css */
/* ========================================
   LOGIN DISPLAY COMPONENT STYLES
   ======================================== */

/* User Menu Container */
.user-menu-container[b-778zcp6c4s] {
    position: relative;
}

/* Avatar Button */
.user-avatar-btn[b-778zcp6c4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.user-avatar-btn:hover[b-778zcp6c4s] {
    background: var(--header-border-light);
    border-color: var(--header-border-hover);
    transform: scale(1.05);
}

.user-avatar-btn:focus-visible[b-778zcp6c4s] {
    outline: 2px solid var(--text-on-primary);
    outline-offset: 2px;
}

/* Dropdown Panel */
.user-dropdown[b-778zcp6c4s] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    overflow: hidden;
    animation: dropdownFadeIn-b-778zcp6c4s 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-778zcp6c4s {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Header */
.dropdown-header[b-778zcp6c4s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
}

.dropdown-avatar[b-778zcp6c4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.dropdown-email[b-778zcp6c4s] {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown Divider */
.dropdown-divider[b-778zcp6c4s] {
    height: 1px;
    background: var(--border-color);
}

/* Dropdown Items */
.dropdown-item[b-778zcp6c4s] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
}

.dropdown-item:hover[b-778zcp6c4s] {
    background: var(--bg-tertiary);
    text-decoration: none;
    color: var(--text-primary);
}

.dropdown-item .oi[b-778zcp6c4s] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    width: 18px;
    text-align: center;
}

.dropdown-item.logout-item[b-778zcp6c4s] {
    color: var(--danger-color);
}

.dropdown-item.logout-item .oi[b-778zcp6c4s] {
    color: var(--danger-color);
}

/* Login Link (for non-authenticated users) */
.login-display[b-778zcp6c4s] {
    display: flex;
    align-items: center;
}

.login-link[b-778zcp6c4s] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-on-primary-muted);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--header-icon-bg);
}

.login-link:hover[b-778zcp6c4s] {
    color: var(--text-on-primary);
    background-color: var(--header-btn-hover-bg);
    text-decoration: none;
}

.login-link:focus[b-778zcp6c4s] {
    outline: 2px solid var(--header-border-light);
    outline-offset: 2px;
}

/* Hide login text on smaller screens */
@media (max-width: 576px) {
    .login-text[b-778zcp6c4s] {
        display: none;
    }

    .login-link[b-778zcp6c4s] {
        padding: 0.5rem;
    }
}

/* /Shared/LoginPage.razor.rz.scp.css */
/* ========================================
   LOGIN PAGE STYLES
   ======================================== */

.login-page[b-7zgmbsqg3a] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--login-page-gradient);
    padding: 1rem;
}

.login-container[b-7zgmbsqg3a] {
    width: 100%;
    max-width: 420px;
}

.login-card[b-7zgmbsqg3a] {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.login-header[b-7zgmbsqg3a] {
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    padding: 2rem;
    text-align: center;
}

.login-icon[b-7zgmbsqg3a] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.login-header h1[b-7zgmbsqg3a] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.login-subtitle[b-7zgmbsqg3a] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.875rem;
}

.login-body[b-7zgmbsqg3a] {
    padding: 2rem;
    text-align: center;
}

.login-message[b-7zgmbsqg3a] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.login-button[b-7zgmbsqg3a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--primary-color);
    color: var(--text-on-primary);
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-button:hover[b-7zgmbsqg3a] {
    background: var(--primary-hover);
    color: var(--text-on-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.login-button:active[b-7zgmbsqg3a] {
    transform: translateY(0);
}

.login-footer[b-7zgmbsqg3a] {
    padding: 1rem 2rem;
    text-align: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
}

/* Dev Mode Badge */
.dev-mode-badge[b-7zgmbsqg3a] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--warning-bg);
    color: var(--warning-text-dark);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid var(--warning-color);
}

/* /Shared/MainLayout.razor.rz.scp.css */
/* ========================================
   MAIN LAYOUT - NAV RAIL STYLES
   All colors reference semantic variables from app.css
   ======================================== */

/* Layout-specific sizing variables only - colors from app.css */
:root[b-2v1vg7w4mb] {
    --nav-rail-width-expanded: 16rem;
    --nav-rail-width-collapsed: 3.75rem;
    --radius-md: 0.25rem;
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s ease;
    --header-height: 70px;
    --mobile-header-height: 56px;
    --mobile-filter-bar-height: 44px;
    --mobile-top-offset: calc(var(--mobile-header-height) + var(--mobile-filter-bar-height));
}

/* Skip to content link */
.skip-to-content[b-2v1vg7w4mb] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: var(--text-on-primary);
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus[b-2v1vg7w4mb] {
    top: 0;
}

/* Main Layout Container */
.main-layout-container[b-2v1vg7w4mb] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========================================
   APP HEADER
   ======================================== */

.app-header[b-2v1vg7w4mb] {
    height: var(--header-height);
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    box-shadow: var(--shadow-md);
    z-index: 1030;
    flex-shrink: 0;
}

/* Mobile header adjustments */
@media (max-width: 767.98px) {
    .app-header[b-2v1vg7w4mb] {
        height: var(--mobile-header-height);
        padding: 0 0.5rem;
        position: sticky;
        top: 0;
    }

    .header-left[b-2v1vg7w4mb] {
        gap: 0.5rem;
    }

    .mobile-nav-toggle[b-2v1vg7w4mb] {
        padding: 0.375rem;
        margin-left: 0;
    }
}

.header-left[b-2v1vg7w4mb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-right[b-2v1vg7w4mb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Global Team Filter in Header */
.header-team-filter[b-2v1vg7w4mb] {
    min-width: 220px;
    max-width: 320px;
}

.header-team-filter[b-2v1vg7w4mb]  .multi-select-dropdown {
    width: 100%;
}

.header-team-filter[b-2v1vg7w4mb]  .dropdown-trigger {
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    color: var(--text-on-primary);
    min-height: 36px;
}

.header-team-filter[b-2v1vg7w4mb]  .dropdown-trigger:hover {
    border-color: var(--header-border-hover);
    background: var(--header-border-light);
}

.header-team-filter[b-2v1vg7w4mb]  .placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.header-team-filter[b-2v1vg7w4mb]  .pill {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-on-primary);
}

.header-team-filter[b-2v1vg7w4mb]  .pill-remove {
    color: var(--text-on-primary);
}

.header-team-filter[b-2v1vg7w4mb]  .pill-remove:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--text-on-primary);
}

.header-team-filter[b-2v1vg7w4mb]  .all-teams-pill {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.5);
}

.header-team-filter[b-2v1vg7w4mb]  .dropdown-arrow {
    color: rgba(255, 255, 255, 0.7);
}

.header-team-filter[b-2v1vg7w4mb]  .dropdown-panel {
    background: var(--card-bg);
    color: var(--text-primary);
    min-width: 280px;
}

.header-team-filter[b-2v1vg7w4mb]  .dropdown-item span {
    color: var(--text-primary);
}

/* Hide desktop filter on mobile - use mobile filter bar instead */
@media (max-width: 767.98px) {
    .header-team-filter[b-2v1vg7w4mb] {
        display: none;
    }
}

/* Smaller on tablets */
@media (max-width: 991.98px) and (min-width: 768px) {
    .header-team-filter[b-2v1vg7w4mb] {
        min-width: 180px;
        max-width: 220px;
    }
}

/* ========================================
   MOBILE FILTER BAR
   ======================================== */

/* Hidden by default (desktop) */
.mobile-filter-bar[b-2v1vg7w4mb] {
    display: none;
}

/* Show only on mobile */
@media (max-width: 767.98px) {
    .mobile-filter-bar[b-2v1vg7w4mb] {
        display: block;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        padding: 0.25rem 0.5rem;
        flex-shrink: 0;
    }

    .mobile-team-filter[b-2v1vg7w4mb] {
        width: 100%;
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .multi-select-dropdown {
        background: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .dropdown-trigger {
        padding: 0.125rem 0.375rem;
        min-height: 24px;
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .placeholder {
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .pill {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        font-size: 0.8rem;
        padding: 1px 0.5rem;
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .pill-remove {
        color: white;
        width: 14px;
        height: 14px;
        font-size: 0.875rem;
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .all-teams-pill {
        background: var(--success-color);
        border-color: var(--success-color);
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .dropdown-arrow {
        color: var(--text-secondary);
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .dropdown-panel {
        background: var(--card-bg);
        color: var(--text-primary);
        min-width: 250px;
        max-width: calc(100vw - 1.5rem);
    }

    .mobile-team-filter[b-2v1vg7w4mb]  .dropdown-item span {
        color: var(--text-primary);
    }
}

/* Theme Toggle Button */
.theme-toggle-btn[b-2v1vg7w4mb] {
    background: var(--header-icon-bg);
    border: 1px solid var(--header-border-light);
    border-radius: 0.375rem;
    color: var(--text-on-primary);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.theme-toggle-btn:hover[b-2v1vg7w4mb] {
    background: var(--header-border-light);
    border-color: var(--header-border-hover);
    transform: scale(1.05);
}

.theme-toggle-btn:focus-visible[b-2v1vg7w4mb] {
    outline: 2px solid var(--text-on-primary);
    outline-offset: 2px;
}

.theme-toggle-btn i[b-2v1vg7w4mb] {
    line-height: 1;
}

.mobile-nav-toggle[b-2v1vg7w4mb] {
    background: transparent;
    border: none;
    color: var(--text-on-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-branding[b-2v1vg7w4mb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-logo[b-2v1vg7w4mb] {
    height: 40px;
    width: auto;
    /* Invert the dark logo to white for visibility on dark header */
    filter: invert(1) brightness(2);
    transition: filter 0.2s ease;
}

/* Legacy icon styles (kept for fallback) */
.brand-icon[b-2v1vg7w4mb] {
    font-size: 1.75rem;
    color: var(--text-on-primary);
}

.brand-text[b-2v1vg7w4mb] {
    display: flex;
    flex-direction: column;
}

.brand-title[b-2v1vg7w4mb] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: var(--text-on-primary);
}

.brand-subtitle[b-2v1vg7w4mb] {
    font-size: 0.75rem;
    opacity: 0.9;
    line-height: 1;
}

@media (max-width: 768px) {
    .brand-subtitle[b-2v1vg7w4mb] {
        display: none;
    }
}

/* ========================================
   NAV RAIL - EXACT HGOV PACS STYLING
   ======================================== */

.nav-rail[b-2v1vg7w4mb] {
    width: var(--nav-rail-width-expanded);
    background-color: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
    transition: width var(--transition-base);
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
}

.nav-rail.collapsed[b-2v1vg7w4mb] {
    width: var(--nav-rail-width-collapsed);
}

.nav-rail-item[b-2v1vg7w4mb] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.625rem 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    white-space: nowrap;
    gap: 0.75rem;
    margin: 0.125rem 0.5rem;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-rail-item .icon[b-2v1vg7w4mb] {
    font-size: 1.25rem;
    min-width: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
}

.nav-rail-item .icon i[b-2v1vg7w4mb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1;
}

/* Fix question mark icon vertical alignment */
.nav-rail-item .icon i.oi-question-mark[b-2v1vg7w4mb] {
    position: relative;
    top: -3px;
}

.nav-rail-item .text[b-2v1vg7w4mb] {
    opacity: 1;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.nav-rail.collapsed .nav-rail-item[b-2v1vg7w4mb] {
    justify-content: center;
    padding: 0.75rem 0.5rem;
    margin: 0.125rem 0.25rem;
    gap: 0;
}

.nav-rail.collapsed .nav-rail-item .icon[b-2v1vg7w4mb] {
    margin: 0 auto;
}

.nav-rail.collapsed .nav-rail-item .text[b-2v1vg7w4mb] {
    opacity: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    display: none;
}

.nav-rail-item:hover[b-2v1vg7w4mb] {
    transform: translateX(3px);
    background: var(--nav-item-hover-gradient);
    color: var(--nav-item-hover-text);
}

.nav-rail-item:hover[b-2v1vg7w4mb]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--nav-indicator-gradient);
    border-radius: 0 2px 2px 0;
    box-shadow: var(--nav-indicator-glow);
    animation: slide-in-b-2v1vg7w4mb 0.3s ease-out;
}

@keyframes slide-in-b-2v1vg7w4mb {
    from {
        height: 0%;
        opacity: 0;
    }
    to {
        height: 60%;
        opacity: 1;
    }
}

.nav-rail-item:hover .icon i[b-2v1vg7w4mb] {
    color: var(--primary-color);
    filter: var(--nav-icon-hover-shadow);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.nav-rail.collapsed .nav-rail-item:hover[b-2v1vg7w4mb] {
    transform: scale(1.05);
    background: var(--nav-collapsed-hover);
}

.nav-rail.collapsed .nav-rail-item:hover[b-2v1vg7w4mb]::after {
    width: 3px;
    height: 80%;
    box-shadow: var(--nav-indicator-glow-strong);
}

/* Theme-aware Active Page Indicator */
.nav-rail-item.active[b-2v1vg7w4mb] {
    background: var(--nav-active-gradient);
    border-left: 4px solid var(--primary-color);
    color: var(--nav-item-hover-text);
    font-weight: 600;
    position: relative;
}

.nav-rail-item.active[b-2v1vg7w4mb]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--nav-active-bar-gradient);
    box-shadow: var(--nav-active-bar-glow);
    animation: pulse-glow-b-2v1vg7w4mb 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-2v1vg7w4mb {
    0%, 100% {
        box-shadow: var(--nav-active-bar-glow);
    }
    50% {
        box-shadow: var(--nav-active-bar-glow-strong);
    }
}

.nav-rail-item.active .icon i[b-2v1vg7w4mb] {
    color: var(--primary-color);
    filter: var(--nav-icon-active-shadow);
}

/* Collapsed state active indicator */
.nav-rail.collapsed .nav-rail-item.active[b-2v1vg7w4mb] {
    border-left: 4px solid var(--primary-color);
    background: var(--nav-active-gradient);
}

.nav-rail.collapsed .nav-rail-item.active[b-2v1vg7w4mb]::before {
    width: 4px;
    box-shadow: var(--nav-collapsed-active-glow);
}

/* Button styling for collapse button */
button.nav-rail-item[b-2v1vg7w4mb] {
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

button.nav-rail-item:focus-visible[b-2v1vg7w4mb] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-rail.collapsed button.nav-rail-item[b-2v1vg7w4mb] {
    justify-content: center;
}

/* Mobile Drawer */
@media (max-width: 767.98px) {
    .nav-rail[b-2v1vg7w4mb] {
        position: fixed;
        left: 0;
        top: var(--mobile-header-height);
        height: calc(100vh - var(--mobile-header-height));
        width: 280px;
        max-width: 85vw;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* When filter bar is present, adjust nav rail position */
    .has-mobile-filter .nav-rail[b-2v1vg7w4mb] {
        top: var(--mobile-top-offset);
        height: calc(100vh - var(--mobile-top-offset));
    }

    .nav-rail.open[b-2v1vg7w4mb] {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    /* Always expanded on mobile */
    .nav-rail.collapsed[b-2v1vg7w4mb] {
        width: 280px;
        max-width: 85vw;
    }

    .nav-rail-backdrop[b-2v1vg7w4mb] {
        position: fixed;
        top: var(--mobile-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-base), visibility var(--transition-base);
    }

    /* When filter bar is present, adjust backdrop position */
    .has-mobile-filter .nav-rail-backdrop[b-2v1vg7w4mb] {
        top: var(--mobile-top-offset);
    }

    .nav-rail-backdrop.show[b-2v1vg7w4mb] {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    /* Hide collapse toggle on mobile - nav is always full width when open */
    .nav-rail button[title*="Collapse"][b-2v1vg7w4mb],
    .nav-rail button[title*="Expand"][b-2v1vg7w4mb] {
        display: none;
    }

    /* Larger touch targets for nav items */
    .nav-rail-item[b-2v1vg7w4mb] {
        min-height: 48px;
        padding: 0.875rem 1rem;
    }
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

/* Main scroll container - content area scrolls here (not browser) */
#main-scroll-container[b-2v1vg7w4mb] {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Content scrolls in this container */
    overflow-x: hidden;
}

#main-content[b-2v1vg7w4mb] {
    flex: 1 0 auto; /* Allow content to grow beyond viewport */
}

/* ========================================
   FOOTER - Fixed at bottom of viewport
   ======================================== */

.app-footer[b-2v1vg7w4mb] {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 0.25rem 1rem;
    flex-shrink: 0;
    z-index: 10;
}

.footer-content[b-2v1vg7w4mb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footer-content small[b-2v1vg7w4mb] {
    font-size: 0.7rem;
}

/* Main scroll container background - uses theme variables */
#main-scroll-container[b-2v1vg7w4mb] {
    background-color: var(--bg-primary);
}

/* Mobile: enable vertical scrolling for main content */
@media (max-width: 767.98px) {
    #main-scroll-container[b-2v1vg7w4mb] {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #main-content[b-2v1vg7w4mb] {
        flex: 1 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}

/* ========================================
   DARK THEME NOTE
   All theme-specific styling is now handled
   through CSS variables defined in app.css.
   The nav variables (--nav-*) change automatically
   based on [data-theme="dark"] in app.css.
   ======================================== */