// ============================================
// ADMIN SERVICES - Component Styles
// Matching HTML classes exactly
// ============================================
@import '../admin-shared.scss';

// ============================================
// TAB CONTENT
// ============================================
.tab-content {
    animation: fadeIn 0.3s ease-out;
}

// ============================================
// CATEGORIES TAB - Category Cards
// ============================================
.category-info {
    display: flex;
    align-items: flex-start;
    gap: $admin-space-md;

    @media (max-width: 640px) {
        flex-direction: column;
        gap: $admin-space-sm;
    }
}

.category-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba($color-brand-primary, 0.15), rgba($accent-purple, 0.1));
    border-radius: $radius-md;
    flex-shrink: 0;
    transition: all 0.2s ease;

    .material-symbols-outlined {
        font-size: 1.5rem;
        color: $color-brand-primary;
    }

    &.unpublished {
        background: rgba($color-gray-400, 0.15);
        
        .material-symbols-outlined {
            color: $color-gray-400;
        }
    }
}

.category-details {
    flex: 1;
    min-width: 0;

    h3 {
        font-size: 1rem;
        font-weight: 600;
        color: $color-text-primary;
        margin: 0 0 $admin-space-2xs;
    }

    p {
        font-size: 0.8125rem;
        color: $color-text-secondary;
        margin: 0 0 $admin-space-xs;
    }
}

.category-meta {
    display: flex;
    flex-wrap: wrap;
    gap: $admin-space-2xs;
}

// ============================================
// SERVICES TAB - Grouped by Category
// ============================================
.services-by-category {
    display: grid;
    gap: $admin-space-sm;
}

.category-group {
    background: $glass-bg;
    border: 1px solid $glass-border;
    border-radius: $radius-lg;
    overflow: hidden;
    animation: staggerFade 0.3s ease-out backwards;

    @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
            animation-delay: #{$i * 60}ms;
        }
    }
}

.category-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $admin-space-sm $admin-space-md;
    background: rgba($color-brand-primary, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;

    &:hover {
        background: rgba($color-brand-primary, 0.06);
    }
}

.category-group-info {
    display: flex;
    align-items: center;
    gap: $admin-space-sm;

    .icon {
        font-size: 1.25rem;
        color: $color-brand-primary;
    }

    .name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: $color-text-primary;
    }
}

.category-group-actions {
    display: flex;
    align-items: center;
    gap: $admin-space-xs;

    .expand-icon {
        font-size: 1.25rem;
        color: $color-text-tertiary;
        transition: transform 0.25s ease;

        &.expanded {
            transform: rotate(180deg);
        }
    }
}

// Services within category group
.category-group > .admin-list {
    border-top: 1px solid $glass-border;
    padding: $admin-space-xs;
    background: rgba(white, 0.5);
}

// ============================================
// SERVICE CARDS
// ============================================
.service-info {
    display: flex;
    align-items: flex-start;
    gap: $admin-space-sm;

    @media (max-width: 640px) {
        flex-direction: column;
    }
}

.service-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba($color-brand-primary, 0.08);
    border-radius: $radius-md;
    flex-shrink: 0;
}

.service-details {
    flex: 1;
    min-width: 0;

    h4 {
        font-size: 0.9375rem;
        font-weight: 600;
        color: $color-text-primary;
        margin: 0 0 $admin-space-2xs;
    }

    p {
        font-size: 0.8125rem;
        color: $color-text-secondary;
        margin: 0 0 $admin-space-xs;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.service-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $admin-space-xs;
}

// Unpublished service card styling
.admin-card.unpublished {
    opacity: 0.6;
    border-style: dashed;

    &:hover {
        opacity: 0.8;
    }
}

// ============================================
// MODAL EXTENSIONS
// ============================================
.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: $radius-sm;
    color: $color-text-tertiary;
    cursor: pointer;
    transition: all 0.15s ease;

    &:hover {
        background: $color-gray-100;
        color: $color-text-primary;
    }
}

// Form row for side-by-side inputs
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $admin-space-md;

    @media (max-width: 640px) {
        grid-template-columns: 1fr;
    }
}

// Checkbox group styling
.checkbox-group {
    display: flex;
    align-items: center;
    
    label {
        display: flex !important;
        align-items: center;
        gap: $admin-space-xs;
        cursor: pointer;
        font-size: 0.875rem !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        color: $color-text-primary !important;

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

// ============================================
// TAGS EDITOR
// ============================================
.tags-editor {
    display: flex;
    flex-direction: column;
    gap: $admin-space-xs;
}

.tag-input {
    display: flex;
    gap: $admin-space-xs;

    .admin-input {
        flex: 1;
    }
}

// Tag remove button within chip
.admin-chip button {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: $admin-space-2xs;
    opacity: 0.7;
    transition: opacity 0.15s ease;

    &:hover {
        opacity: 1;
    }
}

// ============================================
// EMPTY STATE ICON
// ============================================
.state-icon {
    font-size: 3rem !important;
    display: block;
    margin-bottom: $admin-space-sm;
}

// ============================================
// RESPONSIVE ADJUSTMENTS
// ============================================
@media (max-width: 640px) {
    .category-group-header {
        padding: $admin-space-xs $admin-space-sm;
    }

    .category-group-info {
        .name {
            font-size: 0.875rem;
        }
    }

    .admin-card__footer {
        flex-wrap: wrap;
        justify-content: center;
    }
}

// ============================================
// ANIMATIONS
// ============================================
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
