@import '@/styles/variables.scss';

.audit-page {
    .audit-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: $spacing-4;
        margin-bottom: $spacing-4;

        @media (max-width: $screen-lg) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: $screen-md) {
            grid-template-columns: 1fr;
        }
    }

    .audit-table {
        background: $bg-secondary;
        border-radius: $radius-lg;
        padding: $spacing-4;

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: $spacing-4;

            .header-title {
                h3 {
                    font-size: $font-lg;
                    font-weight: $font-weight-semibold;
                    color: $text-primary;
                    margin: 0 0 $spacing-1 0;
                }

                p {
                    font-size: $font-sm;
                    color: $text-secondary;
                    margin: 0;
                }
            }

            .header-actions {
                display: flex;
                gap: $spacing-3;
                align-items: center;

                .search-input {
                    width: 240px;
                }
            }
        }

        .filter-tags {
            display: flex;
            gap: $spacing-2;
            margin-bottom: $spacing-4;
            flex-wrap: wrap;

            .filter-tag {
                padding: $spacing-2 $spacing-3;
                background: $bg-tertiary;
                border-radius: $radius-md;
                font-size: $font-sm;
                color: $text-secondary;
                cursor: pointer;
                transition: $transition-base;

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

                &.active {
                    background: $tag-bg-blue;
                    color: $tag-text-blue;
                }
            }
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: $spacing-1;
            padding: $spacing-1 $spacing-2;
            border-radius: $radius-md;
            font-size: $font-sm;

            &.pending {
                background: $tag-bg-amber;
                color: $tag-text-amber;
            }

            &.approved {
                background: $tag-bg-teal;
                color: $tag-text-teal;
            }

            &.rejected {
                background: $tag-bg-rose;
                color: $tag-text-rose;
            }
        }

        .action-buttons {
            display: flex;
            gap: $spacing-2;

            .audit-btn {
                padding: $spacing-1 $spacing-3;
                font-size: $font-sm;
                border-radius: $radius-md;

                &.approve {
                    background: $success-color;
                    color: #ffffff;
                    border: none;

                    &:hover {
                        background: $success-light;
                    }
                }

                &.reject {
                    background: $error-color;
                    color: #ffffff;
                    border: none;

                    &:hover {
                        background: $error-light;
                    }
                }
            }
        }
    }

    .detail-drawer {
        .detail-section {
            margin-bottom: $spacing-4;

            .section-title {
                font-size: $font-md;
                font-weight: $font-weight-semibold;
                color: $text-primary;
                margin-bottom: $spacing-3;
                padding-bottom: $spacing-2;
                border-bottom: 1px solid $border-base;
            }

            .detail-row {
                display: flex;
                margin-bottom: $spacing-2;

                .label {
                    width: 100px;
                    font-size: $font-sm;
                    color: $text-secondary;
                    flex-shrink: 0;
                }

                .value {
                    font-size: $font-base;
                    color: $text-primary;
                }
            }

            .tag-list {
                display: flex;
                flex-wrap: wrap;
                gap: $spacing-2;

                .tag {
                    padding: $spacing-1 $spacing-2;
                    background: $tag-bg-blue;
                    color: $tag-text-blue;
                    border-radius: $radius-md;
                    font-size: $font-xs;
                }
            }
        }

        .history-timeline {
            .timeline-item {
                display: flex;
                gap: $spacing-3;
                padding-bottom: $spacing-3;
                margin-bottom: $spacing-3;
                border-left: 2px solid $border-base;
                padding-left: $spacing-4;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: -6px;
                    top: 0;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: $primary-color;
                }

                &.approved::before {
                    background: $success-color;
                }

                &.rejected::before {
                    background: $error-color;
                }

                .timeline-content {
                    flex: 1;

                    .timeline-title {
                        font-size: $font-base;
                        font-weight: $font-weight-medium;
                        color: $text-primary;
                        margin-bottom: $spacing-1;
                    }

                    .timeline-time {
                        font-size: $font-xs;
                        color: $text-hint;
                        margin-bottom: $spacing-1;
                    }

                    .timeline-remark {
                        font-size: $font-sm;
                        color: $text-secondary;
                        background: $bg-tertiary;
                        padding: $spacing-2;
                        border-radius: $radius-md;
                    }
                }
            }
        }
    }
}
