// =============================================================================
// Comments Press Zone - Settings, Tabs & Moderation Styles
// =============================================================================
// Converted from main.css lines 1700-2500
// Contains: Settings panel, tabs component, tag input, moderation queue,
// dashboard grid, lists, charts, and activity components.
// =============================================================================


// =============================================================================
// SETTINGS COMPONENT
// =============================================================================

.presszone-comments-settings {
    // Settings Tabs (pill-style)
    &__tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 24px;
        background: $presszone-comments-surface;
        border-radius: $presszone-comments-radius;
        padding: 4px;

        @include dark-mode-class {
            background: $presszone-comments-surface-dark;
        }
    }

    // Individual Tab Button
    &__tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        background: none;
        border: none;
        border-radius: $presszone-comments-radius;
        color: $presszone-comments-text-muted;
        cursor: pointer;
        transition: all $presszone-comments-duration-fast;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }

        &:hover {
            color: $presszone-comments-text;

            @include dark-mode-class {
                color: $presszone-comments-text-dark;
            }
        }

        &--active {
            background: $presszone-comments-primary-dim;
            color: $presszone-comments-primary;

            @include dark-mode-class {
                background: $presszone-comments-primary-dim-dark;
                color: $presszone-comments-primary-dark;
            }
        }
    }

    // Settings Panel Card
    &__panel {
        background: $presszone-comments-surface;
        border-radius: $presszone-comments-radius-lg;
        padding: 24px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;

        @include dark-mode-class {
            background: $presszone-comments-surface-dark;
        }

        &:hover {
            transform: translateY(-2px);
            box-shadow: $presszone-comments-shadow-hover;

            @include dark-mode-class {
                box-shadow: $presszone-comments-shadow-hover-dark;
            }
        }
    }

    // Section Title
    &__section-title {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: $presszone-comments-primary;
        margin: 0 0 16px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid $presszone-comments-border;

        @include dark-mode-class {
            color: $presszone-comments-primary-dark;
            border-bottom-color: $presszone-comments-border-dark;
        }

        &:not(:first-child) {
            margin-top: 28px;
        }
    }

    // Footer
    &__footer {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid $presszone-comments-border;

        @include dark-mode-class {
            border-top-color: $presszone-comments-border-dark;
        }
    }
}

// Settings Subset (indented nested options)
.presszone-comments-settings-subset {
    padding-inline-start: 24px;
    margin-top: 16px;
    border-inline-start: 2px solid $presszone-comments-border;

    @include dark-mode-class {
        border-inline-start-color: $presszone-comments-border-dark;
    }
}

// Settings Nested Options (for checkboxes under toggle)
.presszone-comments-settings-nested {
    padding-inline-start: 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-inline-start: 2px solid $presszone-comments-border;
    animation: presszone-comments-slide-in-up $presszone-comments-duration-normal $presszone-comments-ease-smooth;

    @include dark-mode-class {
        border-inline-start-color: $presszone-comments-border-dark;
    }

    .presszone-comments-toggle-row {
        margin-bottom: 8px;
    }

    .presszone-comments-form-group {
        margin-bottom: 12px;
    }
}

// =============================================================================
// MODERN TABS COMPONENT
// =============================================================================

