/* =================================================================
   DASHBOARD.CSS — Dashboard page styles
   ================================================================= */

.dashboard {
    padding-top: var(--space-xl, 2.5rem);
    padding-bottom: var(--space-xl, 2.5rem);
}

/* Header */
.dashboard_header {
    margin-bottom: var(--space-lg, 1.5rem);
}

.dashboard_title {
    font-size: var(--fs-xl, 1.5rem);
    font-weight: var(--fw-bold, 700);
    color: var(--clr-text);
    margin: 0;
}

.dashboard_subtitle {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--clr-text-muted);
    margin: var(--space-xs, 0.25rem) 0 0;
}

/* Summary cards grid */
.dashboard_cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md, 1rem);
    margin-bottom: var(--space-xl, 2.5rem);
}

.card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm, 0.75rem);
    padding: var(--space-md, 1rem);
    background-color: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md, 0.5rem);
    transition: border-color var(--transition);
}

.card:hover {
    border-color: var(--clr-text-muted);
}

a.card {
    text-decoration: none;
    color: inherit;
}

a.card:hover,
a.card:focus-visible {
    border-color: var(--clr-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-accent) 20%, transparent);
}

/* Card icon circles */
.card_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md, 0.5rem);
    flex-shrink: 0;
}

.card_icon--sales  { background-color: rgba(16, 185, 129, 0.1); color: #10b981; }
.card_icon--orders { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.card_icon--stock  { background-color: rgba(139, 92, 246, 0.1);  color: #8b5cf6; }
.card_icon--alerts { background-color: rgba(245, 158, 11, 0.1);  color: #f59e0b; }

.card_body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.card_label {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--clr-text-muted);
    font-weight: var(--fw-medium, 500);
}

.card_value {
    font-size: var(--fs-lg, 1.25rem);
    font-weight: var(--fw-bold, 700);
    color: var(--clr-text);
}

/* Sections (quick actions, activity) */
.dashboard_section {
    margin-bottom: var(--space-xl, 2.5rem);
}

.dashboard_section-title {
    font-size: var(--fs-base, 1rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--clr-text);
    margin: 0 0 var(--space-sm, 0.75rem);
}

/* Quick action buttons */
.dashboard_actions {
    display: flex;
    gap: var(--space-sm, 0.75rem);
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.375rem);
    padding: 0.5em 1.25em;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-semibold, 600);
    color: var(--clr-inverse);
    background-color: var(--clr-accent);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.action-btn:hover,
.action-btn:focus-visible {
    background-color: var(--clr-accent-hover);
    color: var(--clr-inverse);
}

.action-btn--outline {
    background-color: transparent;
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.action-btn--outline:hover,
.action-btn--outline:focus-visible {
    background-color: var(--clr-surface);
    color: var(--clr-text);
}

/* Empty state */
.dashboard_empty {
    padding: var(--space-lg, 1.5rem);
    background-color: var(--clr-bg);
    border: 1px dashed var(--clr-border);
    border-radius: var(--radius-md, 0.5rem);
    text-align: center;
}

.dashboard_empty p {
    margin: 0;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--clr-text-muted);
}

/* Quick KPI trends */
.dashboard_trends {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md, 1rem);
}

.trend_card {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--clr-bg);
    padding: var(--space-md, 1rem);
    display: grid;
    gap: 0.25rem;
}

.trend_label {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--clr-text-muted);
    font-weight: var(--fw-medium, 500);
}

.trend_value {
    font-size: var(--fs-lg, 1.25rem);
    color: var(--clr-text);
}

.trend_delta {
    margin: 0;
    font-size: var(--fs-xs, 0.75rem);
}

.trend_delta--up {
    color: var(--clr-success);
}

.trend_delta--down {
    color: var(--clr-error);
}

.trend_delta--flat {
    color: var(--clr-text-muted);
}

/* Responsive: tablets */
@media (max-width: 56.25em) {
    .dashboard_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard_trends {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: mobile */
@media (max-width: 37.4375em) {
    .dashboard_cards {
        grid-template-columns: 1fr;
    }

    .dashboard_trends {
        grid-template-columns: 1fr;
    }

    .dashboard_actions {
        flex-direction: column;
    }

    .action-btn {
        justify-content: center;
        width: 100%;
    }
}

.dashboard_analytics-link {
    margin: var(--space-md, 1rem) 0 0;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--clr-text-muted);
    text-align: right;
}

.dashboard_analytics-link a {
    color: var(--clr-accent);
    font-weight: var(--fw-medium, 500);
}

.dashboard_analytics-link a:hover {
    color: var(--clr-accent-hover);
}