@use '../abstracts/mixins' as *;

.dashboard {
    &__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }
    &__row {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--space-4);
        margin-bottom: var(--space-5);

        @include media-down(lg) { grid-template-columns: 1fr; }
    }
    &__chart { min-height: 320px; }
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;

    &:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }

    &__head { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
    &__icon {
        width: 1.5rem; height: 1.5rem;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--radius-sm);
        background: var(--color-primary-soft);
        color: var(--color-primary);
    }
    &__label { font-weight: 500; }
    &__value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; }
    &__trend {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        font-size: var(--fs-xs);
        color: var(--color-text-muted);

        &--up   { color: var(--color-success); }
        &--down { color: var(--color-danger); }
    }
    &__help { color: var(--color-text-muted); font-size: var(--fs-xs); margin: 0; }

    &--tone-success .stat__icon { background: rgba(22,163,74,.12); color: var(--color-success); }
    &--tone-warning .stat__icon { background: rgba(217,119,6,.12); color: var(--color-warning); }
    &--tone-danger  .stat__icon { background: rgba(220,38,38,.12); color: var(--color-danger); }
    &--tone-info    .stat__icon { background: rgba(14,165,233,.12); color: var(--color-info); }
    &--tone-muted   .stat__icon { background: var(--color-surface-alt); color: var(--color-text-muted); }
}

.quick-actions {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;

    &__item {
        position: relative;
        display: flex; align-items: center; gap: var(--space-3);
        padding: var(--space-3);
        border-bottom: 1px solid var(--color-border);

        &:last-child { border-bottom: 0; }
        &.is-disabled { color: var(--color-text-muted); }
    }
    &__icon {
        width: 2rem; height: 2rem;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--radius-md);
        background: var(--color-primary-soft);
        color: var(--color-primary);
    }
    &__label { font-weight: 600; display: block; }
    &__hint { color: var(--color-text-muted); font-size: var(--fs-xs); }
}

.health-list {
    list-style: none;
    margin: 0; padding: 0;

    &__item {
        display: flex; justify-content: space-between; align-items: center;
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
        font-size: var(--fs-sm);

        &:last-child { border-bottom: 0; }
    }
}