.presszone-comments-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid $presszone-comments-border;
    margin-bottom: 24px;
    position: relative;

    @include dark-mode-class {
        border-bottom-color: $presszone-comments-border-dark;
    }

    // Mobile: horizontal scroll with fade indicators
    @media (max-width: 768px) {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
            height: 3px;
        }

        &::-webkit-scrollbar-track {
            background: $presszone-comments-surface-2;

            @include dark-mode-class {
                background: $presszone-comments-surface-2-dark;
            }
        }

        &::-webkit-scrollbar-thumb {
            background: $presszone-comments-border;
            border-radius: 3px;

            @include dark-mode-class {
                background: $presszone-comments-border-dark;
            }
        }

        // Left fade indicator
        &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 40px;
            background: linear-gradient(to right, $presszone-comments-bg, transparent);
            pointer-events: none;
            z-index: 1;

            @include dark-mode-class {
                background: linear-gradient(to right, $presszone-comments-bg-dark, transparent);
            }
        }

        // Right fade indicator
        &::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 40px;
            background: linear-gradient(to left, $presszone-comments-bg, transparent);
            pointer-events: none;
            z-index: 1;

            @include dark-mode-class {
                background: linear-gradient(to left, $presszone-comments-bg-dark, transparent);
            }
        }
    }

    // Tab Item
    &__item {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 20px;
        background: transparent;
        border: none;
        color: $presszone-comments-text-muted;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
        white-space: nowrap;
        flex-shrink: 0;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }

        &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            inset-inline-start: 0;
            inset-inline-end: 0;
            height: 2px;
            background: transparent;
            transition: background-color 0.2s ease;
        }

        &:hover {
            color: $presszone-comments-text;
            background: $presszone-comments-surface-2;

            @include dark-mode-class {
                color: $presszone-comments-text-dark;
                background: $presszone-comments-surface-2-dark;
            }
        }

        &--active {
            color: $presszone-comments-primary;

            @include dark-mode-class {
                color: $presszone-comments-primary-dark;
            }

            &::after {
                background: $presszone-comments-primary;

                @include dark-mode-class {
                    background: $presszone-comments-primary-dark;
                }
            }

            .presszone-comments-tabs__count {
                background: $presszone-comments-primary-dim;
                color: $presszone-comments-primary;

                @include dark-mode-class {
                    background: $presszone-comments-primary-dim-dark;
                    color: $presszone-comments-primary-dark;
                }
            }
        }
    }

    // Tab Icon
    &__icon {
        font-size: 16px;
    }

    // Tab Count Badge
    &__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        background: $presszone-comments-surface-2;
        border-radius: 10px;
        color: $presszone-comments-text-muted;

        @include dark-mode-class {
            background: $presszone-comments-surface-2-dark;
            color: $presszone-comments-text-muted-dark;
        }
    }

    // Modal Tabs Variant (compact)
    &--modal {
        margin-bottom: 0;
        border-bottom: none;
        padding: 0 24px;
        gap: 0;

        .presszone-comments-tabs__item {
            padding: 10px 16px;
            font-size: 13px;
        }
    }
}

// Legacy Tab Class (backward compatibility)
.presszone-comments-admin .presszone-comments-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: $presszone-comments-text-muted;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;

    @include dark-mode-class {
        color: $presszone-comments-text-muted-dark;
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        height: 2px;
        background: transparent;
        transition: background-color 0.2s ease;
    }

    &:hover {
        color: $presszone-comments-text;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }
    }

    &.active {
        color: $presszone-comments-primary;

        @include dark-mode-class {
            color: $presszone-comments-primary-dark;
        }

        &::after {
            background: $presszone-comments-primary;

            @include dark-mode-class {
                background: $presszone-comments-primary-dark;
            }
        }
    }
}

// =============================================================================
// TAG INPUT COMPONENT
// =============================================================================

