/*
 * FILE: widgets.css
 * PURPOSE: Enhanced widget component styles for SP-SRUserFlow
 * SPEC PROJECT: SP-SRUserFlow
 *
 * KEY RESPONSIBILITIES:
 *  - Base widget expand/collapse behavior
 *  - Widget variants (list, progress, timeline, compact)
 *  - Empty state patterns
 *  - Loading and error states
 *  - Smooth animations
 *
 * DEPENDENCIES:
 *  - sparkus-2026.css (CSS variables)
 *
 * LAST UPDATED: December 9, 2025 by /go agent
 * CHANGE SUMMARY: Initial creation for E9-Widget-Components
 * 
 * NEXT AGENT: May need dark mode support
 */

/* ============================================
   WIDGET BASE ENHANCEMENTS
   ============================================ */

/* Widget Container - Enhanced */
.sp-widget {
    background: var(--sp-card-bg);
    border: 1px solid var(--sp-card-border);
    border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-card);
    margin-bottom: var(--sp-space-4);
    overflow: hidden;
    transition: box-shadow var(--sp-transition-fast);
}

.sp-widget:hover {
    box-shadow: var(--sp-shadow-sm);
}

/* Widget Header */
.sp-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-space-4) var(--sp-space-5);
    cursor: pointer;
    transition: background var(--sp-transition-fast);
    user-select: none;
}

.sp-widget__header:hover {
    background: var(--sp-blue-50);
}

.sp-widget__header:focus-visible {
    outline: 2px solid var(--sp-red);
    outline-offset: -2px;
}

.sp-widget__header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
    min-width: 0;
}

.sp-widget__header-right {
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
    flex-shrink: 0;
}

/* Widget Icon */
.sp-widget__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sp-radius-md);
    font-size: 1rem;
    flex-shrink: 0;
}

.sp-widget__icon--primary {
    background: var(--sp-gradient-primary);
    color: var(--sp-white);
}

.sp-widget__icon--secondary {
    background: var(--sp-gradient-secondary);
    color: var(--sp-white);
}

.sp-widget__icon--success {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: var(--sp-white);
}

.sp-widget__icon--warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: var(--sp-white);
}

.sp-widget__icon--info {
    background: var(--sp-blue-100);
    color: var(--sp-blue-600);
}

/* Widget Title */
.sp-widget__title {
    font-size: 0.9375rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-text-dark);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Widget Badge */
.sp-widget__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-space-2);
    font-size: 0.6875rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-text-muted);
    background: var(--sp-blue-50);
    border-radius: var(--sp-radius-full);
    white-space: nowrap;
}

/* Widget Action Button */
.sp-widget__action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-1);
    padding: var(--sp-space-2) var(--sp-space-3);
    font-size: 0.8125rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-red);
    background: var(--sp-red-lighter);
    border: none;
    border-radius: var(--sp-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--sp-transition-fast);
}

.sp-widget__action:hover {
    background: var(--sp-red);
    color: var(--sp-white);
}

.sp-widget__action--link {
    background: transparent;
    padding: 0;
}

.sp-widget__action--link:hover {
    background: transparent;
    color: var(--sp-red-light);
}

/* Widget Toggle */
.sp-widget__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--sp-text-muted);
    transition: transform 0.3s ease;
}

.sp-widget__toggle--expanded {
    transform: rotate(180deg);
}

/* Widget Body */
.sp-widget__body {
    padding: 0 var(--sp-space-5) var(--sp-space-5);
}

/* Widget Footer */
.sp-widget__footer {
    padding: var(--sp-space-3) var(--sp-space-5);
    background: var(--sp-blue-50);
    border-top: 1px solid var(--sp-card-border);
}

.sp-widget__footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-2);
    font-size: 0.8125rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-red);
    text-decoration: none;
    transition: color var(--sp-transition-fast);
}

.sp-widget__footer-link:hover {
    color: var(--sp-red-light);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.sp-widget--empty {
    background: var(--sp-blue-50);
}

.sp-widget--empty .sp-widget__header {
    cursor: default;
    padding: var(--sp-space-3) var(--sp-space-5);
}

.sp-widget--empty .sp-widget__header:hover {
    background: transparent;
}

.sp-widget__header--minimal {
    gap: var(--sp-space-3);
}

.sp-widget__empty-text {
    font-size: 0.875rem;
    color: var(--sp-text-muted);
    margin-left: var(--sp-space-1);
}

/* ============================================
   LIST WIDGET VARIANT
   ============================================ */

.sp-widget--list .sp-widget__body {
    padding: 0;
}

.sp-widget__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-widget__list-item {
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
    padding: var(--sp-space-4) var(--sp-space-5);
    border-bottom: 1px solid var(--sp-card-border);
    transition: background var(--sp-transition-fast);
}

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

.sp-widget__list-item:hover {
    background: var(--sp-blue-50);
}

.sp-widget__list-item--clickable {
    cursor: pointer;
}

.sp-widget__list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--sp-blue-50);
    border-radius: var(--sp-radius-md);
    color: var(--sp-blue-600);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.sp-widget__list-content {
    flex: 1;
    min-width: 0;
}

.sp-widget__list-title {
    font-size: 0.9375rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-text-dark);
    margin: 0 0 2px;
}

.sp-widget__list-meta {
    font-size: 0.8125rem;
    color: var(--sp-text-muted);
}

