/* =====================================================
   PROJECT TIMER PAGE STYLES
   ===================================================== */

.project-timer-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
}

/* Summary Cards Section */
.pt-summary-section {
    margin-bottom: 8px;
}

.pt-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1200px) {
    .pt-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pt-summary-grid {
        grid-template-columns: 1fr;
    }
}

.pt-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: var(--dark-600);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.pt-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.pt-summary-card.gradient-blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.3);
}

.pt-summary-card.gradient-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

.pt-summary-card.gradient-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.pt-summary-card.gradient-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.05) 100%);
    border-color: rgba(249, 115, 22, 0.3);
}

.pt-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gradient-blue .pt-card-icon {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.gradient-purple .pt-card-icon {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.gradient-green .pt-card-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.gradient-orange .pt-card-icon {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.pt-card-icon svg {
    width: 24px;
    height: 24px;
}

.pt-card-content {
    flex: 1;
}

.pt-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.pt-card-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.pt-card-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.pt-card-change {
    font-size: 12px;
    margin-top: 4px;
}

.pt-card-change .positive {
    color: #22c55e;
}

.pt-card-change .negative {
    color: #ef4444;
}

/* Filters Section */
.pt-filters-section {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.pt-filters-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.pt-filters-row:not(:last-child) {
    margin-bottom: 20px;
}

.pt-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.pt-filter-group.pt-actions {
    flex-direction: row;
    align-items: flex-end;
    margin-left: auto;
}

.pt-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-input, .pt-select {
    padding: 10px 14px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s;
}

.pt-input:focus, .pt-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.pt-date-range {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pt-date-separator {
    color: var(--text-muted);
    font-size: 13px;
}

.pt-quick-filters {
    display: flex;
    gap: 8px;
}

.pt-quick-btn {
    padding: 8px 16px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-quick-btn:hover {
    background: var(--dark-500);
    color: var(--text-primary);
}

.pt-quick-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pt-search-wrapper {
    position: relative;
}

.pt-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.pt-input.pt-search {
    padding-left: 40px;
    min-width: 250px;
}

.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.pt-btn svg {
    width: 18px;
    height: 18px;
}

.pt-btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
}

.pt-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.pt-btn-secondary {
    background: var(--dark-700);
    color: var(--text-primary);
    border-color: var(--border);
}

.pt-btn-secondary:hover {
    background: var(--dark-500);
}

.pt-btn-icon {
    padding: 10px;
    background: var(--dark-700);
    border-color: var(--border);
    color: var(--text-secondary);
}

.pt-btn-icon:hover {
    background: var(--dark-500);
    color: var(--text-primary);
}

.pt-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

/* Toolbar */
.pt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pt-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--dark-700);
    padding: 4px;
    border-radius: 8px;
}

.pt-view-btn {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.pt-view-btn:hover {
    color: var(--text-primary);
}

.pt-view-btn.active {
    background: var(--primary);
    color: white;
}

.pt-view-btn svg {
    width: 18px;
    height: 18px;
}

.pt-toolbar-info {
    font-size: 14px;
    color: var(--text-secondary);
}

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

/* Content Area */
.pt-content {
    min-height: 400px;
}

.pt-empty, .pt-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}

.pt-empty svg, .pt-error svg {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.pt-empty h3, .pt-error h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Table View */
.pt-table-wrapper {
    overflow-x: auto;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pt-table {
    width: 100%;
    border-collapse: collapse;
}

.pt-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--dark-700);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.pt-table th.pt-sortable {
    cursor: pointer;
    transition: color 0.2s;
}

.pt-table th.pt-sortable:hover {
    color: var(--primary);
}

.pt-table td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.pt-table tbody tr:hover {
    background: var(--dark-500);
}

.pt-table tbody tr.pt-active-session {
    background: rgba(34, 197, 94, 0.05);
}

.pt-employee-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pt-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.pt-avatar.large {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.pt-project-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.pt-team-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--dark-700);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 12px;
}

.pt-status-active {
    color: #22c55e;
    font-weight: 500;
}

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

.pt-action-btn {
    padding: 6px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.pt-action-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pt-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Cards View */
.pt-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.pt-session-card {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pt-session-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.pt-session-card.active {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.pt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: var(--dark-700);
    border-bottom: 1px solid var(--border);
}

.pt-employee-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pt-employee-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.pt-team-name {
    font-size: 12px;
    color: var(--text-muted);
}

.pt-live-badge {
    padding: 4px 10px;
    background: #22c55e;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pt-card-body {
    padding: 20px;
}

.pt-project-info, .pt-task-info {
    margin-bottom: 16px;
}

.pt-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pt-value {
    font-size: 14px;
    color: var(--text-primary);
}

.pt-time-info {
    display: flex;
    gap: 20px;
}

.pt-time-block {
    flex: 1;
}

.pt-duration-live {
    color: #22c55e;
    font-weight: 600;
}

.pt-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--dark-700);
    border-top: 1px solid var(--border);
}

.pt-duration-badge {
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Timeline View */
.pt-timeline {
    padding: 20px;
}

.pt-timeline-day {
    margin-bottom: 32px;
}

.pt-timeline-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.pt-date-badge {
    padding: 8px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.pt-session-count {
    font-size: 13px;
    color: var(--text-muted);
}

.pt-timeline-sessions {
    padding-left: 20px;
}

.pt-timeline-item {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.pt-timeline-item.active .pt-timeline-content {
    background: rgba(34, 197, 94, 0.05);
    border-color: #22c55e;
}

.pt-timeline-time {
    width: 60px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
    padding-top: 4px;
    flex-shrink: 0;
}

.pt-timeline-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
}

.pt-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.pt-timeline-dot.pulse {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
    animation: dotPulse 2s infinite;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.1); }
}

.pt-timeline-line {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin-top: 8px;
}

.pt-timeline-content {
    flex: 1;
    padding: 16px;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pt-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pt-timeline-header .pt-employee {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.pt-timeline-header .pt-duration {
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
}

.pt-timeline-details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pt-timeline-details .pt-project {
    font-size: 13px;
    color: var(--text-secondary);
}

.pt-timeline-details .pt-task {
    font-size: 13px;
    color: var(--text-muted);
}

/* Pagination */
.pt-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.pt-page-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-page-btn:hover:not(:disabled) {
    background: var(--dark-500);
    border-color: var(--primary);
}

.pt-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pt-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pt-page-btn svg {
    width: 18px;
    height: 18px;
}

.pt-page-ellipsis {
    padding: 0 8px;
    color: var(--text-muted);
}

/* Report Pagination */
.rpt-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}
.rpt-pagination-info {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-page-size-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rpt-page-size-select {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
}
.rpt-page-size-select:focus {
    border-color: var(--primary);
}
.rpt-pagination-wrap .pt-pagination {
    padding: 0;
    gap: 4px;
}
.rpt-pagination-wrap .pt-page-btn {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 6px;
    padding: 0 8px;
}
.rpt-pagination-wrap .pt-page-btn svg {
    width: 14px;
    height: 14px;
}

/* Analytics Section */
.pt-analytics-section {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.pt-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
}

.pt-analytics-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pt-analytics-header svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.pt-toggle-icon {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.3s;
}

.pt-analytics-content {
    padding: 24px;
    border-top: 1px solid var(--border);
}

.pt-analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1100px) {
    .pt-analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .pt-analytics-grid {
        grid-template-columns: 1fr;
    }
}

.pt-analytics-card {
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.pt-analytics-card.pt-analytics-wide {
    grid-column: 1 / -1;
}

.pt-analytics-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

/* Project Breakdown */
.pt-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pt-breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pt-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pt-breakdown-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.pt-breakdown-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.pt-breakdown-bar-container {
    height: 8px;
    background: var(--dark-600);
    border-radius: 4px;
    overflow: hidden;
}

.pt-breakdown-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.pt-breakdown-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

/* Top Performers */
.pt-performers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =====================================================
   EMPLOYEE MULTI-SELECT AUTOCOMPLETE
   ===================================================== */

.pt-filter-wide {
    min-width: 320px;
    flex: 1.5;
}

.pt-employee-select {
    position: relative;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 8px;
    gap: 6px;
    transition: all 0.2s;
}

.pt-employee-select:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.pt-selected-employees {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pt-employee-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-primary);
    animation: chipIn 0.2s ease;
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pt-employee-chip-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-employee-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-employee-chip-remove:hover {
    background: #ef4444;
}

.pt-employee-chip-remove svg {
    width: 10px;
    height: 10px;
    color: #ef4444;
}

.pt-employee-chip-remove:hover svg {
    color: white;
}

.pt-employee-search-input {
    flex: 1;
    min-width: 150px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
}

.pt-employee-search-input::placeholder {
    color: var(--text-muted);
}

.pt-employee-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
    display: none;
}

.pt-employee-dropdown.show {
    display: block;
    animation: dropdownIn 0.2s ease;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pt-employee-dropdown-content {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.pt-employee-loading,
.pt-employee-no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.pt-employee-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.pt-employee-option:hover {
    background: var(--dark-500);
}

.pt-employee-option-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.pt-employee-option-info {
    flex: 1;
    min-width: 0;
}

.pt-employee-option-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-employee-option-details {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pt-employee-option-details span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scrollbar for dropdown */
.pt-employee-dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.pt-employee-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

.pt-employee-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.pt-employee-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.pt-performer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--dark-600);
    border-radius: 10px;
    transition: all 0.2s;
}

.pt-performer-item:hover {
    background: var(--dark-500);
}

.pt-performer-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-500);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.pt-performer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.pt-performer-info {
    flex: 1;
    min-width: 0;
}

.pt-performer-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-performer-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.pt-performer-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
}

/* Hourly Chart */
.pt-hourly-chart {
    padding: 20px 0;
}

.pt-hourly-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    gap: 4px;
}

.pt-hour-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.pt-hour-bar {
    width: 100%;
    max-width: 24px;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    margin-top: auto;
}

.pt-hour-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Modal */
.pt-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pt-modal-content {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pt-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.pt-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pt-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-modal-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.pt-modal-body {
    padding: 24px;
}

.pt-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pt-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pt-detail-item.full {
    grid-column: 1 / -1;
}

.pt-detail-item label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-detail-item span {
    font-size: 15px;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .pt-filters-row {
        flex-direction: column;
    }
    
    .pt-filter-group {
        width: 100%;
    }
    
    .pt-filter-group.pt-actions {
        margin-left: 0;
        justify-content: stretch;
    }
    
    .pt-filter-group.pt-actions .pt-btn {
        flex: 1;
    }
    
    .pt-date-range {
        flex-wrap: wrap;
    }
    
    .pt-quick-filters {
        flex-wrap: wrap;
    }
    
    .pt-toolbar {
        flex-wrap: wrap;
    }
    
    .pt-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .pt-detail-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   ENHANCED DETAILS MODAL STYLES
   ===================================================== */

/* Large Modal Variant */
.pt-modal-large {
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
}

.pt-modal-wide {
    max-width: 900px;
    width: 100%;
    max-height: none;
}

.pt-modal-header-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pt-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.pt-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.pt-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--text-secondary);
}

/* Details Sections */
.pt-details-section {
    margin-bottom: 24px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    overflow: visible;
}

.pt-details-section:last-child {
    margin-bottom: 0;
}

.pt-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.pt-section-title svg {
    color: #6366f1;
    flex-shrink: 0;
}

.pt-detail-item.pt-detail-full {
    grid-column: 1 / -1;
}

.pt-duration-highlight {
    font-weight: 600;
    color: #6366f1 !important;
}

/* Productivity Stats Grid - Top Tier Design */
.pt-stats-section {
    background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-600) 100%);
}