.presszone-comments-tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: $presszone-comments-surface;
    border: 1px solid $presszone-comments-border;
    border-radius: $presszone-comments-radius;
    min-height: 48px;
    transition: border-color $presszone-comments-duration-fast $presszone-comments-ease-smooth;

    @include dark-mode-class {
        background: $presszone-comments-surface-dark;
        border-color: $presszone-comments-border-dark;
    }

    &:focus-within {
        border-color: $presszone-comments-primary;
        box-shadow: 0 0 0 3px $presszone-comments-primary-dim;

        @include dark-mode-class {
            border-color: $presszone-comments-primary-dark;
            box-shadow: 0 0 0 3px $presszone-comments-primary-dim-dark;
        }
    }

    // Tags Container
    &__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    // Individual Tag
    &__tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px 4px 12px;
        background: $presszone-comments-primary-dim;
        color: $presszone-comments-primary;
        border-radius: $presszone-comments-radius-full;
        font-size: 13px;
        font-weight: 500;
        animation: presszone-comments-pop-in $presszone-comments-duration-normal $presszone-comments-ease-spring;

        @include dark-mode-class {
            background: $presszone-comments-primary-dim-dark;
            color: $presszone-comments-primary-dark;
        }
    }

    // Tag Text (truncated)
    &__tag-text {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // Tag Remove Button
    &__tag-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 50%;
        color: $presszone-comments-primary;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        transition: all $presszone-comments-duration-fast $presszone-comments-ease-smooth;

        @include dark-mode-class {
            color: $presszone-comments-primary-dark;
        }

        &:hover {
            background: $presszone-comments-error;
            color: $presszone-comments-text-on-primary;

            @include dark-mode-class {
                background: $presszone-comments-error-dark;
                color: $presszone-comments-text-on-primary-dark;
            }
        }
    }

    // Input Field
    &__input {
        flex: 1;
        min-width: 120px;
        padding: 4px 0;
        background: transparent;
        border: none;
        color: $presszone-comments-text;
        font-size: 14px;
        outline: none;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }

        &::placeholder {
            color: $presszone-comments-text-muted;

            @include dark-mode-class {
                color: $presszone-comments-text-muted-dark;
            }
        }
    }
}

// =============================================================================
// CHECKBOX GROUP
// =============================================================================

.presszone-comments-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.presszone-comments-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;

    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: $presszone-comments-primary;
        cursor: pointer;

        @include dark-mode-class {
            accent-color: $presszone-comments-primary-dark;
        }
    }

    &__label {
        font-size: 14px;
        color: $presszone-comments-text;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }
    }
}

// =============================================================================
// SAAS STATUS INDICATOR
// =============================================================================

.presszone-comments-saas-status {
    margin-top: 24px;
    padding: 16px;
    background: $presszone-comments-surface-2;
    border-radius: $presszone-comments-radius;

    @include dark-mode-class {
        background: $presszone-comments-surface-2-dark;
    }

    h3 {
        margin: 0 0 12px 0;
        font-size: 14px;
    }

    &__indicator {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    &__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: $presszone-comments-warning;

        @include dark-mode-class {
            background: $presszone-comments-warning-dark;
        }
    }
}

// =============================================================================
// PENDING CHANGES BAR
// =============================================================================

.presszone-comments-pending-changes-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, $presszone-comments-warning-gradient-start, $presszone-comments-warning-gradient-end);
    border: 1px solid $presszone-comments-warning;
    border-radius: $presszone-comments-radius;
    margin-bottom: 16px;
    animation: presszone-comments-slide-in-down $presszone-comments-duration-fast $presszone-comments-ease-smooth;

    @include dark-mode-class {
        border-color: $presszone-comments-warning-dark;
    }

    &__icon {
        font-size: 18px;
    }

    &__text {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        color: $presszone-comments-warning;

        @include dark-mode-class {
            color: $presszone-comments-warning-dark;
        }
    }

    &__actions {
        display: flex;
        gap: 8px;
    }
}

// =============================================================================
// DRAG & DROP COMPONENTS
// =============================================================================

// Drag Preview
.presszone-comments-node-drag-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: $presszone-comments-surface;
    border-radius: $presszone-comments-radius;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    border: 2px solid $presszone-comments-primary;

    @include dark-mode-class {
        background: $presszone-comments-surface-dark;
        border-color: $presszone-comments-primary-dark;
    }
}

// Node Item States
.presszone-comments-node-item {
    &--changed .presszone-comments-node-item__content {
        border-inline-start: 3px solid $presszone-comments-warning;
        background: $presszone-comments-warning-dim-lightest2;

        @include dark-mode-class {
            border-inline-start-color: $presszone-comments-warning-dark;
        }
    }

    &--dragging {
        opacity: 0.4;
    }

    &--over {
        background: $presszone-comments-primary-dim;
        border-radius: $presszone-comments-radius;

        @include dark-mode-class {
            background: $presszone-comments-primary-dim-dark;
        }
    }
}

// =============================================================================
// MODERATION QUEUE
// =============================================================================

