/**
 * Dashboard page-specific styles
 */

.tw-stats-grid .tw-stat-card {
    animation-delay: inherit;
}

/* Clickable KPI cards */
.tw-stat-card--clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tw-stat-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.tw-stat-card--clickable:focus-visible {
    outline: 2px solid var(--ds-color-primary-500, #6366f1);
    outline-offset: 2px;
}

/* Loading skeleton */
.tw-stat-loading {
    animation: dashboard-stat-pulse 1.2s ease-in-out infinite;
    color: var(--ds-color-neutral-400, #9ca3af);
}

@keyframes dashboard-stat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Recent collections list */
.dashboard-recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.dashboard-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-color-neutral-200, #e5e7eb);
    transition: background 0.15s ease;
}

.dashboard-recent-item:hover {
    background: var(--ds-color-neutral-50, #f9fafb);
}

.dashboard-recent-info {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    min-width: 0;
}

.dashboard-recent-name {
    font-weight: 600;
    color: var(--ds-color-neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-recent-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-neutral-500);
}

.dashboard-recent-date {
    color: var(--ds-color-neutral-400);
}

.dashboard-recent-actions {
    display: flex;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

.dashboard-recent-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-8) var(--ds-space-4);
    text-align: center;
    color: var(--ds-color-neutral-500);
}

.dashboard-recent-empty i {
    font-size: 2.5rem;
    opacity: 0.5;
}

.dashboard-recent-empty p {
    margin: 0;
}

.dashboard-recent-loading {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-4);
    color: var(--ds-color-neutral-500);
}

.tw-action-card-icon-img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

/* alias kept for action cards — use tw-wine-icon globally */
.tw-action-card-icon .tw-wine-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* System status */
.dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-space-4);
}

.dashboard-status-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    background: var(--ds-color-neutral-50, #f9fafb);
}

.dashboard-status-item > i {
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.dashboard-status-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-status-label {
    font-size: var(--ds-font-size-sm);
    color: var(--ds-color-neutral-500);
}

.dashboard-status-value {
    font-weight: 600;
    color: var(--ds-color-neutral-800);
}

.dashboard-status-reason {
    font-size: var(--ds-font-size-sm, 0.875rem);
    font-weight: 400;
    color: var(--ds-color-neutral-600);
    line-height: 1.3;
}

.dashboard-status-item--ok > i { color: var(--ds-color-success-500, #22c55e); }
.dashboard-status-item--warning > i { color: var(--ds-color-warning-500, #f59e0b); }
.dashboard-status-item--error > i { color: var(--ds-color-danger-500, #ef4444); }
.dashboard-status-item--neutral > i { color: var(--ds-color-neutral-400); }

.dashboard-status-footer {
    margin-top: var(--ds-space-4);
    padding-top: var(--ds-space-3);
    border-top: 1px solid var(--ds-color-neutral-200);
}

.dashboard-status-loading {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    color: var(--ds-color-neutral-500);
    padding: var(--ds-space-4);
}

/* Onboarding checklist */
.dashboard-onboarding-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.dashboard-onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-color-neutral-200);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dashboard-onboarding-step:hover {
    background: var(--ds-color-neutral-50);
    border-color: var(--ds-color-primary-300);
    color: inherit;
}

.dashboard-onboarding-step--done {
    opacity: 0.6;
}

.dashboard-onboarding-step--done .dashboard-onboarding-icon i {
    color: var(--ds-color-success-500, #22c55e);
}

.dashboard-onboarding-icon i {
    font-size: 1.25rem;
    color: var(--ds-color-neutral-400);
}

.dashboard-onboarding-label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-weight: 500;
}

/* Section header with action */
.tw-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

@media (max-width: 767px) {
    .tw-stat-value {
        font-size: var(--ds-font-size-3xl);
    }

    .dashboard-status-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-recent-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-recent-actions {
        width: 100%;
    }

    .dashboard-recent-actions .tw-btn {
        flex: 1;
        justify-content: center;
    }
}