.pt-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.pt-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.pt-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.pt-stat-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.pt-stat-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    flex-shrink: 0;
}

.pt-stat-content {
    flex: 1;
    min-width: 0;
}

.pt-stat-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.pt-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.pt-stat-bar {
    height: 4px;
    background: var(--dark-500);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.pt-stat-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Stat Card Color Variants */
.pt-stat-productivity .pt-stat-icon { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.pt-stat-productivity .pt-stat-icon svg { stroke: #22c55e; }
.pt-stat-productivity .pt-stat-value { color: #22c55e; }

.pt-stat-active .pt-stat-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.pt-stat-active .pt-stat-icon svg { stroke: #3b82f6; }
.pt-stat-active .pt-stat-value { color: #3b82f6; }

.pt-stat-idle .pt-stat-icon { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.pt-stat-idle .pt-stat-icon svg { stroke: #f97316; }
.pt-stat-idle .pt-stat-value { color: #f97316; }

.pt-stat-total .pt-stat-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.pt-stat-total .pt-stat-icon svg { stroke: #8b5cf6; }
.pt-stat-total .pt-stat-value { color: #8b5cf6; }

.pt-stat-apps .pt-stat-icon { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.pt-stat-apps .pt-stat-icon svg { stroke: #ec4899; }
.pt-stat-apps .pt-stat-value { color: #ec4899; }

.pt-stat-sleep .pt-stat-icon { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.pt-stat-sleep .pt-stat-icon svg { stroke: #818cf8; }
.pt-stat-sleep .pt-stat-value { color: #818cf8; }

.pt-stat-checkin .pt-stat-icon { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.pt-stat-checkin .pt-stat-icon svg { stroke: #14b8a6; }
.pt-stat-checkin .pt-stat-value { color: #14b8a6; }

.pt-stat-checkout .pt-stat-icon { background: rgba(244, 63, 94, 0.15); color: #f43f5e; }
.pt-stat-checkout .pt-stat-icon svg { stroke: #f43f5e; }
.pt-stat-checkout .pt-stat-value { color: #f43f5e; }

/* Section Title SVG Icons */
.pt-section-title svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px;
    max-height: 18px;
    flex-shrink: 0;
}

/* No Data SVG Icons */
.pt-no-data svg {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px;
    max-height: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Section Badge */
.pt-section-badge {
    margin-left: auto;
    padding: 3px 10px;
    background: var(--dark-500);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* App Rank Top 3 Colors */
.pt-app-rank.top-1 { background: linear-gradient(135deg, #ffd700, #ffb800); color: #000; }
.pt-app-rank.top-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #000; }
.pt-app-rank.top-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }

/* Idle Time Reasons */
.pt-idle-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.pt-idle-reason-card {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    transition: all 0.2s;
}

.pt-idle-reason-card:hover {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

.pt-idle-reason-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pt-idle-reason-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.pt-idle-reason-count {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
    border-radius: 10px;
}

.pt-idle-reason-duration {
    font-size: 18px;
    font-weight: 700;
    color: #f97316;
}

/* Idle Approval Styles */
.pt-idle-bulk-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.pt-bulk-approve-btn, .pt-bulk-reject-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-bulk-approve-btn {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.pt-bulk-approve-btn:hover { background: rgba(34, 197, 94, 0.3); }

.pt-bulk-reject-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.pt-bulk-reject-btn:hover { background: rgba(239, 68, 68, 0.3); }

.pt-idle-action-btns {
    display: flex;
    gap: 4px;
}

.pt-idle-approve-btn, .pt-idle-reject-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-idle-approve-btn {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}
.pt-idle-approve-btn:hover { background: rgba(34, 197, 94, 0.3); transform: scale(1.1); }

.pt-idle-reject-btn {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.pt-idle-reject-btn:hover { background: rgba(239, 68, 68, 0.3); transform: scale(1.1); }

.pt-idle-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.pt-idle-status-badge.approved {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.pt-idle-status-badge.rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.pt-idle-undo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    cursor: pointer;
    margin-left: 6px;
    transition: all 0.2s;
}
.pt-idle-undo-btn:hover { background: rgba(148, 163, 184, 0.25); color: #e2e8f0; }

.pt-idle-approved-row { background: rgba(34, 197, 94, 0.04); }
.pt-idle-rejected-row { background: rgba(239, 68, 68, 0.04); opacity: 0.6; }

.pt-act-action { white-space: nowrap; }

.pt-spinner-sm {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: pt-spin 0.6s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

.pt-idle-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pt-idle-details h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Session Cards List */
.pt-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    overflow: visible;
}

.pt-session-card {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.pt-session-card:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
    transform: translateY(-2px);
}

.pt-session-card.pt-session-current {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    overflow: visible !important;
    z-index: 2;
}

.pt-session-card.pt-session-current::before {
    content: '✓ Current';
    position: absolute;
    top: -10px;
    right: 16px;
    background: #6366f1;
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 3;
}

.pt-session-card {
    position: relative;
}

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

.pt-session-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pt-session-project {
    padding: 4px 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}

.pt-session-times {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pt-session-time-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pt-session-time-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pt-session-time-item span:last-child {
    font-size: 13px;
    color: var(--text-primary);
}

.pt-session-task {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}

.pt-session-desc {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.pt-sessions-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--dark-600);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.pt-sessions-total span {
    font-size: 14px;
    color: var(--text-secondary);
}

.pt-sessions-total strong {
    font-size: 18px;
    color: #22c55e;
}

@media (max-width: 600px) {
    .pt-session-times {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pt-session-time-item {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Activity Table Name Column */
.pt-act-name {
    font-weight: 500;
    color: var(--text-primary);
}

/* Show More Button */
.pt-show-more-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: var(--dark-600);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.pt-show-more-btn:hover {
    background: var(--dark-500);
    border-color: #6366f1;
    color: #6366f1;
}

/* Application Usage List */
.pt-app-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pt-app-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--dark-600);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.pt-app-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-500);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.pt-app-info {
    flex: 1;
    min-width: 0;
}

.pt-app-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.pt-app-bar-container {
    height: 4px;
    background: var(--dark-500);
    border-radius: 2px;
    overflow: hidden;
}

.pt-app-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.pt-app-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.pt-app-duration {
    font-size: 13px;
    font-weight: 600;
    color: #6366f1;
}

.pt-app-count {
    font-size: 11px;
    color: var(--text-muted);
}

/* Activity Summary */
.pt-activity-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.pt-activity-type-card {
    background: var(--dark-600);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--border);
}

.pt-activity-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pt-activity-type-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--dark-500);
    color: var(--text-secondary);
}

.pt-activity-type-badge.app_usage {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.pt-activity-type-badge.idle_detection {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.pt-activity-type-badge.spam_detection {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pt-activity-type-badge.window_change {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.pt-activity-type-badge.screenshot {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.pt-activity-type-count {
    font-size: 11px;
    color: var(--text-muted);
}

.pt-activity-type-duration {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Activity Table */
.pt-activity-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.pt-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pt-activity-table thead {
    background: var(--dark-600);
}

.pt-activity-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.pt-activity-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.pt-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.pt-activity-table tbody tr:hover {
    background: var(--dark-600);
}

.pt-act-time {
    white-space: nowrap;
    color: var(--text-muted) !important;
    font-size: 12px;
    min-width: 70px;
}

.pt-act-type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--dark-500);
    color: var(--text-secondary);
    white-space: nowrap;
}

.pt-act-type-badge.app_usage {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.pt-act-type-badge.idle_detection,
.pt-act-type-badge.idle_reason {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.pt-act-type-badge.spam_detection {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pt-act-type-badge.window_change {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.pt-act-type-badge.screenshot {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.pt-act-desc {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-act-dur {
    white-space: nowrap;
    color: var(--text-muted) !important;
    font-size: 12px;
}

.pt-more-activities {
    text-align: center;
    padding: 12px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

/* No Data State */
.pt-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--text-muted);
}

.pt-no-data svg {
    opacity: 0.5;
}

.pt-no-data p {
    font-size: 14px;
    margin: 0;
}

/* Description cell in table */
.pt-description-cell {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}

/* Scrollbar for timeline */
.pt-activity-timeline::-webkit-scrollbar {
    width: 6px;
}

.pt-activity-timeline::-webkit-scrollbar-track {
    background: transparent;
}

.pt-activity-timeline::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.pt-activity-timeline::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive for Enhanced Modal */
@media (max-width: 768px) {
    .pt-modal-large {
        padding: 20px 10px;
    }
    
    .pt-modal-wide {
        max-width: 100%;
        border-radius: 12px;
    }
    
    .pt-time-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pt-activity-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pt-app-item {
        flex-wrap: wrap;
    }
    
    .pt-app-stats {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 480px) {
    .pt-time-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .pt-activity-summary {
        grid-template-columns: 1fr;
    }
    
    .pt-modal-header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
/* =====================================================
   Export Modal Styles
   ===================================================== */
.pt-export-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}

.pt-export-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.pt-export-tab:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
}

.pt-export-tab.active {
    background: var(--primary-color, #6C5CE7);
    color: #fff;
}

.pt-export-panel {
    display: none;
}

.pt-export-panel.active {
    display: block;
}

.pt-export-desc {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    margin: 12px 0;
}

.pt-export-field {
    margin-bottom: 16px;
}

.pt-export-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-export-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-export-date-row .pt-input {
    flex: 1;
}

.pt-export-quick-dates {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.pt-export-quick-dates .pt-quick-btn {
    font-size: 11px;
    padding: 4px 10px;
}

.pt-export-search-wrap {
    position: relative;
}

.pt-export-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2a3e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}

.pt-export-dd-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    transition: background 0.15s;
}

.pt-export-dd-item:hover {
    background: rgba(255,255,255,0.08);
}

.pt-export-dd-item.disabled {
    cursor: default;
    color: rgba(255,255,255,0.3);
}

.pt-export-dd-item strong {
    color: #fff;
}

.pt-export-selected-name {
    margin-top: 6px;
    font-size: 13px;
    color: var(--primary-color, #6C5CE7);
    font-weight: 500;
    min-height: 20px;
}

.pt-export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.pt-export-actions .pt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Export Format Toggle */
.pt-export-format {
    margin-bottom: 16px;
}

.pt-export-format-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pt-export-format-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 4px;
}

.pt-format-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.pt-format-btn:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
}

.pt-format-btn.active {
    background: rgba(108, 92, 231, 0.3);
    color: #a78bfa;
    border: 1px solid rgba(108, 92, 231, 0.4);
}

/* =====================================================
   Donut Chart Styles
   ===================================================== */
.pt-donut-container {
    min-height: 200px;
}

.pt-donut-chart-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pt-donut-svg {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.pt-donut-svg path {
    transition: opacity 0.2s;
    cursor: pointer;
}

.pt-donut-svg path:hover {
    opacity: 0.8;
    filter: brightness(1.15);
}

.pt-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.pt-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 0;
}

.pt-donut-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pt-donut-legend-name {
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-donut-legend-value {
    color: var(--text-muted, rgba(255,255,255,0.5));
    font-size: 11px;
    white-space: nowrap;
}

/* Always-open analytics - no toggle icon needed */
.pt-analytics-open .pt-toggle-icon {
    display: none;
}

.pt-analytics-open .pt-analytics-content {
    display: block !important;
}

@media (max-width: 700px) {
    .pt-donut-chart-wrap {
        flex-direction: column;
        align-items: center;
    }
}

/* Prominent Export Button */
.pt-btn-export {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.pt-btn-export:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.45);
    transform: translateY(-1px);
}

.pt-btn-export svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* =====================================================
   CATEGORY 1: Timekeeping - New Styles Only
   ===================================================== */

/* Manual Entry Button */
.pt-btn-success {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #27ae60, #229954);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}
.pt-btn-success:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
    transform: translateY(-1px);
}
.pt-btn-success svg { width: 16px; height: 16px; }

/* Bulk Actions Dropdown */
.pt-bulk-dropdown {
    position: relative;
    display: inline-block;
}
.pt-bulk-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 100;
    min-width: 180px;
    overflow: hidden;
}
.pt-bulk-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.pt-bulk-menu button:hover {
    background: var(--dark-500);
    color: var(--text-primary);
}

/* Billable Badge */
.pt-billable-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.pt-billable-yes {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
}
.pt-billable-yes:hover { background: rgba(39, 174, 96, 0.25); }
.pt-billable-no {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.15);
}
.pt-billable-no:hover { background: rgba(148, 163, 184, 0.2); }

/* Tags in table */
.pt-tags-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.pt-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-primary);
}

/* Selected row highlight */
.pt-table tbody tr.pt-selected {
    background: rgba(99, 102, 241, 0.08) !important;
    border-left: 3px solid #6366f1;
}

/* Manual entry row dot */
.pt-table tbody tr.pt-manual-entry td:first-child::after {
    content: '✎';
    font-size: 10px;
    color: #f59e0b;
    margin-left: 4px;
}

/* Action danger variant */
.pt-action-btn.pt-action-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

/* Tag filter chips */
.pt-tags-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
    align-items: center;
}
.pt-tag-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--dark-700);
    color: var(--text-muted);
    border: 1px solid var(--border);
    user-select: none;
}
.pt-tag-chip:hover {
    background: var(--dark-500);
    color: var(--text-primary);
}
.pt-tag-chip.active {
    background: var(--tag-color, #6C5CE7);
    color: #fff;
    border-color: var(--tag-color, #6C5CE7);
}

/* Modal footer (new - not in existing styles) */
.pt-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* Two-column form layout for modals */
.pt-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Edit history note */
.pt-edit-history {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--dark-700);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Toast notification */
.pt-toast {
    animation: ptToastIn 0.3s ease-out;
}
@keyframes ptToastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   ADMIN TIMESHEET STYLES
   ===================================================== */

/* Tab Switcher */
.pt-admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px;
    width: fit-content;
}

.pt-admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.pt-admin-tab:hover {
    color: var(--text-primary);
    background: var(--glass-hover);
}

.pt-admin-tab.active {
    color: #fff;
    background: var(--primary);
    font-weight: 600;
}

.pt-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Summary Cards */
.ts-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.ts-admin-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: var(--dark-600);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.ts-admin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ts-admin-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ts-admin-card-value {
    font-size: 32px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    line-height: 1;
}

.ts-admin-card-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.ts-card-pending {
    background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.03) 100%);
    border-color: rgba(245,158,11,0.25);
}
.ts-card-pending .ts-admin-card-icon { background: rgba(245,158,11,0.2); }
.ts-card-pending .ts-admin-card-value { color: #f59e0b; }

.ts-card-approved {
    background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(34,197,94,0.03) 100%);
    border-color: rgba(34,197,94,0.25);
}
.ts-card-approved .ts-admin-card-icon { background: rgba(34,197,94,0.2); }
.ts-card-approved .ts-admin-card-value { color: #22c55e; }

.ts-card-rejected {
    background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.03) 100%);
    border-color: rgba(239,68,68,0.25);
}
.ts-card-rejected .ts-admin-card-icon { background: rgba(239,68,68,0.2); }
.ts-card-rejected .ts-admin-card-value { color: #ef4444; }

.ts-card-flagged {
    background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(139,92,246,0.03) 100%);
    border-color: rgba(139,92,246,0.25);
}
.ts-card-flagged .ts-admin-card-icon { background: rgba(139,92,246,0.2); }
.ts-card-flagged .ts-admin-card-value { color: #8b5cf6; }

@media (max-width: 768px) {
    .ts-admin-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Filters Section */
.ts-admin-filters-section {
    background: var(--dark-600);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

/* Bulk Actions Bar */
.ts-admin-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(99,102,241,0.03) 100%);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 14px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Table Card */
.ts-admin-table-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

/* Pagination */
.ts-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

/* Locks Section */
.ts-settings-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

.ts-panel { background: var(--dark-600); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.2s; }
.ts-panel:hover { border-color: rgba(255,255,255,0.1); }

.ts-panel-header { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; gap: 16px; user-select: none; transition: background 0.15s; }
.ts-panel-header:hover { background: rgba(255,255,255,0.02); }
.ts-panel-title-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.ts-panel-meta { flex: 1; font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.ts-panel-chevron { color: var(--text-muted); transition: transform 0.25s; flex-shrink: 0; }

.ts-panel-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 20px; }
.ts-panel.open .ts-panel-body { max-height: 800px; padding: 0 20px 20px; overflow: visible; }
.ts-panel.open .ts-panel-chevron { transform: rotate(180deg); }

.ts-panel-form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ts-field { display: flex; flex-direction: column; gap: 4px; }
.ts-field label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

.ts-action-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; }
.ts-action-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.ts-action-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }

.ts-admin-lock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: var(--transition);
}

.ts-admin-lock-item:hover {
    border-color: var(--border-hover);
}

/* Detail Modal */
.ts-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-detail-modal {
    background: var(--dark-800);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 850px;
    max-width: 95vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.ts-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
}

.ts-detail-close {
    background: var(--glass);
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.ts-detail-close:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
}

.ts-detail-body {
    padding: 24px 28px;
    overflow-y: auto;
    max-height: 65vh;
}

@media (max-width: 768px) {
    .ts-admin-filters-section { flex-wrap: wrap; }
}

/* Admin hour inputs in timesheet detail modal */
.ts-admin-hour-input,
.ts-detail-modal input[type="number"],
.ts-detail-modal input[type="text"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.ts-admin-hour-input::-webkit-outer-spin-button,
.ts-admin-hour-input::-webkit-inner-spin-button,
.ts-detail-modal input[type="number"]::-webkit-outer-spin-button,
.ts-detail-modal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ts-admin-hour-input:focus,
.ts-detail-modal input:focus {
    outline: none !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important;
}

/* Export period buttons */
.ts-export-period {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--text-secondary) !important;
    transition: all 0.15s;
}
.ts-export-period.active {
    background: rgba(139,92,246,0.15) !important;
    border-color: rgba(139,92,246,0.4) !important;
    color: #a78bfa !important;
    font-weight: 600;
}


/* ==================== REPORTS ==================== */
.rpt-type-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); align-items: center; flex-wrap: wrap; }
.rpt-tab-divider { width: 1px; height: 20px; background: var(--border); margin: 0 8px; flex-shrink: 0; }
.rpt-type-group { display: flex; align-items: center; gap: 4px; }
.rpt-type-label { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-right: 6px; }
.rpt-tab { background: none; border: none; color: var(--text-muted); font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.rpt-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-secondary); }
.rpt-tab.active { background: rgba(139,92,246,0.12); color: #a78bfa; font-weight: 600; }

/* Use sessions tab period style for rpt-period */
.rpt-period { /* inherits pt-quick-btn styles from main CSS */ }

/* Billable Summary */
.rpt-billable-bar { display: flex; align-items: center; gap: 24px; background: var(--dark-600); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.rpt-billable-stat { display: flex; flex-direction: column; }
.rpt-billable-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.rpt-billable-value { font-size: 18px; font-weight: 700; color: #fff; font-family: 'SF Mono', monospace; }
.rpt-billable-progress { width: 200px; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.rpt-billable-progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 4px; transition: width 0.5s ease; }

/* Charts */
.rpt-chart-wrap { background: var(--dark-600); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }

/* Table */
.rpt-table-wrap { background: var(--dark-600); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.rpt-table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 13px; }
.rpt-table th { padding: 10px 12px; text-align: left; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.rpt-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.rpt-table tbody tr:hover { background: rgba(139,92,246,0.04); }
.rpt-table .rpt-c { text-align: center; }
.rpt-table .rpt-r { text-align: right; }
.rpt-table .rpt-mono { font-family: 'SF Mono', 'Menlo', monospace; font-size: 12px; }
.rpt-table .rpt-bold { font-weight: 700; }
.rpt-table .rpt-dim { color: var(--text-muted); }
.rpt-table .rpt-green { color: #22c55e; }
.rpt-table .rpt-warn { color: #f59e0b; }
.rpt-table .rpt-name { font-weight: 600; }
.rpt-table .rpt-desc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.rpt-table .rpt-empty { text-align: center; padding: 40px !important; color: var(--text-muted); }
.rpt-total-row td { font-weight: 700; border-top: 2px solid var(--border); padding: 12px; }
.rpt-bar-bg { height: 14px; background: rgba(255,255,255,0.04); border-radius: 7px; overflow: hidden; }
.rpt-bar-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #a78bfa); border-radius: 7px; transition: width 0.4s ease; }

/* Export */
.rpt-export-btn { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.08)); border: 1px solid rgba(139,92,246,0.3); color: #a78bfa; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
.rpt-export-btn:hover { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.5); }
.rpt-export-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: #fff; cursor: pointer; text-align: left; transition: all 0.15s; }
.rpt-export-option:hover { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.3); }

/* Timesheet export modal period buttons */
.ts-export-period { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.1) !important; color: var(--text-secondary) !important; transition: all 0.15s; }
.ts-export-period.active { background: rgba(139,92,246,0.15) !important; border-color: rgba(139,92,246,0.4) !important; color: #a78bfa !important; font-weight: 600; }

/* Dark dropdown option background */
.pt-select option { background: var(--dark-700); color: #fff; }
.form-input option, .modal select option { background: var(--dark-700, #1e1e2e); color: #fff; }
select.form-input { color-scheme: dark; }
/* Saved Reports Bar */
.rpt-saved-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 16px; background: var(--dark-600); border: 1px solid var(--border); border-radius: 10px; }
.rpt-saved-left { display: flex; align-items: center; gap: 8px; }
.rpt-saved-right { display: flex; align-items: center; gap: 6px; }
.rpt-icon-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.rpt-icon-btn:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); color: #a78bfa; }
.rpt-icon-btn svg { flex-shrink: 0; }

/* Email chip input */
.rpt-email-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3); border-radius: 14px; font-size: 11px; color: #a78bfa; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.rpt-email-chip button { background: none; border: none; color: #a78bfa; cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; opacity: 0.7; }
.rpt-email-chip button:hover { opacity: 1; color: #ef4444; }
.rpt-email-suggest { padding: 8px 12px; cursor: pointer; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; transition: background 0.1s; }
.rpt-email-suggest:hover { background: rgba(139,92,246,0.1); }

/* ==================== FINANCE TAB ==================== */
.fin-tabs { display: flex; gap: 2px; padding: 3px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 14px; }
.fin-tab { padding: 8px 18px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.fin-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
.fin-tab.active { background: rgba(139,92,246,0.12); color: #a78bfa; }
.fin-pane { }

/* Filter Bar */
.fin-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-quick-group { display: flex; gap: 2px; padding: 2px; background: rgba(255,255,255,0.03); border-radius: 7px; }
.fin-quick { padding: 5px 12px; border: none; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.12s; }
.fin-quick:hover { color: var(--text-secondary); }
.fin-quick.active { background: rgba(139,92,246,0.15); color: #a78bfa; }

/* KPI Row */
.fin-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fin-kpi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--dark-600); border: 1px solid var(--border); border-radius: 10px; }
.fin-kpi-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.fin-kpi-num { font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.fin-kpi-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px; }
@media (max-width: 1200px) { .fin-kpi-row { grid-template-columns: repeat(3, 1fr); } }

/* Boxes & Charts */
.fin-row { display: flex; gap: 10px; }
.fin-box { background: var(--dark-600); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.fin-box-title { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 10px; }
.fin-box-sub { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.fin-table-scroll { max-height: 210px; overflow-y: auto; }
.fin-scroll-area { max-height: calc(100vh - 290px); overflow-y: auto; }

/* Inputs */
.fin-input { padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; color: var(--text-primary); font-size: 13px; outline: none; transition: border-color 0.15s; }
.fin-input:focus { border-color: rgba(139,92,246,0.4); }
.fin-input option { background: var(--dark-700); color: #fff; }
.fin-input-sm { padding: 6px 9px; font-size: 12px; }
.fin-fg { display: flex; flex-direction: column; gap: 3px; }
.fin-fg label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.fin-btn { padding: 7px 16px; background: linear-gradient(135deg, #6C5CE7, #5A4BD1); color: white; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; align-self: flex-end; transition: opacity 0.15s; }
.fin-btn:hover { opacity: 0.88; }
.fin-link { color: #818cf8; cursor: pointer; font-weight: 600; }
.fin-link:hover { text-decoration: underline; }
.fin-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 12px; border: 1px dashed rgba(255,255,255,0.06); border-radius: 8px; margin: 6px 0; }
.fin-badge { padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; white-space: nowrap; }

/* Rate Sections */
.fin-rate-section { margin-bottom: 14px; }
.fin-rate-list { max-height: 240px; overflow-y: auto; margin: 10px 0; }
.fin-inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.fin-add-bar { padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 4px; }

/* Rate Table */
.fin-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-tbl th { padding: 8px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.08); }
.fin-tbl td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: middle; }
.fin-tbl tr:hover { background: rgba(255,255,255,0.02); }
.fin-tbl-input { width: 90px; padding: 6px 10px; background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: 'JetBrains Mono', monospace; text-align: right; outline: none; transition: border-color 0.15s; }
.fin-tbl-input:focus { border-color: rgba(139,92,246,0.5); background: rgba(255,255,255,0.06); }
.fin-tbl-del { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; opacity: 0; transition: all 0.12s; line-height: 1; }
.fin-tbl tr:hover .fin-tbl-del { opacity: 1; }
.fin-tbl-del:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.fin-rate-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.fin-rate-id { font-size: 10px; color: var(--text-muted); margin-left: 8px; font-family: monospace; }
.fin-rate-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-primary); }

/* Project Cards */
.fin-proj-card { background: var(--dark-600); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.15s; }
.fin-proj-card:hover { border-color: rgba(255,255,255,0.1); }
.fin-proj-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; gap: 12px; user-select: none; }
.fin-proj-header:hover { background: rgba(255,255,255,0.015); }
.fin-proj-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.fin-proj-card.open .fin-proj-body { max-height: 400px; overflow: visible; }
.fin-proj-chevron { color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.fin-proj-card.open .fin-proj-chevron { transform: rotate(180deg); }

/* Gantt Table */
.gantt-tbl { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 800px; }
.gantt-tbl th { padding: 6px 4px; font-size: 9px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.gantt-name-col { text-align: left !important; padding: 8px 10px !important; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; position: sticky; left: 0; background: var(--dark-600); z-index: 1; }
.gantt-day-col { width: 60px; min-width: 60px; }
.gantt-cell { padding: 3px 2px; text-align: center; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.03); }
.gantt-weekend { background: rgba(245,158,11,0.04); }
.gantt-block { padding: 4px 2px; border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* Planning - Gantt Timeline */
.plan-gantt { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 600px; }
.plan-gantt th, .plan-gantt td { border: 1px solid rgba(255,255,255,0.04); text-align: center; }
.plan-gantt thead th { padding: 8px 4px; font-size: 9px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.3px; background: rgba(255,255,255,0.02); position: sticky; top: 0; z-index: 2; }
.plan-gantt-name { text-align: left !important; padding: 8px 12px !important; min-width: 160px; position: sticky; left: 0; z-index: 1; background: var(--dark-600); }
.plan-gantt-day { min-width: 70px; }
.plan-gantt-total { min-width: 60px; font-weight: 700; }
.plan-gantt-cell { padding: 4px !important; vertical-align: top; min-height: 40px; }
.plan-today { background: rgba(139,92,246,0.06) !important; }
.plan-friday { background: rgba(245,158,11,0.04) !important; }
.plan-emp-name { font-weight: 600; font-size: 12px; color: var(--text-primary); }
.plan-emp-team { font-size: 10px; color: var(--text-muted); }
.plan-block { padding: 3px 6px; border-radius: 5px; margin-bottom: 2px; font-size: 10px; color: white; display: flex; align-items: center; justify-content: space-between; gap: 4px; position: relative; }
.plan-block-proj { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.plan-block-hrs { font-weight: 700; flex-shrink: 0; }
.plan-block-del { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; display: none; }
.plan-block:hover .plan-block-del { display: block; }
.plan-block-del:hover { color: white; }
.plan-add-bar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; background: var(--dark-600); border: 1px solid var(--border); border-radius: 10px; }

/* Planning - Capacity Bar */
.plan-cap-bar { width: 100%; height: 20px; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; position: relative; }
.plan-cap-fill { height: 100%; border-radius: 10px; transition: width 0.3s; min-width: 2px; }
.plan-cap-pct { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: var(--text-primary); }

/* Capacity Table */
.plan-cap-tbl td { font-size: 12px; }
.plan-cap-main-row { cursor: pointer; transition: background 0.1s; }
.plan-cap-main-row:hover { background: rgba(255,255,255,0.025) !important; }
.plan-muted { font-size: 11px; color: var(--text-muted); }
.plan-cap-detail-row { display: none; }
.plan-cap-detail-row.open { display: table-row; }
.plan-cap-details { padding: 8px 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-team-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 6px; font-size: 11px; color: var(--text-muted); }
.plan-team-badge { padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.plan-team-badge.tracking { background: rgba(34,197,94,0.1); color: #22c55e; }
.plan-team-badge.sessions { background: rgba(99,102,241,0.1); color: #818cf8; }
.plan-team-metric { font-size: 11px; }

/* Comparison Summary */
.cmp-sum-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.cmp-sum-row:last-child { border-bottom: none; }
.cmp-sum-rank { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.cmp-sum-name { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sum-proj { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.cmp-sum-val { font-weight: 700; font-size: 13px; flex-shrink: 0; min-width: 40px; text-align: right; }
.cmp-sum-att { font-size: 10px; color: var(--text-muted); flex-shrink: 0; padding: 1px 5px; background: rgba(255,255,255,0.04); border-radius: 4px; }
.cmp-sum-hrs { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.cmp-sum-empty { font-size: 12px; color: var(--text-muted); padding: 12px 0; }
.cmp-show-more { display: block; width: 100%; padding: 6px; margin-top: 6px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.08); border-radius: 6px; color: #818cf8; font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; }
.cmp-show-more:hover { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.2); }

/* Time Off Balance Table */
.toff-bal-tbl th[rowspan] { vertical-align: middle; }
.toff-sub-th { font-size: 9px !important; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted) !important; font-weight: 600 !important; padding: 4px 6px !important; }

/* Leave Analytics */
.toff-an-icon { font-weight: 800; font-size: 15px; }
.toff-an-sub { font-size: 9px; color: var(--text-muted); margin-top: 1px; }

/* Multi-Employee Select in filter bars */
.emp-multi-select { min-width: 200px; max-width: 320px; }
.emp-multi-select .pt-employee-search-input { font-size: 12px; padding: 5px 8px; }
.emp-multi-select .pt-employee-chip { padding: 2px 6px; font-size: 10px; }
.emp-multi-select .pt-employee-chip-name { font-size: 10px; }
.emp-multi-select .pt-employee-chip-remove { width: 14px; height: 14px; }
.emp-multi-select .pt-employee-chip-remove svg { width: 10px; height: 10px; }
.emp-multi-select .pt-employee-dropdown { top: 100%; }
.emp-multi-select .pt-employee-option { padding: 6px 10px; font-size: 12px; }
.emp-multi-select .pt-employee-option-avatar { width: 26px; height: 26px; font-size: 10px; }
.emp-multi-select .pt-employee-option-name { font-size: 12px; }
.emp-multi-select .pt-employee-option-details { font-size: 10px; }
/* ==================== VIEW-ONLY MODE ==================== */
/* When a tab has pt-view-only class, hide all edit UI elements */
.pt-view-only .fin-btn[onclick],
.pt-view-only .fin-add-bar,
.pt-view-only .fin-inline-form,
.pt-view-only .plan-add-bar,
.pt-view-only .fin-tbl-del,
.pt-view-only .plan-block-del,
.pt-view-only [onclick*="Save"],
.pt-view-only [onclick*="save"],
.pt-view-only [onclick*="Add"],
.pt-view-only [onclick*="Delete"],
.pt-view-only [onclick*="delete"],
.pt-view-only [onclick*="Edit"],
.pt-view-only [onclick*="edit"],
.pt-view-only [onclick*="Show"],
.pt-view-only [onclick*="Init"],
.pt-view-only [onclick*="Adjust"],
.pt-view-only [onclick*="Verify"],
.pt-view-only [onclick*="Publish"] { display: none !important; }

/* Make inputs read-only look in view-only mode */
.pt-view-only input[type="number"],
.pt-view-only input[type="text"][id*="Rate"],
.pt-view-only input[type="text"][id*="rate"],
.pt-view-only select[id*="Currency"] {
    pointer-events: none;
    opacity: 0.5;
}

/* Read-only value display for view-only project cards */
.fin-ro-val { font-size: 13px; font-weight: 600; color: var(--text-primary); padding: 6px 0; }
/* =========================================================================
   OT Assignment Modal — styled with the page's standard pt-modal system
   ========================================================================= */
.ot-assign-day {
    padding: 14px;
    background: var(--dark-700);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
}
.ot-assign-day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ot-assign-day-date {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.ot-assign-day-meta {
    font-size: 12px;
    color: var(--text-muted);
}
.ot-assign-ot-val {
    color: #f59e0b;
    font-weight: 600;
}
.ot-assign-project-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ot-assign-chip {
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 4px;
}
.ot-assign-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ot-assign-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ot-assign-select {
    flex: 1;
}
.ot-assign-select-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}