.sp-widget__list-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-1);
    padding: 2px var(--sp-space-2);
    font-size: 0.6875rem;
    font-weight: var(--sp-font-weight-medium);
    border-radius: var(--sp-radius-full);
    white-space: nowrap;
}

.sp-widget__list-status--pending {
    background: var(--sp-warning-light);
    color: #b45309;
}

.sp-widget__list-status--complete {
    background: var(--sp-success-light);
    color: #047857;
}

.sp-widget__list-status--overdue {
    background: var(--sp-danger-light);
    color: #b91c1c;
}

.sp-widget__list-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--sp-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--sp-radius-md);
    cursor: pointer;
    transition: all var(--sp-transition-fast);
}

.sp-widget__list-action:hover {
    background: var(--sp-blue-100);
    color: var(--sp-text-dark);
}

/* ============================================
   PROGRESS WIDGET VARIANT
   ============================================ */

.sp-widget--progress .sp-widget__progress-bar {
    height: 8px;
    background: var(--sp-blue-100);
    border-radius: var(--sp-radius-full);
    overflow: hidden;
    margin-bottom: var(--sp-space-4);
}

.sp-widget__progress-fill {
    height: 100%;
    background: var(--sp-gradient-primary);
    border-radius: var(--sp-radius-full);
    transition: width 0.5s ease;
}

.sp-widget__progress-text {
    font-size: 0.8125rem;
    color: var(--sp-text-muted);
    margin-bottom: var(--sp-space-3);
}

.sp-widget__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-widget__checklist-item {
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
    padding: var(--sp-space-2) 0;
    font-size: 0.9375rem;
    color: var(--sp-text-primary);
}

.sp-widget__checklist-item--complete {
    color: var(--sp-text-muted);
}

.sp-widget__checklist-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.sp-widget__checklist-icon--complete {
    color: var(--sp-success);
}

.sp-widget__checklist-icon--pending {
    color: var(--sp-blue-300);
}

/* ============================================
   COMPACT WIDGET VARIANT
   ============================================ */

.sp-widget--compact .sp-widget__header {
    padding: var(--sp-space-3) var(--sp-space-4);
}

.sp-widget--compact .sp-widget__body {
    padding: 0 var(--sp-space-4) var(--sp-space-3);
}

.sp-widget--compact .sp-widget__icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

.sp-widget--compact .sp-widget__title {
    font-size: 0.875rem;
}

/* ============================================
   LOADING STATE
   ============================================ */

.sp-widget--loading .sp-widget__body {
    position: relative;
    min-height: 100px;
}

.sp-widget__skeleton {
    animation: sp-skeleton-pulse 1.5s ease-in-out infinite;
}

.sp-widget__skeleton-line {
    height: 12px;
    background: var(--sp-blue-100);
    border-radius: var(--sp-radius-sm);
    margin-bottom: var(--sp-space-2);
}

.sp-widget__skeleton-line--short {
    width: 60%;
}

.sp-widget__skeleton-line--medium {
    width: 80%;
}

@keyframes sp-skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================
   ERROR STATE
   ============================================ */

.sp-widget--error .sp-widget__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-space-6);
    text-align: center;
}

.sp-widget__error-icon {
    font-size: 2rem;
    color: var(--sp-danger);
    margin-bottom: var(--sp-space-3);
}

.sp-widget__error-message {
    font-size: 0.875rem;
    color: var(--sp-text-muted);
    margin-bottom: var(--sp-space-4);
}

.sp-widget__error-retry {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-2);
    padding: var(--sp-space-2) var(--sp-space-4);
    font-size: 0.8125rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-red);
    background: var(--sp-red-lighter);
    border: none;
    border-radius: var(--sp-radius-md);
    cursor: pointer;
    transition: all var(--sp-transition-fast);
}

.sp-widget__error-retry:hover {
    background: var(--sp-red);
    color: var(--sp-white);
}

/* ============================================
   ACCORDION WITHIN WIDGET
   ============================================ */

.sp-widget__accordion {
    border-top: 1px solid var(--sp-card-border);
    margin-top: var(--sp-space-3);
}

.sp-widget__accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-space-3) 0;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: var(--sp-font-weight-medium);
    color: var(--sp-text-secondary);
    transition: color var(--sp-transition-fast);
}

.sp-widget__accordion-header:hover {
    color: var(--sp-text-dark);
}

.sp-widget__accordion-toggle {
    transition: transform 0.2s ease;
}

.sp-widget__accordion-toggle--expanded {
    transform: rotate(180deg);
}

.sp-widget__accordion-content {
    padding-bottom: var(--sp-space-3);
}

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

@media (max-width: 640px) {
    .sp-widget__header {
        padding: var(--sp-space-3) var(--sp-space-4);
    }
    
    .sp-widget__body {
        padding: 0 var(--sp-space-4) var(--sp-space-4);
    }
    
    .sp-widget__footer {
        padding: var(--sp-space-3) var(--sp-space-4);
    }
    
    .sp-widget__icon {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
    
    .sp-widget__title {
        font-size: 0.875rem;
    }
    
    .sp-widget__badge {
        display: none;
    }
    
    .sp-widget__action span {
        display: none;
    }
    
    .sp-widget__action {
        padding: var(--sp-space-2);
    }
}