// Main styles for React admin interface
@use 'variables' as *;

// Import frontend styles (for both admin preview and frontend display)
@use 'frontend';

// Import all component styles
@use 'components/showcase-list';
@use 'components/layout-selector';
@use 'components/showcase-editor';
@use 'components/product-selector';
@use 'components/style-controls';
@use 'components/preview-panel';
@use 'components/icon-picker';
@use 'components/toggle';
@use 'components/shortcode-generator';
@use 'components/get-started';
@use 'components/toast';
@use 'components/modal';
@use 'components/showcase-frontend';

.wcps-admin-styles {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: $text-color;
    background: $background-light;
    min-height: 100vh;

    * {
        box-sizing: border-box;
    }

    // Loading states
    .proddisp-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: $spacing-2xl;
        background: $white;
        border-radius: $border-radius;
        box-shadow: $shadow-md;

        .spinner {
            width: 32px;
            height: 32px;
            border: 3px solid $light-gray;
            border-top: 3px solid $primary-color;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: $spacing-md;
        }

        p {
            color: $text-light;
            font-size: 14px;
            margin: 0;
        }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    // Modern button styles
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-xs;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        min-height: 36px;
        margin: 0;
        padding: $spacing-sm $spacing-md;
        cursor: pointer;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        white-space: nowrap;
        box-sizing: border-box;
        background: $white;
        color: $text-color;
        transition: $transition;
        box-shadow: $shadow-sm;

        &:hover {
            background: $background-light;
            border-color: $medium-gray;
            color: $text-dark;
            transform: translateY(-1px);
            box-shadow: $shadow-md;
        }

        &.button-primary {
            background: $primary-color;
            border-color: $primary-color;
            color: $white;
            box-shadow: 0 2px 6px rgba($primary-color, 0.15);

            &:hover {
                background: $primary-hover;
                border-color: $primary-hover;
                transform: translateY(-1px);
                box-shadow: 0 4px 10px rgba($primary-color, 0.25);
            }
        }

        &.button-secondary {
            background: $secondary-color;
            border-color: $secondary-color;
            color: $white;

            &:hover {
                background: $secondary-color;
                border-color: $secondary-color;
            }
        }

        &.button-outline {
            background: transparent;
            border-color: $border-color;
            color: $text-color;

            &:hover {
                background: $background-light;
                border-color: $primary-color;
                color: $primary-color;
            }
        }

        &.button-danger {
            background: $danger-color;
            border-color: $danger-color;
            color: $white;

            &:hover {
                background: $danger-color;
                border-color: $danger-color;
            }
        }

        &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: $shadow-sm;
        }

        &.button-large {
            padding: $spacing-md $spacing-lg;
            font-size: 15px;
            min-height: 44px;
        }

        &.button-small {
            padding: $spacing-xs $spacing-sm;
            font-size: 12px;
            min-height: 28px;
        }
    }

    // Form elements
    .setting-group {
        margin-bottom: $spacing-lg;

        &.checkbox-group {
            margin-bottom: $spacing-md;

            label {
                display: flex;
                align-items: center;
                gap: $spacing-sm;
                font-weight: 400;
                cursor: pointer;
                padding: $spacing-sm 0;

                input[type="checkbox"] {
                    width: auto;
                    margin: 0;
                }
            }
        }

        label {
            display: block;
            margin-bottom: $spacing-xs;
            font-weight: 600;
            color: $text-dark;
            font-size: 14px;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: $spacing-sm $spacing-md;
            border: 1px solid $border-color;
            border-radius: $border-radius;
            font-size: 14px;
            background: $white;
            color: $text-color;
            transition: $transition;
            box-shadow: $input-shadow;

            &:focus {
                border-color: $primary-color;
                outline: none;
                box-shadow: $focus-shadow;
            }

            &.regular-text {
                max-width: 400px;
            }
        }

        .description {
            margin-top: $spacing-xs;
            font-size: 12px;
            color: $text-light;
            line-height: 1.4;
        }

        .pro-notice {
            color: $warning-color;
            font-weight: 500;

            .upgrade-link {
                color: $primary-color;
                text-decoration: none;
                font-weight: 600;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    // Cards and panels
    .proddisp-card {
        background: $white;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        box-shadow: $shadow-md;
        overflow: hidden;
    }

    .proddisp-card-header {
        padding: $spacing-lg;
        border-bottom: 1px solid $border-color;
        background: $background-lighter;

        h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: $text-dark;
        }
    }

    .proddisp-card-body {
        padding: $spacing-lg;
    }

    // Pro feature notices
    .pro-feature-notice {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(248, 250, 252, 0.2) 100%);
        -webkit-backdrop-filter: blur(12px) saturate(200%);
        backdrop-filter: blur(0px) saturate(60%);
        border-radius: var(--editor-radius-lg);
        border: 1px solid #f59e0b;
        border-radius: $border-radius;
        padding: $spacing-lg;
        text-align: center;
        margin: $spacing-md 0;

        h4 {
            margin: 0 0 $spacing-sm 0;
            color: #92400e;
            font-size: 16px;
        }

        p {
            margin: 0 0 $spacing-md 0;
            color: #92400e;
        }

        .button-primary {
            background: $warning-color;
            border-color: $warning-color;

            &:hover {
                background: $warning-color;
                border-color: $warning-color;
            }
        }
    }

    // Spinning animation for loading states
    .spinning {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    // Responsive design
    @media (max-width: $small-tablet) {
        padding: $spacing-md;

        .button {
            width: 100%;
            justify-content: center;
            margin-bottom: $spacing-sm;
        }

        .setting-group {
            input,
            select,
            textarea {
                &.regular-text {
                    max-width: 100%;
                }
            }
        }
    }
}