/*
 * =============================================================================
 * Copyright (c) 2026 Paseo Platform LLC. All rights reserved.
 *
 * CONFIDENTIAL AND PROPRIETARY
 *
 * This file is part of the Paseo Platform software system and constitutes
 * proprietary trade secret information of Paseo Platform LLC. This source
 * code is protected under applicable trade secret laws and may not be
 * copied, modified, distributed, or disclosed without the express written
 * permission of Paseo Platform LLC.
 *
 * For licensing inquiries: www.paseoplatform.com
 * =============================================================================
 */

/**
 * Paseo Action - Dashboard & Widget Styles
 * Section 4.2: Dashboard Layout
 * Responsive grid with stat cards and widgets
 * Version: 3.0.0
 */

/* ===================================================================
   DASHBOARD LAYOUT (Section 4.2.1)
   =================================================================== */

.dashboard {
    padding: 24px;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-title {
    font-size: 24px;
    font-weight: var(--font-bold, 700);
    color: var(--color-gray-800, #1F2937);
    margin: 0;
}

.dashboard-subtitle {
    font-size: 14px;
    color: var(--color-gray-500, #6B7280);
    margin-top: 4px;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Date range selector */
.dashboard-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-white, #FFFFFF);
    border: 1px solid var(--color-gray-200, #E1E7ED);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    color: var(--color-gray-700, #374151);
    cursor: pointer;
    transition: border-color var(--transition-fast, 0.15s) ease;
}

.dashboard-date-range:hover {
    border-color: var(--color-primary, #4527a0);
}

.dashboard-date-range i {
    color: var(--color-gray-400, #9AA5B1);
}

/* ===================================================================
   STATS GRID (Section 4.2.2)
   4-column grid on desktop, responsive breakpoints
   =================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

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

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   STAT CARD (Section 4.2.2)
   White background, 8px radius, subtle shadow
   =================================================================== */

.stat-card {
    background: var(--color-white, #FFFFFF);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-100, #F0F3F6);
    transition: transform var(--transition-fast, 0.15s) ease,
                box-shadow var(--transition-fast, 0.15s) ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-card-icon.primary {
    background: var(--color-primary-container, #E1E7ED);
    color: var(--color-primary, #4527a0);
}

.stat-card-icon.accent {
    background: rgba(2, 136, 209, 0.15);
    color: var(--color-accent, #0288d1);
}

.stat-card-icon.success {
    background: var(--color-success-light, #D1FAE5);
    color: var(--color-success, #10B981);
}

.stat-card-icon.danger {
    background: var(--color-danger-light, #FEE2E2);
    color: var(--color-danger, #EF4444);
}

.stat-card-icon.warning {
    background: var(--color-warning-light, #FEF3C7);
    color: var(--color-warning, #F59E0B);
}

.stat-card-icon.info {
    background: var(--color-info-light, #DBEAFE);
    color: var(--color-info, #3B82F6);
}

.stat-card-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: var(--font-medium, 500);
    padding: 4px 8px;
    border-radius: var(--radius-sm, 4px);
}

.stat-card-trend.up {
    color: var(--color-success-dark, #065F46);
    background: var(--color-success-light, #D1FAE5);
}

.stat-card-trend.down {
    color: var(--color-danger-dark, #991B1B);
    background: var(--color-danger-light, #FEE2E2);
}

.stat-card-trend.neutral {
    color: var(--color-gray-600, #4B5563);
    background: var(--color-gray-100, #F0F3F6);
}

.stat-card-body {
    margin-bottom: 8px;
}

.stat-card-value {
    font-size: 32px;
    font-weight: var(--font-bold, 700);
    color: var(--color-gray-800, #1F2937);
    line-height: 1.2;
}

.stat-card-value.currency::before {
    content: "$";
    font-size: 20px;
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-500, #6B7280);
    margin-right: 2px;
}

.stat-card-label {
    font-size: 14px;
    font-weight: var(--font-medium, 500);
    color: var(--color-gray-500, #6B7280);
}

.stat-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-100, #F0F3F6);
    margin-top: 12px;
}

.stat-card-link {
    font-size: 13px;
    font-weight: var(--font-medium, 500);
    color: var(--color-primary, #4527a0);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition-fast, 0.15s) ease;
}

.stat-card-link:hover {
    color: var(--color-primary-dark, #311b92);
}

/* ===================================================================
   WIDGET GRID (Section 4.2.3)
   =================================================================== */

.widget-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.widget-col-4 {
    grid-column: span 4;
}

.widget-col-6 {
    grid-column: span 6;
}

.widget-col-8 {
    grid-column: span 8;
}

.widget-col-12 {
    grid-column: span 12;
}

@media (max-width: 1200px) {
    .widget-col-4 {
        grid-column: span 6;
    }

    .widget-col-8 {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .widget-col-4,
    .widget-col-6,
    .widget-col-8 {
        grid-column: span 12;
    }
}

/* ===================================================================
   WIDGET CARD
   =================================================================== */

.widget-card {
    background: var(--color-white, #FFFFFF);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-100, #F0F3F6);
    overflow: hidden;
}

.widget-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-gray-100, #F0F3F6);
}

.widget-card-title {
    font-size: 16px;
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-800, #1F2937);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-card-title i {
    color: var(--color-gray-400, #9AA5B1);
}

.widget-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-card-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-gray-400, #9AA5B1);
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease,
                color var(--transition-fast, 0.15s) ease;
}

.widget-card-action:hover {
    background: var(--color-gray-100, #F0F3F6);
    color: var(--color-gray-600, #4B5563);
}

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

.widget-card-body.no-padding {
    padding: 0;
}

.widget-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--color-gray-100, #F0F3F6);
    background: var(--color-gray-50, #F9FAFB);
}

/* ===================================================================
   QUICK ACTIONS WIDGET
   =================================================================== */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 576px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: var(--color-gray-50, #F9FAFB);
    border: 1px solid var(--color-gray-100, #F0F3F6);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    color: var(--color-gray-700, #374151);
    transition: background var(--transition-fast, 0.15s) ease,
                border-color var(--transition-fast, 0.15s) ease,
                transform var(--transition-fast, 0.15s) ease;
}

.quick-action:hover {
    background: var(--color-white, #FFFFFF);
    border-color: var(--color-primary, #4527a0);
    transform: translateY(-2px);
}

.quick-action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-container, #E1E7ED);
    color: var(--color-primary, #4527a0);
    border-radius: var(--radius-md, 8px);
    font-size: 24px;
}

.quick-action:hover .quick-action-icon {
    background: var(--color-primary, #4527a0);
    color: var(--color-white, #FFFFFF);
}

.quick-action-label {
    font-size: 14px;
    font-weight: var(--font-medium, 500);
    text-align: center;
}

/* ===================================================================
   ACTIVITY LIST WIDGET
   =================================================================== */

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

.activity-item {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-gray-100, #F0F3F6);
    transition: background var(--transition-fast, 0.15s) ease;
}

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

.activity-item:hover {
    background: var(--color-gray-50, #F9FAFB);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.activity-icon.create {
    background: var(--color-success-light, #D1FAE5);
    color: var(--color-success, #10B981);
}

.activity-icon.update {
    background: var(--color-info-light, #DBEAFE);
    color: var(--color-info, #3B82F6);
}

.activity-icon.complete {
    background: var(--color-primary-container, #E1E7ED);
    color: var(--color-primary, #4527a0);
}

.activity-icon.alert {
    background: var(--color-warning-light, #FEF3C7);
    color: var(--color-warning, #F59E0B);
}

.activity-icon.error {
    background: var(--color-danger-light, #FEE2E2);
    color: var(--color-danger, #EF4444);
}

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

.activity-text {
    font-size: 14px;
    color: var(--color-gray-700, #374151);
    margin-bottom: 4px;
}

.activity-text strong {
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-800, #1F2937);
}

.activity-time {
    font-size: 12px;
    color: var(--color-gray-400, #9AA5B1);
}

/* ===================================================================
   TASK LIST WIDGET
   =================================================================== */

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

.task-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-gray-100, #F0F3F6);
}

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

.task-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300, #D1D5DB);
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease,
                border-color var(--transition-fast, 0.15s) ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.task-checkbox:hover {
    border-color: var(--color-primary, #4527a0);
}

.task-checkbox.checked {
    background: var(--color-primary, #4527a0);
    border-color: var(--color-primary, #4527a0);
    color: var(--color-white, #FFFFFF);
}

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

.task-title {
    font-size: 14px;
    color: var(--color-gray-700, #374151);
    margin-bottom: 4px;
}

.task-item.completed .task-title {
    text-decoration: line-through;
    color: var(--color-gray-400, #9AA5B1);
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--color-gray-400, #9AA5B1);
}

.task-due {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-due.overdue {
    color: var(--color-danger, #EF4444);
}

.task-priority {
    padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
    font-weight: var(--font-medium, 500);
}

.task-priority.high {
    background: var(--color-danger-light, #FEE2E2);
    color: var(--color-danger-dark, #991B1B);
}

.task-priority.medium {
    background: var(--color-warning-light, #FEF3C7);
    color: var(--color-warning-dark, #92400E);
}

.task-priority.low {
    background: var(--color-success-light, #D1FAE5);
    color: var(--color-success-dark, #065F46);
}

/* ===================================================================
   CHART WIDGET
   =================================================================== */

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-gray-100, #F0F3F6);
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-gray-600, #4B5563);
}

.chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* ===================================================================
   CALENDAR WIDGET
   =================================================================== */

.calendar-widget {
    padding: 16px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.calendar-title {
    font-size: 16px;
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-800, #1F2937);
}

.calendar-nav {
    display: flex;
    gap: 4px;
}

.calendar-nav button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-gray-500, #6B7280);
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease;
}

.calendar-nav button:hover {
    background: var(--color-gray-100, #F0F3F6);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day-header {
    text-align: center;
    font-size: 12px;
    font-weight: var(--font-medium, 500);
    color: var(--color-gray-400, #9AA5B1);
    padding: 8px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-gray-700, #374151);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s) ease;
}

.calendar-day:hover {
    background: var(--color-gray-100, #F0F3F6);
}

.calendar-day.other-month {
    color: var(--color-gray-300, #D1D5DB);
}

.calendar-day.today {
    background: var(--color-primary, #4527a0);
    color: var(--color-white, #FFFFFF);
    font-weight: var(--font-semibold, 600);
}

.calendar-day.has-event::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--color-accent, #0288d1);
    border-radius: 50%;
}

.calendar-day {
    position: relative;
}

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

.progress-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

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

.progress-label {
    font-size: 14px;
    font-weight: var(--font-medium, 500);
    color: var(--color-gray-700, #374151);
}

.progress-value {
    font-size: 14px;
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-800, #1F2937);
}

.progress-bar {
    height: 8px;
    background: var(--color-gray-100, #F0F3F6);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    transition: width var(--transition-normal, 0.2s) ease;
}

.progress-fill.primary {
    background: var(--color-primary, #4527a0);
}

.progress-fill.accent {
    background: var(--color-accent, #0288d1);
}

.progress-fill.success {
    background: var(--color-success, #10B981);
}

.progress-fill.warning {
    background: var(--color-warning, #F59E0B);
}

.progress-fill.danger {
    background: var(--color-danger, #EF4444);
}

/* ===================================================================
   DARK MODE SUPPORT
   =================================================================== */

[data-theme="dark"] .dashboard-title {
    color: var(--dark-on-surface, #F9FAFB);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .widget-card {
    background: var(--dark-surface, #1F2937);
    border-color: var(--dark-border, #374151);
}

[data-theme="dark"] .stat-card-value {
    color: var(--dark-on-surface, #F9FAFB);
}

[data-theme="dark"] .widget-card-title {
    color: var(--dark-on-surface, #F9FAFB);
}

[data-theme="dark"] .activity-item:hover,
[data-theme="dark"] .quick-action {
    background: var(--dark-background, #111827);
}

[data-theme="dark"] .calendar-day.today {
    background: var(--color-accent, #0288d1);
    color: var(--color-primary-dark, #311b92);
}