/*
 * FILE: dashboard-sections.css
 * PURPOSE: CSS for Dashboard grouped sections layout
 * SPEC PROJECT: SP-SRUserFlow
 *
 * KEY RESPONSIBILITIES:
 *  - Define section groupings (What's Next, Progress, Action, Admin)
 *  - Provide grid layouts for widgets within sections
 *  - Handle responsive behavior
 *  - Maintain visual hierarchy
 *
 * DEPENDENCIES:
 *  - CSS variables from sparkus-2026.css
 *
 * LAST UPDATED: December 9, 2025 by /go agent
 * CHANGE SUMMARY: Initial creation for E2-MyJourney-Tab (US2.9/US2.10)
 * 
 * NEXT AGENT: May need to add more section types or responsive breakpoints
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   DASHBOARD SECTIONS - Grouped Widget Layout
   Per MISSION.md spec: What's Next → Progress → Action → Admin
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-dashboard-section {
    margin-bottom: var(--sp-spacing-6, 1.5rem);
}

.sp-dashboard-section:last-child {
    margin-bottom: 0;
}

/* Section Headers (optional - for labeled sections) */
.sp-dashboard-section__header {
    display: flex;
    align-items: center;
    gap: var(--sp-spacing-2, 0.5rem);
    margin-bottom: var(--sp-spacing-4, 1rem);
    padding-bottom: var(--sp-spacing-2, 0.5rem);
    border-bottom: 1px solid var(--sp-blue-100, #e5e7eb);
}

.sp-dashboard-section__title {
    font-size: var(--sp-font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--sp-blue-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION TYPES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* What's Next Section - Full width, prominent */
.sp-dashboard-section--whats-next {
    margin-bottom: var(--sp-spacing-8, 2rem);
}

/* Progress Section - Two columns (Program Progress + Package Progress) */
.sp-dashboard-section--progress {
    margin-bottom: var(--sp-spacing-6, 1.5rem);
}

/* Action Section - Main interactive widgets */
.sp-dashboard-section--action {
    margin-bottom: var(--sp-spacing-6, 1.5rem);
}

/* Admin Section - Forms and administrative tasks */
.sp-dashboard-section--admin {
    margin-bottom: var(--sp-spacing-6, 1.5rem);
}

/* Legacy Section - Fallback widgets (hidden by default when new widgets active) */
.sp-dashboard-section--legacy {
    margin-top: var(--sp-spacing-6, 1.5rem);
    padding-top: var(--sp-spacing-4, 1rem);
    border-top: 1px dashed var(--sp-blue-200, #d1d5db);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Full width container */
.sp-dashboard-section__full-width {
    width: 100%;
    margin-bottom: var(--sp-spacing-4, 1rem);
}

.sp-dashboard-section__full-width:last-child {
    margin-bottom: 0;
}

/* Grid container base */
.sp-dashboard-section__grid {
    display: grid;
    gap: var(--sp-spacing-4, 1rem);
    margin-bottom: var(--sp-spacing-4, 1rem);
}

.sp-dashboard-section__grid:last-child {
    margin-bottom: 0;
}

/* 2-column grid */
.sp-dashboard-section__grid--2col {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .sp-dashboard-section__grid--2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3-column grid */
.sp-dashboard-section__grid--3col {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .sp-dashboard-section__grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sp-dashboard-section__grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Auto-fit grid (responsive columns) */
.sp-dashboard-section__grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WIDGET SIZING WITHIN SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Widgets in sections should fill their grid cell */
.sp-dashboard-section .sp-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sp-dashboard-section .sp-widget__body {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EMPTY STATE HANDLING (Minimal - Option B)
   Per MISSION.md spec: Collapse to one line when no content
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-dashboard-section__empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-spacing-3, 0.75rem) var(--sp-spacing-4, 1rem);
    background: var(--sp-blue-50, #f9fafb);
    border-radius: var(--sp-border-radius, 0.5rem);
    border: 1px solid var(--sp-blue-100, #e5e7eb);
}

.sp-dashboard-section__empty-text {
    font-size: var(--sp-font-size-sm, 0.875rem);
    color: var(--sp-blue-500, #6b7280);
    display: flex;
    align-items: center;
    gap: var(--sp-spacing-2, 0.5rem);
}

.sp-dashboard-section__empty-text i {
    color: var(--sp-blue-400, #9ca3af);
}

.sp-dashboard-section__empty-action {
    font-size: var(--sp-font-size-sm, 0.875rem);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    .sp-dashboard-section {
        margin-bottom: var(--sp-spacing-4, 1rem);
    }
    
    .sp-dashboard-section__grid {
        gap: var(--sp-spacing-3, 0.75rem);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATION & TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-dashboard-section {
    animation: fadeInUp 0.3s ease-out;
}

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

/* Staggered animation for sections */
.sp-dashboard-section--whats-next {
    animation-delay: 0ms;
}

.sp-dashboard-section--progress {
    animation-delay: 50ms;
}

.sp-dashboard-section--action {
    animation-delay: 100ms;
}

.sp-dashboard-section--admin {
    animation-delay: 150ms;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
    .sp-dashboard-section {
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .sp-dashboard-section__grid {
        display: block;
    }
    
    .sp-dashboard-section__grid > * {
        margin-bottom: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL PREVENTION (SP-SRUserFlow E13 QA)
   Prevent horizontal overflow on Program Items and widgets
   ═══════════════════════════════════════════════════════════════════════════════ */

.sp-dashboard,
.sp-dashboard-layout,
.sp-dashboard__main,
.sp-dashboard-section {
    overflow-x: hidden;
    max-width: 100%;
}

/* Add slight padding to prevent content touching edges */
.sp-dashboard-section__grid {
    padding-right: var(--sp-spacing-1, 0.25rem);
}

/* Ensure widgets don't overflow */
.sp-dashboard-section .sp-widget,
.sp-dashboard-section .sp-getting-started {
    overflow: hidden;
    word-wrap: break-word;
}

/* Program Progress list items - prevent overflow */
.sp-getting-started__list {
    overflow: hidden;
}

.sp-getting-started__item {
    overflow: hidden;
}

.sp-getting-started__item-content {
    min-width: 0;
    overflow: hidden;
}

.sp-getting-started__item-title,
.sp-getting-started__item-description {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNIFORM ACTION BUTTONS (SP-SRUserFlow E13 QA)
   Consistent button styling across all widgets
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Widget action buttons - uniform size and spacing */
.sp-widget__action,
.sp-widget__footer-link,
.sp-dashboard-card__actions .sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-spacing-2, 0.5rem);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

/* Primary action button style */
.sp-widget__action--primary {
    background: var(--sp-red, #dc3545);
    color: var(--sp-white, #ffffff);
    padding: var(--sp-spacing-2, 0.5rem) var(--sp-spacing-3, 0.75rem);
    border-radius: var(--sp-border-radius, 0.375rem);
}

.sp-widget__action--primary:hover {
    background: var(--sp-red-light, #e35d6a);
    color: var(--sp-white, #ffffff);
}

/* Secondary action button style */
.sp-widget__action--secondary {
    background: transparent;
    color: var(--sp-red, #dc3545);
    padding: var(--sp-spacing-1, 0.25rem) var(--sp-spacing-2, 0.5rem);
    border-radius: var(--sp-border-radius, 0.375rem);
}

.sp-widget__action--secondary:hover {
    background: rgba(220, 53, 69, 0.08);
}

/* Footer link style - consistent across widgets */
.sp-widget__footer-link {
    color: var(--sp-red, #dc3545);
    font-size: 0.875rem;
}

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

.sp-widget__footer-link i {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.sp-widget__footer-link:hover i {
    transform: translateX(2px);
}