/*
 * File: planware.css
 * Desc: Styles for PlanWare components (Home, Project, Create, Timeline, Tasks, Factors)
 */

/* ============================================================
   SHARED UTILITIES
   ============================================================ */

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

@keyframes pwSpin {
    to { transform: rotate(360deg); }
}

@keyframes pwPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pw-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #E5E7EB);
    border-top-color: var(--primary-purple, #8B7EC8);
    border-radius: 50%;
    animation: pwSpin 0.8s linear infinite;
}

.pw-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.pw-loading p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.pw-error {
    padding: 2rem;
    text-align: center;
    color: #EF4444;
}

.pw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    text-align: center;
}

.pw-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.pw-empty h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.pw-empty p {
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

/* Badges */
.pw-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pw-badge-active { background: #DCFCE7; color: #166534; }
.pw-badge-planning { background: #DBEAFE; color: #1E40AF; }
.pw-badge-ideation { background: #F3F4F6; color: #374151; }
.pw-badge-on_hold { background: #FEF3C7; color: #92400E; }
.pw-badge-completed { background: #EDE9FE; color: #5B21B6; }
.pw-badge-archived { background: #F3F4F6; color: #6B7280; }

.pw-badge-excellent { background: #DCFCE7; color: #166534; }
.pw-badge-good { background: #DBEAFE; color: #1E40AF; }
.pw-badge-at_risk { background: #FEF3C7; color: #92400E; }
.pw-badge-critical { background: #FEE2E2; color: #991B1B; }
.pw-badge-not_assessed { background: #F3F4F6; color: #6B7280; }

/* Buttons */
.pw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pw-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pw-btn-primary {
    background: linear-gradient(135deg, var(--primary-purple, #8B7EC8), var(--primary-green, #7FB069));
    color: white;
}

.pw-btn-primary:hover {
    opacity: 0.9;
}

.pw-btn-secondary {
    background: var(--bg-secondary, #F9FAFB);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #E5E7EB);
}

.pw-btn-secondary:hover {
    background: var(--bg-tertiary, #F3F4F6);
}

.pw-btn-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.pw-btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.pw-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* ============================================================
   HOME COMPONENT
   ============================================================ */

.pw-home {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    animation: pwFadeIn 0.3s ease;
}

.pw-home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.pw-home-header h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pw-home-header p {
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
    font-size: 1rem;
}

/* Stats Bar */
.pw-stats-bar {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.pw-stat-card {
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    flex: 1;
    min-width: 150px;
}

.pw-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pw-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Project Cards Grid */
.pw-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.pw-card {
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pw-card:hover {
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 4px 12px rgba(139, 126, 200, 0.15);
    transform: translateY(-2px);
}

.pw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.pw-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pw-card-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pw-card-meta {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pw-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Completion Bar */
.pw-progress-bar {
    height: 6px;
    background: var(--bg-tertiary, #E5E7EB);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.pw-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-purple, #8B7EC8), var(--primary-green, #7FB069));
    transition: width 0.4s ease;
}

.pw-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-align: right;
}

/* ============================================================
   PROJECT COMPONENT
   ============================================================ */

.pw-project {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    animation: pwFadeIn 0.3s ease;
}

.pw-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
}

.pw-back-btn:hover {
    color: var(--primary-purple, #8B7EC8);
}

.pw-project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.pw-project-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pw-project-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Tabs */
.pw-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color, #E5E7EB);
    margin-bottom: 1.5rem;
}

.pw-tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pw-tab:hover {
    color: var(--text-primary);
}

.pw-tab.active {
    color: var(--primary-purple, #8B7EC8);
    border-bottom-color: var(--primary-purple, #8B7EC8);
}

.pw-tab-content {
    min-height: 300px;
}

/* Overview sections */
.pw-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .pw-overview-grid {
        grid-template-columns: 1fr;
    }
}

.pw-section {
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
}

.pw-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pw-section-full {
    grid-column: 1 / -1;
}

/* Phase list */
.pw-phase-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

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

.pw-phase-seq {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-purple, #8B7EC8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.pw-phase-info {
    flex: 1;
}

.pw-phase-name {
    font-weight: 500;
    color: var(--text-primary);
}

.pw-phase-dates {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Milestone list */
.pw-milestone-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.pw-milestone-icon {
    font-size: 1.25rem;
}

.pw-milestone-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.pw-milestone-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Risk list */
.pw-risk-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

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

.pw-risk-name {
    font-weight: 500;
    color: var(--text-primary);
}

.pw-risk-severity {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pw-risk-high { background: #FEE2E2; color: #991B1B; }
.pw-risk-medium { background: #FEF3C7; color: #92400E; }
.pw-risk-low { background: #DCFCE7; color: #166534; }

/* ============================================================
   CREATE COMPONENT (AI Chat)
   ============================================================ */

.pw-create {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    animation: pwFadeIn 0.3s ease;
}

.pw-create-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pw-create-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Stage indicator */
.pw-stages {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pw-stage-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color, #E5E7EB);
    transition: all 0.3s ease;
}

.pw-stage-dot.active {
    background: var(--primary-purple, #8B7EC8);
    box-shadow: 0 0 0 3px rgba(139, 126, 200, 0.3);
}

.pw-stage-dot.completed {
    background: var(--primary-green, #7FB069);
}

.pw-stage-line {
    flex: 1;
    height: 2px;
    background: var(--border-color, #E5E7EB);
}

.pw-stage-line.completed {
    background: var(--primary-green, #7FB069);
}

.pw-stage-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.pw-stage-label.active {
    color: var(--primary-purple, #8B7EC8);
    font-weight: 600;
}

/* Chat messages */
.pw-chat {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pw-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    animation: pwFadeIn 0.3s ease;
}

.pw-message-ai {
    align-self: flex-start;
}

.pw-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.pw-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.pw-message-ai .pw-message-avatar {
    background: linear-gradient(135deg, var(--primary-purple, #8B7EC8), var(--primary-green, #7FB069));
}

.pw-message-user .pw-message-avatar {
    background: var(--bg-tertiary, #E5E7EB);
}

.pw-message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.pw-message-ai .pw-message-bubble {
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    color: var(--text-primary);
}

.pw-message-user .pw-message-bubble {
    background: var(--primary-purple, #8B7EC8);
    color: white;
}

/* Chat input */
.pw-chat-input {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--border-color, #E5E7EB);
}

.pw-chat-input textarea {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-primary);
}

.pw-chat-input textarea:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 0 0 3px rgba(139, 126, 200, 0.15);
}

.pw-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple, #8B7EC8), var(--primary-green, #7FB069));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.pw-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Plan Preview */
.pw-plan-preview {
    background: var(--bg-secondary, #F9FAFB);
    border: 2px solid var(--primary-purple, #8B7EC8);
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.pw-plan-preview h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.pw-plan-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pw-plan-stat {
    text-align: center;
    padding: 0.5rem;
}

.pw-plan-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-purple, #8B7EC8);
}

.pw-plan-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pw-plan-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ============================================================
   TIMELINE COMPONENT
   ============================================================ */

.pw-timeline {
    padding: 1.5rem 0;
    animation: pwFadeIn 0.3s ease;
}

.pw-timeline-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pw-zoom-btns {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
}

.pw-zoom-btn {
    padding: 0.4rem 0.75rem;
    background: var(--bg-primary, #FFFFFF);
    border: none;
    border-right: 1px solid var(--border-color, #E5E7EB);
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.pw-zoom-btn:last-child {
    border-right: none;
}

.pw-zoom-btn.active {
    background: var(--primary-purple, #8B7EC8);
    color: white;
}

.pw-timeline-container {
    overflow-x: auto;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    background: var(--bg-primary, #FFFFFF);
}

.pw-timeline-header {
    display: flex;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #F9FAFB);
    z-index: 2;
}

.pw-timeline-label-col {
    width: 180px;
    min-width: 180px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color, #E5E7EB);
}

.pw-timeline-dates {
    display: flex;
    flex: 1;
}

.pw-timeline-date-cell {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color, #F3F4F6);
}

/* Swim lanes */
.pw-swim-lane {
    display: flex;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    min-height: 48px;
}

.pw-swim-lane:last-child {
    border-bottom: none;
}

.pw-swim-label {
    width: 180px;
    min-width: 180px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    border-right: 1px solid var(--border-color, #E5E7EB);
    display: flex;
    align-items: center;
}

.pw-swim-content {
    flex: 1;
    position: relative;
    padding: 0.5rem 0;
}

/* Task bars */
.pw-task-bar {
    position: absolute;
    height: 24px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s;
    top: 50%;
    transform: translateY(-50%);
}

.pw-task-bar:hover {
    opacity: 0.85;
    z-index: 1;
}

.pw-task-bar-not_started { background: #9CA3AF; }
.pw-task-bar-in_progress { background: #3B82F6; }
.pw-task-bar-completed { background: #22C55E; }
.pw-task-bar-blocked { background: #EF4444; }
.pw-task-bar-cancelled { background: #6B7280; }

/* Milestone markers */
.pw-milestone-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #8B5CF6;
    cursor: pointer;
    z-index: 1;
}

.pw-milestone-marker.achieved {
    background: #22C55E;
}

/* Today line */
.pw-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #EF4444;
    z-index: 3;
}

.pw-today-label {
    position: absolute;
    top: -20px;
    left: -16px;
    font-size: 0.65rem;
    color: #EF4444;
    font-weight: 600;
    white-space: nowrap;
}

/* Legend */
.pw-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pw-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pw-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.pw-legend-diamond {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

/* Tooltip */
.pw-tooltip {
    position: fixed;
    z-index: 100;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
    max-width: 250px;
    pointer-events: none;
}

.pw-tooltip-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.pw-tooltip-meta {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ============================================================
   TASKS COMPONENT
   ============================================================ */

.pw-tasks {
    padding: 1.5rem 0;
    animation: pwFadeIn 0.3s ease;
}

.pw-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pw-tasks-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Filter bar */
.pw-filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.pw-filter-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
}

.pw-filter-btn {
    padding: 0.4rem 0.75rem;
    background: var(--bg-primary, #FFFFFF);
    border: none;
    border-right: 1px solid var(--border-color, #E5E7EB);
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pw-filter-btn:last-child {
    border-right: none;
}

.pw-filter-btn.active {
    background: var(--primary-purple, #8B7EC8);
    color: white;
}

.pw-filter-select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-primary);
}

.pw-filter-search {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    font-size: 0.8rem;
    min-width: 200px;
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-primary);
}

.pw-filter-search:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
}

/* Task list */
.pw-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pw-task-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pw-task-item:hover {
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 2px 8px rgba(139, 126, 200, 0.1);
}

.pw-task-item.selected {
    border-color: var(--primary-purple, #8B7EC8);
    background: rgba(139, 126, 200, 0.05);
}

.pw-task-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.pw-task-status-not_started { background: #9CA3AF; }
.pw-task-status-in_progress { background: #3B82F6; }
.pw-task-status-completed { background: #22C55E; }
.pw-task-status-blocked { background: #EF4444; }
.pw-task-status-cancelled { background: #6B7280; }

.pw-task-info {
    flex: 1;
    min-width: 0;
}

.pw-task-title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-task-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.pw-task-type {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.pw-task-type-manual { background: #F3F4F6; color: #6B7280; }
.pw-task-type-ai_assisted { background: #EDE9FE; color: #7C3AED; }
.pw-task-type-ai_executable { background: #FCE7F3; color: #DB2777; }

.pw-task-due {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pw-task-due.overdue {
    color: #EF4444;
    font-weight: 500;
}

/* Status dropdown */
.pw-status-dropdown {
    position: absolute;
    z-index: 50;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    min-width: 160px;
}

.pw-status-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.pw-status-option:hover {
    background: var(--bg-secondary, #F9FAFB);
}

/* Task detail panel */
.pw-task-detail {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--bg-primary, #FFFFFF);
    border-left: 1px solid var(--border-color, #E5E7EB);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 40;
    padding: 1.5rem;
    overflow-y: auto;
    animation: pwSlideIn 0.3s ease;
}

@keyframes pwSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.pw-task-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.pw-task-detail-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
}

.pw-task-detail h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pw-task-detail-section {
    margin-bottom: 1.25rem;
}

.pw-task-detail-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Create form */
.pw-create-form {
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.pw-form-group {
    margin-bottom: 1rem;
}

.pw-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.pw-form-group input,
.pw-form-group textarea,
.pw-form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-primary);
    box-sizing: border-box;
}

.pw-form-group input:focus,
.pw-form-group textarea:focus,
.pw-form-group select:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
}

.pw-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ============================================================
   FACTORS COMPONENT
   ============================================================ */

.pw-factors {
    padding: 1.5rem 0;
    animation: pwFadeIn 0.3s ease;
}

.pw-factors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.pw-factors-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Factor cards grid */
.pw-factors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.pw-factor-card {
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.pw-factor-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pw-factor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.pw-factor-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pw-factor-category {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pw-factor-category-financial { background: #DBEAFE; color: #1E40AF; }
.pw-factor-category-customer { background: #DCFCE7; color: #166534; }
.pw-factor-category-operational { background: #FEF3C7; color: #92400E; }
.pw-factor-category-growth { background: #EDE9FE; color: #5B21B6; }

.pw-factor-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Factor metric */
.pw-factor-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pw-factor-values {
    flex: 1;
}

.pw-factor-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pw-factor-target {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pw-factor-trend {
    font-size: 1.1rem;
}

.pw-factor-trend-improving { color: #22C55E; }
.pw-factor-trend-declining { color: #EF4444; }
.pw-factor-trend-stable { color: #9CA3AF; }

/* Factor progress bar */
.pw-factor-progress {
    height: 8px;
    background: var(--bg-tertiary, #E5E7EB);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.pw-factor-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pw-factor-progress-on_track { background: #22C55E; }
.pw-factor-progress-at_risk { background: #F59E0B; }
.pw-factor-progress-off_track { background: #EF4444; }
.pw-factor-progress-achieved { background: #8B5CF6; }
.pw-factor-progress-not_started { background: #9CA3AF; }

/* Factor footer */
.pw-factor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pw-factor-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pw-factor-status-on_track { background: #DCFCE7; color: #166534; }
.pw-factor-status-at_risk { background: #FEF3C7; color: #92400E; }
.pw-factor-status-off_track { background: #FEE2E2; color: #991B1B; }
.pw-factor-status-achieved { background: #EDE9FE; color: #5B21B6; }
.pw-factor-status-not_started { background: #F3F4F6; color: #6B7280; }

.pw-factor-weight {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* AI Suggestions */
.pw-factor-suggestions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #E5E7EB);
}

.pw-factor-suggestions-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--primary-purple, #8B7EC8);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: 500;
}

.pw-factor-suggestions-content {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(139, 126, 200, 0.05);
    border-radius: 8px;
    line-height: 1.5;
}

/* Assessing animation */
.pw-assessing {
    animation: pwPulse 1.5s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .pw-home { padding: 1rem; }
    .pw-home-header { flex-direction: column; gap: 1rem; }
    .pw-stats-bar { flex-direction: column; }
    .pw-cards-grid { grid-template-columns: 1fr; }
    .pw-project { padding: 1rem; }
    .pw-project-header { flex-direction: column; }
    .pw-tabs { overflow-x: auto; }
    .pw-create { padding: 1rem; }
    .pw-filter-bar { flex-direction: column; }
    .pw-factors-grid { grid-template-columns: 1fr; }
    .pw-task-detail { width: 100%; }
    .pw-outputs-layout { flex-direction: column; }
    .pw-output-detail { width: 100%; }
}


/* ============================================================
   OUTPUTS COMPONENT
   ============================================================ */

.pw-outputs {
    padding: 1.5rem;
    animation: pwFadeIn 0.3s ease;
}

.pw-outputs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pw-outputs-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1F2937);
    margin: 0;
}

.pw-outputs-actions {
    display: flex;
    gap: 0.5rem;
}

.pw-outputs-generate-dropdown {
    position: relative;
}

.pw-outputs-generate-btn {
    padding: 0.5rem 1rem;
    background: var(--primary-purple, #8B7EC8);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s;
}

.pw-outputs-generate-btn:hover {
    background: #7B6EB8;
}

.pw-outputs-generate-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 20;
    overflow: hidden;
}

.pw-outputs-generate-option {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary, #1F2937);
    transition: background 0.15s;
}

.pw-outputs-generate-option:hover {
    background: var(--bg-hover, #F3F4F6);
}

.pw-outputs-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pw-outputs-filter {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 6px;
    background: #fff;
    font-size: 0.8125rem;
    color: var(--text-primary, #1F2937);
    cursor: pointer;
}

/* Layout */

.pw-outputs-layout {
    display: flex;
    gap: 1.5rem;
}

.pw-outputs-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.pw-output-detail {
    width: 420px;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 10px;
    padding: 1.25rem;
    background: #fff;
    max-height: 80vh;
    overflow-y: auto;
}

/* Output cards */

.pw-output-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pw-output-card:hover {
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 2px 8px rgba(139, 126, 200, 0.1);
}

.pw-output-card--selected {
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 0 0 2px rgba(139, 126, 200, 0.2);
}

.pw-output-card-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.pw-output-type-badge,
.pw-output-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.pw-output-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1F2937);
    margin: 0;
    line-height: 1.3;
}

.pw-output-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #6B7280);
}

.pw-output-link-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #DBEAFE;
    color: #1D4ED8;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Detail panel */

.pw-output-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.pw-output-detail-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1F2937);
    margin: 0;
    flex: 1;
}

.pw-output-detail-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary, #6B7280);
    padding: 0.25rem;
    line-height: 1;
}

.pw-output-detail-close:hover {
    color: var(--text-primary, #1F2937);
}

.pw-output-detail-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pw-output-detail-date {
    font-size: 0.75rem;
    color: var(--text-secondary, #6B7280);
}

.pw-output-detail-content {
    margin-bottom: 1rem;
}

.pw-output-content-preview {
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-primary, #1F2937);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    font-family: inherit;
    margin: 0;
}

.pw-output-edit-title {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--primary-purple, #8B7EC8);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
}

.pw-output-edit-content {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--primary-purple, #8B7EC8);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    min-height: 200px;
}

.pw-output-link-section {
    margin-bottom: 1rem;
}

.pw-output-doc-link {
    color: var(--primary-purple, #8B7EC8);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.pw-output-doc-link:hover {
    text-decoration: underline;
}

/* Detail actions */

.pw-output-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #E5E7EB);
}

.pw-output-action-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 6px;
    background: #fff;
    color: var(--text-primary, #1F2937);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.pw-output-action-btn:hover {
    background: var(--bg-hover, #F3F4F6);
    border-color: var(--text-secondary, #6B7280);
}

.pw-output-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pw-output-action-btn--primary {
    background: var(--primary-purple, #8B7EC8);
    color: #fff;
    border-color: var(--primary-purple, #8B7EC8);
}

.pw-output-action-btn--primary:hover {
    background: #7B6EB8;
}

.pw-output-action-btn--danger {
    color: #EF4444;
    border-color: #FCA5A5;
}

.pw-output-action-btn--danger:hover {
    background: #FEF2F2;
    border-color: #EF4444;
}

/* Gmail dialog */

.pw-output-gmail-dialog {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
}

.pw-output-gmail-dialog-content h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.pw-output-gmail-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #6B7280);
    margin-bottom: 0.75rem;
}

.pw-output-gmail-input {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 6px;
    font-size: 0.875rem;
}

.pw-output-gmail-input:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 0 0 2px rgba(139, 126, 200, 0.2);
}

.pw-output-gmail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Empty and loading states */

.pw-outputs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--text-secondary, #6B7280);
}

.pw-outputs-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary, #6B7280);
}

.pw-outputs-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.pw-outputs-empty h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #1F2937);
}

.pw-outputs-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* Tasks generate dropdown */

.pw-tasks-generate-dropdown {
    position: relative;
    display: inline-block;
}

.pw-tasks-detail-generate-btn {
    padding: 0.4rem 0.75rem;
    background: var(--primary-purple, #8B7EC8);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
}

.pw-tasks-detail-generate-btn:hover {
    background: #7B6EB8;
}

.pw-tasks-generate-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 20;
    overflow: hidden;
}

.pw-tasks-generate-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-primary, #1F2937);
}

.pw-tasks-generate-option:hover {
    background: var(--bg-hover, #F3F4F6);
}

/* ============================================================================
   Insights / Monitoring Component (Phase 3)
   ============================================================================ */

.pw-insights-container {
    padding: 0;
}

.pw-insights-loading,
.pw-insights-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary, #6B7280);
}

.pw-insights-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pw-insights-muted {
    color: var(--text-secondary, #6B7280);
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

/* --- Health Card --- */

.pw-insights-health-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
}

.pw-insights-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pw-insights-health-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.pw-insights-check-btn {
    background: var(--primary-purple, #8B7EC8);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pw-insights-check-btn:hover { opacity: 0.9; }
.pw-insights-check-btn:disabled { opacity: 0.5; cursor: wait; }

.pw-insights-health-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pw-insights-health-score {
    display: flex;
    align-items: baseline;
}

.pw-insights-score-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary, #1F2937);
    line-height: 1;
}

.pw-insights-score-label {
    font-size: 1rem;
    color: var(--text-secondary, #6B7280);
    margin-left: 2px;
}

.pw-insights-health-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pw-insights-trend {
    font-size: 0.8rem;
    font-weight: 500;
}

.pw-insights-trend-up { color: #10B981; }
.pw-insights-trend-down { color: #EF4444; }
.pw-insights-trend-stable { color: var(--text-secondary, #6B7280); }

.pw-insights-last-checked {
    font-size: 0.75rem;
    color: var(--text-tertiary, #9CA3AF);
    margin-left: auto;
}

.pw-insights-ai-summary {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary, #F9FAFB);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary, #1F2937);
}

/* Health badges */
.pw-badge-health-excellent { background: #D1FAE5; color: #065F46; }
.pw-badge-health-good { background: #DBEAFE; color: #1E40AF; }
.pw-badge-health-at_risk { background: #FEF3C7; color: #92400E; }
.pw-badge-health-critical { background: #FEE2E2; color: #991B1B; }
.pw-badge-health-not_assessed { background: #F3F4F6; color: #6B7280; }

/* --- Sparkline --- */

.pw-insights-sparkline {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.pw-insights-sparkline h4,
.pw-insights-sparkline-empty h4 {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pw-insights-sparkline-svg {
    width: 100%;
    height: 60px;
}

.pw-insights-sparkline-empty {
    padding: 1rem 1.25rem;
}

/* --- Alerts --- */

.pw-insights-alerts {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.pw-insights-alerts h4,
.pw-insights-alerts-empty h4 {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pw-insights-alerts-empty {
    padding: 1rem 1.25rem;
}

.pw-insights-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light, #F3F4F6);
    font-size: 0.875rem;
}

.pw-insights-alert:last-child { border-bottom: none; }

.pw-insights-alert-icon { font-size: 0.875rem; }

.pw-insights-alert-title {
    flex: 1;
    color: var(--text-primary, #1F2937);
}

.pw-insights-alert-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #6B7280);
    white-space: nowrap;
}

/* --- Suggestions --- */

.pw-insights-suggestions {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.pw-insights-suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pw-insights-suggestions-header h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.pw-insights-generate-btn {
    background: none;
    border: 1px solid var(--primary-purple, #8B7EC8);
    color: var(--primary-purple, #8B7EC8);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pw-insights-generate-btn:hover {
    background: var(--primary-purple, #8B7EC8);
    color: white;
}

.pw-insights-generate-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.pw-insights-suggestion-card {
    border: 1px solid var(--border-light, #F3F4F6);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.pw-insights-suggestion-top {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.pw-insights-suggestion-title {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pw-insights-suggestion-desc {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #6B7280);
    line-height: 1.4;
}

.pw-insights-suggestion-actions {
    display: flex;
    gap: 0.4rem;
}

.pw-insights-btn-acknowledge,
.pw-insights-btn-apply,
.pw-insights-btn-dismiss {
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pw-insights-btn-acknowledge { background: #DBEAFE; color: #1E40AF; }
.pw-insights-btn-apply { background: #D1FAE5; color: #065F46; }
.pw-insights-btn-dismiss { background: #F3F4F6; color: #6B7280; }

.pw-insights-btn-acknowledge:hover,
.pw-insights-btn-apply:hover,
.pw-insights-btn-dismiss:hover { opacity: 0.8; }

/* Suggestion badges */
.pw-badge-area {
    background: #EDE9FE;
    color: #6D28D9;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: capitalize;
}

.pw-badge-impact-high { background: #FEE2E2; color: #991B1B; font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 4px; }
.pw-badge-impact-medium { background: #FEF3C7; color: #92400E; font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 4px; }
.pw-badge-impact-low { background: #D1FAE5; color: #065F46; font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 4px; }

.pw-badge-effort {
    background: #F3F4F6;
    color: #6B7280;
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* --- Risk Events Timeline --- */

.pw-insights-risk-timeline {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.pw-insights-risk-timeline h4 {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.pw-insights-risk-event {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light, #F3F4F6);
}

.pw-insights-risk-event:last-child { border-bottom: none; }

.pw-insights-risk-icon { font-size: 0.875rem; margin-top: 2px; }

.pw-insights-risk-content {
    flex: 1;
}

.pw-insights-risk-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
    margin-right: 0.4rem;
}

.pw-insights-risk-desc {
    font-size: 0.8rem;
    color: var(--text-primary, #1F2937);
}

.pw-insights-risk-analysis {
    font-size: 0.75rem;
    color: var(--text-secondary, #6B7280);
    margin: 0.25rem 0 0;
    font-style: italic;
}

.pw-insights-risk-date {
    font-size: 0.7rem;
    color: var(--text-tertiary, #9CA3AF);
    white-space: nowrap;
}

/* --- Post-Mortem --- */

.pw-insights-post-mortem {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
}

.pw-insights-post-mortem h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.pw-insights-pm-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pw-insights-pm-metric {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #F9FAFB);
    border-radius: 8px;
    padding: 0.6rem;
}

.pw-insights-pm-label {
    font-size: 0.7rem;
    color: var(--text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pw-insights-pm-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1F2937);
    margin-top: 0.2rem;
}

.pw-insights-variance-over { color: #EF4444; }
.pw-insights-variance-under { color: #10B981; }

.pw-insights-pm-ai {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
    border-radius: 8px;
}

.pw-insights-pm-ai h5 {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-purple, #8B7EC8);
}

.pw-insights-pm-ai p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.pw-insights-pm-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.pw-insights-pm-section h5 {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.pw-insights-pm-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-primary, #1F2937);
}

.pw-insights-pm-notes {
    margin-top: 1rem;
    border-top: 1px solid var(--border-light, #F3F4F6);
    padding-top: 1rem;
}

.pw-insights-pm-notes h5 {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.pw-insights-pm-textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 0.5rem;
}

.pw-insights-pm-textarea:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
}

.pw-insights-save-btn {
    background: var(--primary-purple, #8B7EC8);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pw-insights-save-btn:hover { opacity: 0.9; }


/* ============================================================================
   PlanWare Templates (Phase 4)
   ============================================================================ */

/* Container */
.pw-tpl-container {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Header */
.pw-tpl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pw-tpl-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pw-tpl-back-btn {
    background: none;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.2s;
}

.pw-tpl-back-btn:hover {
    background: var(--bg-hover, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

.pw-tpl-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

/* Templates button in home header */
.pw-home-templates-btn {
    background: none;
    border: 1px solid var(--primary-purple, #8B7EC8);
    color: var(--primary-purple, #8B7EC8);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pw-home-templates-btn:hover {
    background: var(--primary-purple, #8B7EC8);
    color: white;
}

/* Save as Template button */
.pw-project-action-btn-template {
    border-color: var(--primary-purple, #8B7EC8) !important;
    color: var(--primary-purple, #8B7EC8) !important;
}

.pw-project-action-btn-template:hover {
    background: var(--primary-purple, #8B7EC8) !important;
    color: white !important;
}

/* Scope Tabs */
.pw-tpl-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.pw-tpl-tab {
    padding: 0.6rem 1.2rem;
    border: none;
    background: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.pw-tpl-tab:hover {
    color: var(--primary-purple, #8B7EC8);
}

.pw-tpl-tab.active {
    color: var(--primary-purple, #8B7EC8);
    border-bottom-color: var(--primary-purple, #8B7EC8);
    font-weight: 600;
}

/* Toolbar */
.pw-tpl-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.pw-tpl-category-filter {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-primary, white);
    min-width: 160px;
}

.pw-tpl-search {
    flex: 1;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.85rem;
    max-width: 300px;
}

.pw-tpl-search:focus,
.pw-tpl-category-filter:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
}

/* Template Cards Grid */
.pw-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.pw-tpl-card {
    background: var(--bg-primary, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: all 0.2s;
}

.pw-tpl-card:hover {
    border-color: var(--primary-purple, #8B7EC8);
    box-shadow: 0 2px 8px rgba(139, 126, 200, 0.12);
}

.pw-tpl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pw-tpl-card-icon {
    font-size: 1.5rem;
}

.pw-tpl-card-badges {
    display: flex;
    gap: 0.4rem;
}

.pw-tpl-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.pw-tpl-badge-system {
    background: #dbeafe;
    color: #1d4ed8;
}

.pw-tpl-badge-category {
    background: #f3e8ff;
    color: #7c3aed;
}

.pw-tpl-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #1f2937);
}

.pw-tpl-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.pw-tpl-card-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-tertiary, #9ca3af);
}

.pw-tpl-card-rating {
    color: #f59e0b;
}

.pw-tpl-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Buttons */
.pw-tpl-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.pw-tpl-btn-primary {
    background: var(--primary-purple, #8B7EC8);
    color: white;
    border-color: var(--primary-purple, #8B7EC8);
}

.pw-tpl-btn-primary:hover { opacity: 0.9; }
.pw-tpl-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.pw-tpl-btn-secondary {
    background: none;
    border-color: var(--border-color, #e5e7eb);
    color: var(--text-primary, #1f2937);
}

.pw-tpl-btn-secondary:hover {
    border-color: var(--primary-purple, #8B7EC8);
    color: var(--primary-purple, #8B7EC8);
}

.pw-tpl-btn-ghost {
    background: none;
    color: var(--text-secondary, #6b7280);
    border: none;
    padding: 0.4rem 0.6rem;
}

.pw-tpl-btn-ghost:hover { color: var(--text-primary, #1f2937); }

/* Modal */
.pw-tpl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.pw-tpl-modal {
    background: var(--bg-primary, white);
    border-radius: 12px;
    width: 100%;
    max-width: 680px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.pw-tpl-modal-sm { max-width: 480px; }

.pw-tpl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.pw-tpl-modal-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.pw-tpl-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    padding: 0;
    line-height: 1;
}

.pw-tpl-modal-close:hover { color: var(--text-primary, #1f2937); }

.pw-tpl-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.pw-tpl-modal-body h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: var(--primary-purple, #8B7EC8);
}

.pw-tpl-modal-desc {
    font-size: 0.9rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
}

.pw-tpl-modal-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-tertiary, #9ca3af);
    margin: 0.5rem 0;
}

.pw-tpl-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pw-tpl-modal-list li {
    padding: 0.3rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color-light, #f3f4f6);
}

.pw-tpl-modal-list li:last-child { border-bottom: none; }

.pw-tpl-more {
    font-style: italic;
    color: var(--text-tertiary, #9ca3af);
}

.pw-tpl-modal-footer {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Form elements */
.pw-tpl-form-group {
    margin-bottom: 1rem;
}

.pw-tpl-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--text-primary, #1f2937);
}

.pw-tpl-input,
.pw-tpl-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}

.pw-tpl-input:focus,
.pw-tpl-textarea:focus {
    outline: none;
    border-color: var(--primary-purple, #8B7EC8);
}

/* Rating stars */
.pw-tpl-rating-stars {
    display: flex;
    gap: 0.25rem;
    margin: 1rem 0;
}

.pw-tpl-star {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #f59e0b;
    padding: 0;
    transition: transform 0.1s;
}

.pw-tpl-star:hover { transform: scale(1.2); }

/* Empty & Loading States */
.pw-tpl-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #6b7280);
}

.pw-tpl-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.pw-tpl-empty h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    color: var(--text-primary, #1f2937);
}

.pw-tpl-empty p {
    font-size: 0.9rem;
    margin: 0;
}

.pw-tpl-loading {
    text-align: center;
    padding: 3rem;
}

.pw-tpl-error {
    text-align: center;
    padding: 2rem;
    color: #dc2626;
}

/* ================================================================
   Auto-Pilot (Phase 5)
   ================================================================ */

.pw-autopilot-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
}

.pw-autopilot-loading,
.pw-autopilot-error {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #6b7280);
}

.pw-autopilot-error { color: #dc2626; }

/* Control Panel */
.pw-autopilot-panel {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
}

.pw-autopilot-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pw-autopilot-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary, #1f2937);
}

.pw-autopilot-toggle-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pw-autopilot-toggle {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.pw-autopilot-toggle-on {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

/* Autonomy Levels */
.pw-autopilot-levels {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pw-autopilot-level {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.pw-autopilot-level:hover {
    border-color: var(--primary-purple, #8B7EC8);
}

.pw-autopilot-level-active {
    border-color: var(--primary-purple, #8B7EC8);
    background: rgba(139, 126, 200, 0.08);
}

.pw-autopilot-level input { display: none; }

.pw-autopilot-level-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #1f2937);
}

.pw-autopilot-level-desc {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.25rem;
}

/* Feature Toggles */
.pw-autopilot-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pw-autopilot-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.pw-autopilot-last-run {
    font-size: 0.8rem;
    color: var(--text-tertiary, #9ca3af);
}

/* Buttons */
.pw-autopilot-btn {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-primary, #374151);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.pw-autopilot-btn:hover:not(:disabled) { background: var(--bg-hover, #f3f4f6); }
.pw-autopilot-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pw-autopilot-btn-primary {
    background: var(--primary-purple, #8B7EC8);
    color: #fff;
    border-color: var(--primary-purple, #8B7EC8);
}

.pw-autopilot-btn-primary:hover:not(:disabled) { opacity: 0.9; background: var(--primary-purple, #8B7EC8); }

.pw-autopilot-btn-small { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

.pw-autopilot-btn-approve {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.pw-autopilot-btn-reject {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.pw-autopilot-btn-rollback {
    color: #f59e0b;
    border-color: #f59e0b;
}

/* Sections */
.pw-autopilot-section {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem;
}

.pw-autopilot-section h4 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--text-primary, #1f2937);
}

.pw-autopilot-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pw-autopilot-section-header h4 { margin-bottom: 0; }

.pw-autopilot-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9rem;
}

/* Action Cards */
.pw-autopilot-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pw-autopilot-action-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 0.75rem;
}

.pw-autopilot-action-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pw-autopilot-action-icon { font-size: 1.1rem; }

.pw-autopilot-action-title {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary, #1f2937);
}

.pw-autopilot-impact {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.pw-autopilot-impact-low { background: #dcfce7; color: #166534; }
.pw-autopilot-impact-medium { background: #fef9c3; color: #854d0e; }
.pw-autopilot-impact-high { background: #fee2e2; color: #991b1b; }

.pw-autopilot-action-desc,
.pw-autopilot-action-reasoning {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    margin: 0.25rem 0;
    line-height: 1.4;
}

.pw-autopilot-action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Predictions */
.pw-autopilot-prediction-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pw-autopilot-prediction-card {
    text-align: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.pw-autopilot-prediction-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.25rem;
}

.pw-autopilot-prediction-score {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.pw-autopilot-health-excellent { color: #22c55e; }
.pw-autopilot-health-good { color: #3b82f6; }
.pw-autopilot-health-atrisk { color: #f59e0b; }
.pw-autopilot-health-critical { color: #ef4444; }

.pw-autopilot-trajectory {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--text-primary, #374151);
    margin-bottom: 0.5rem;
}

.pw-autopilot-prediction-summary {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    margin: 0.5rem 0;
    line-height: 1.4;
}

.pw-autopilot-at-risk {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.pw-autopilot-at-risk ul {
    margin: 0.25rem 0 0 1.25rem;
    padding: 0;
}

.pw-autopilot-at-risk li {
    margin-bottom: 0.2rem;
    color: var(--text-secondary, #6b7280);
}

/* Recent Log */
.pw-autopilot-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pw-autopilot-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.pw-autopilot-log-item:last-child { border-bottom: none; }

.pw-autopilot-log-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pw-autopilot-log-title {
    font-size: 0.85rem;
    color: var(--text-primary, #374151);
}

.pw-autopilot-log-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-tertiary, #9ca3af);
}

.pw-autopilot-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
}

.pw-autopilot-status-executed,
.pw-autopilot-status-approved { background: #dcfce7; color: #166534; }
.pw-autopilot-status-auto { background: #dbeafe; color: #1e40af; }
.pw-autopilot-status-rejected { background: #fee2e2; color: #991b1b; }
.pw-autopilot-status-rollback { background: #fef9c3; color: #854d0e; }

/* Stats Grid */
.pw-autopilot-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
@media (max-width: 1200px) {
    .pw-autopilot-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .pw-autopilot-stats-grid {
        grid-template-columns: 1fr;
    }
}

.pw-autopilot-stat-card {
    text-align: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.pw-autopilot-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-purple, #8B7EC8);
}

.pw-autopilot-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.2rem;
}