.presszone-comments-moderation {
    max-width: 1000px;

    // Header
    &__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        gap: 16px;
        flex-wrap: wrap;

        h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
            color: $presszone-comments-text;

            @include dark-mode-class {
                color: $presszone-comments-text-dark;
            }
        }
    }

    // Filters
    &__filters {
        display: flex;
        gap: 8px;
    }

    // Empty State
    &__empty {
        text-align: center;
        padding: 60px 20px;
        background: $presszone-comments-surface;
        border-radius: $presszone-comments-radius-lg;
        border: 1px solid $presszone-comments-border;

        @include dark-mode-class {
            background: $presszone-comments-surface-dark;
            border-color: $presszone-comments-border-dark;
        }

        h2 {
            margin: 0 0 8px;
            font-size: 20px;
            font-weight: 600;
        }

        p {
            margin: 0;
            color: $presszone-comments-text-muted;

            @include dark-mode-class {
                color: $presszone-comments-text-muted-dark;
            }
        }
    }

    &__empty-icon {
        font-size: 48px;
        display: block;
        margin-bottom: 16px;
    }

    // List
    &__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    // Card
    &__card {
        background: $presszone-comments-surface;
        border-radius: $presszone-comments-radius-lg;
        border: 1px solid $presszone-comments-border;
        padding: 16px 20px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: nowrap;

        @include dark-mode-class {
            background: $presszone-comments-surface-dark;
            border-color: $presszone-comments-border-dark;
        }

        &:hover {
            transform: translateY(-2px);
            box-shadow: $presszone-comments-shadow-hover;

            @include dark-mode-class {
                box-shadow: $presszone-comments-shadow-hover-dark;
            }
        }

        // Mobile: stack vertically
        @media (max-width: 1024px) {
            flex-wrap: wrap;
            gap: 12px;
        }
    }

    &__card-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 140px;
        flex-shrink: 0;
    }

    &__type {
        font-weight: 600;
        font-size: 13px;
        color: $presszone-comments-text;
        white-space: nowrap;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }
    }

    &__date {
        font-size: 11px;
        color: $presszone-comments-text-muted;
        white-space: nowrap;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }
    }

    &__content {
        flex: 2;
        min-width: 0;

        @media (max-width: 1024px) {
            flex-basis: 100%;
        }
    }

    &__preview {
        margin: 0;
        color: $presszone-comments-text;
        font-size: 13px;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }
    }

    &__reason {
        flex: 2;
        min-width: 0;
        padding: 8px 12px;
        background: $presszone-comments-error-dim-lightest;
        border-radius: $presszone-comments-radius;
        border-inline-start: 3px solid $presszone-comments-error;

        @include dark-mode-class {
            background: $presszone-comments-error-dim-dark;
            border-inline-start-color: $presszone-comments-error-dark;
        }

        @media (max-width: 1024px) {
            flex-basis: 100%;
        }

        strong {
            display: inline;
            margin-inline-end: 6px;
            font-size: 11px;
            color: $presszone-comments-error;
            text-transform: uppercase;
            letter-spacing: 0.5px;

            @include dark-mode-class {
                color: $presszone-comments-error-dark;
            }
        }

        p {
            display: inline;
            margin: 0;
            font-size: 13px;
            color: $presszone-comments-text;
            overflow: hidden;
            text-overflow: ellipsis;

            @include dark-mode-class {
                color: $presszone-comments-text-dark;
            }
        }
    }

    &__meta {
        font-size: 11px;
        color: $presszone-comments-text-muted;
        min-width: 140px;
        flex-shrink: 0;
        line-height: 1.4;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }
    }

    &__actions {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
}

// =============================================================================
// DASHBOARD GRID
// =============================================================================

.presszone-comments-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;

    // 3 Column Variant
    &--3 {
        grid-template-columns: repeat(3, 1fr);

        @include respond-to(xl) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @include respond-to(md) {
        grid-template-columns: 1fr;
    }
}

// =============================================================================
// LIST COMPONENT
// =============================================================================

