michaelschiemer/resources/css/admin/06-components/_content.css

/**
 * Content Component - Admin Interface
 *
 * Main content area with cards, sections, and containers.
 * Responsive spacing and max-width management.
 */

@layer components {
    /**
     * Main Content Container
     */
    .admin-content {
        padding: var(--spacing-content-padding);
        background-color: var(--content-bg);
        color: var(--content-text);
        overflow-x: hidden;

        /* Wide: Center content with max-width */
        @media (min-width: 1440px) {
            max-width: var(--spacing-content-max-width);
            margin: 0 auto;
            width: 100%;
        }

        /* Mobile: Reduce padding */
        @media (max-width: 767px) {
            padding: var(--spacing-md);
        }
    }

    /**
     * Content Header
     */
    .admin-content__header {
        margin-bottom: var(--spacing-xl);
    }

    .admin-content__title {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        color: var(--content-text);
        margin: 0 0 var(--spacing-sm);

        @media (max-width: 767px) {
            font-size: var(--font-size-2xl);
        }
    }

    .admin-content__description {
        font-size: var(--font-size-base);
        color: var(--content-text);
        opacity: 0.8;
        margin: 0;
        line-height: 1.6;
    }

    /**
     * Content Actions (Header with Actions)
     */
    .admin-content__header--with-actions {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--spacing-md);

        @media (max-width: 767px) {
            flex-direction: column;
            align-items: stretch;
        }
    }

    .admin-content__title-group {
        flex: 1;
        min-width: 0;
    }

    .admin-content__actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        flex-shrink: 0;

        @media (max-width: 767px) {
            width: 100%;
            justify-content: flex-start;
        }
    }

    /**
     * Card Component
     */
    .card {
        background-color: var(--content-bg);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-sm);

        /* Hover effect for interactive cards */
        &.card--interactive {
            cursor: pointer;
            transition: all var(--transition-base);

            &:hover {
                border-color: var(--border-medium);
                box-shadow: var(--shadow-md);
                transform: translateY(-2px);
            }
        }
    }

    .card__header {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--border-light);
    }

    .card__title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--content-text);
        margin: 0;
    }

    .card__subtitle {
        font-size: var(--font-size-sm);
        color: var(--content-text);
        opacity: 0.7;
        margin: var(--spacing-xs) 0 0;
    }

    .card__body {
        margin: 0;
    }

    .card__footer {
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    /**
     * Section Component
     */
    .admin-section {
        margin-bottom: var(--spacing-2xl);

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

    .admin-section__header {
        margin-bottom: var(--spacing-lg);
    }

    .admin-section__title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--content-text);
        margin: 0 0 var(--spacing-xs);
    }

    .admin-section__description {
        font-size: var(--font-size-sm);
        color: var(--content-text);
        opacity: 0.8;
        margin: 0;
    }

    /**
     * Stats Grid (Dashboard Cards)
     */
    .admin-stats-grid {
        display: grid;
        gap: var(--spacing-md);
        grid-template-columns: 1fr;

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

        @media (min-width: 1024px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .admin-stat-card {
        background-color: var(--content-bg);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
    }

    .admin-stat-card__label {
        font-size: var(--font-size-sm);
        color: var(--content-text);
        opacity: 0.7;
        margin: 0 0 var(--spacing-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    .admin-stat-card__value {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        color: var(--content-text);
        margin: 0 0 var(--spacing-sm);
        line-height: 1.2;
    }

    .admin-stat-card__change {
        font-size: var(--font-size-sm);
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);

        &.admin-stat-card__change--positive {
            color: var(--accent-success);
        }

        &.admin-stat-card__change--negative {
            color: var(--accent-error);
        }

        &.admin-stat-card__change--neutral {
            color: var(--content-text);
            opacity: 0.6;
        }
    }

    .admin-stat-card__icon {
        width: 40px;
        height: 40px;
        padding: var(--spacing-sm);
        background-color: var(--bg-secondary);
        border-radius: var(--radius-md);
        color: var(--accent-primary);
        margin-bottom: var(--spacing-md);
    }

    /**
     * Empty State
     */
    .admin-empty-state {
        text-align: center;
        padding: var(--spacing-2xl);
        color: var(--content-text);
    }

    .admin-empty-state__icon {
        width: 64px;
        height: 64px;
        margin: 0 auto var(--spacing-lg);
        opacity: 0.4;
    }

    .admin-empty-state__title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        margin: 0 0 var(--spacing-sm);
    }

    .admin-empty-state__description {
        font-size: var(--font-size-base);
        opacity: 0.8;
        margin: 0 0 var(--spacing-lg);
    }

    .admin-empty-state__action {
        /* Button styles inherited */
    }

    /**
     * Loading State
     */
    .admin-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-2xl);
        color: var(--content-text);
    }

    .admin-loading__spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-light);
        border-top-color: var(--accent-primary);
        border-radius: 50%;
        animation: admin-spin 0.8s linear infinite;
    }

    .admin-loading__text {
        margin-top: var(--spacing-md);
        font-size: var(--font-size-sm);
        opacity: 0.8;
    }

    @keyframes admin-spin {
        to {
            transform: rotate(360deg);
        }
    }
}