.presszone-comments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;
    overflow: visible;

    &__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid $presszone-comments-border;

        @include dark-mode-class {
            border-bottom-color: $presszone-comments-border-dark;
        }

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

        &--contributor {
            gap: 12px;
        }
    }

    &__name {
        flex: 1;
        font-weight: 500;
        color: $presszone-comments-text;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }
    }

    &__meta {
        font-size: 13px;
        color: $presszone-comments-text-muted;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }
    }
}

// Badge - Rank Variant
.presszone-comments-badge--rank {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: $presszone-comments-primary-dim;
    color: $presszone-comments-primary;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    padding: 0;

    @include dark-mode-class {
        background: $presszone-comments-primary-dim-dark;
        color: $presszone-comments-primary-dark;
    }
}

// =============================================================================
// ACTIVITY LIST
// =============================================================================

.presszone-comments-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;

    &__item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid $presszone-comments-border;

        @include dark-mode-class {
            border-bottom-color: $presszone-comments-border-dark;
        }

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

    &__icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        flex-shrink: 0;
        font-size: 16px;
    }

    &__content {
        flex: 1;
        font-size: 13px;
        line-height: 1.4;
    }

    &__time {
        font-size: 11px;
        color: $presszone-comments-text-muted;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }
    }

    &__reason {
        font-size: 0.9em;
        margin: 4px 0;
    }

    &__resolved {
        font-size: 0.9em;
        margin-top: 2px;
        color: $presszone-comments-success;

        @include dark-mode-class {
            color: $presszone-comments-success-dark;
        }
    }
}

// =============================================================================
// ALERT COMPONENT
// =============================================================================

.presszone-comments-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;

    &--warning {
        background: $presszone-comments-warning-dim-alt;
        border: 1px solid $presszone-comments-warning-border;
        color: $presszone-comments-warning;

        @include dark-mode-class {
            background: $presszone-comments-warning-dim-alt-dark;
            border-color: $presszone-comments-warning-border-dark;
            color: $presszone-comments-warning-dark;
        }
    }

    &__icon {
        font-size: 20px;
    }
}

// =============================================================================
// CHART COMPONENT
// =============================================================================

.presszone-comments-activity-chart,
.presszone-comments-recent-activity,
.presszone-comments-top-contributors,
.presszone-comments-quick-stats {
    h2 {
        font-size: 16px;
        margin: 0 0 16px;
        color: $presszone-comments-text;

        @include dark-mode-class {
            color: $presszone-comments-text-dark;
        }
    }
}

.presszone-comments-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding-top: 10px;

    &__bar-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
    }

    &__bar {
        width: 100%;
        background: linear-gradient(to top, #A8C7FA, #60a5fa);
        border-radius: 4px 4px 0 0;
        min-height: 4px;
        transition: height 0.3s ease;
    }

    &__label {
        font-size: 10px;
        color: $presszone-comments-text-muted;
        margin-top: 6px;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }
    }
}

// =============================================================================
// CONTRIBUTORS LIST
// =============================================================================

.presszone-comments-contributors-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: contributor;

    &__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid $presszone-comments-border;

        @include dark-mode-class {
            border-bottom-color: $presszone-comments-border-dark;
        }

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

    &__rank {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $presszone-comments-primary;
        color: #131314;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 600;

        @include dark-mode-class {
            background: $presszone-comments-primary-dark;
        }
    }

    &__name {
        flex: 1;
        font-weight: 500;
    }

    &__count {
        font-size: 13px;
        color: $presszone-comments-text-muted;

        @include dark-mode-class {
            color: $presszone-comments-text-muted-dark;
        }
    }
}

// =============================================================================
// QUICK STATS
// =============================================================================

.presszone-comments-quick-stats {
    &__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    &__item {
        text-align: center;
        padding: 16px;
        background: $presszone-comments-info-bg;
        border-radius: 8px;

        @include dark-mode-class {
            background: $presszone-comments-info-bg-dark;
        }
    }

    &__value {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: $presszone-comments-primary;

        @include dark-mode-class {
            color: $presszone-comments-primary-dark;
        }
    }
}