/**
 * Component Playground Styles
 *
 * Interactive development tool for LiveComponents.
 * Modern, responsive UI with code editor aesthetics.
 *
 * Features:
 * - Component browser with search
 * - JSON state editor with syntax highlighting
 * - Live component preview
 * - Action testing interface
 * - Performance metrics display
 * - Code generator with copy-to-clipboard
 */

@layer components {
    /* ========================================
       Layout & Container
       ======================================== */

    .playground {
        min-height: 100vh;
        background: oklch(98% 0.01 280);
        font-family: system-ui, -apple-system, sans-serif;
    }

    .playground__header {
        padding: 2rem;
        background: oklch(100% 0 0);
        border-bottom: 1px solid oklch(90% 0.01 280);
    }

    .playground__title {
        font-size: 2rem;
        font-weight: 700;
        color: oklch(20% 0.02 280);
        margin: 0 0 0.5rem 0;
    }

    .playground__subtitle {
        font-size: 1rem;
        color: oklch(50% 0.05 280);
        margin: 0;
    }

    .playground__layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 0;
        min-height: calc(100vh - 120px);
    }

    /* ========================================
       Sidebar: Component Selector
       ======================================== */

    .playground__sidebar {
        background: oklch(100% 0 0);
        border-right: 1px solid oklch(90% 0.01 280);
        display: flex;
        flex-direction: column;
    }

    .playground__search {
        padding: 1rem;
        border-bottom: 1px solid oklch(90% 0.01 280);
    }

    .playground__search-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid oklch(85% 0.01 280);
        border-radius: 0.5rem;
        font-size: 0.875rem;
        transition: border-color 0.2s;

        &:focus {
            outline: none;
            border-color: oklch(60% 0.2 280);
            box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
        }
    }

    .playground__component-list {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }

    .playground__component-item {
        padding: 1rem;
        margin-bottom: 0.5rem;
        background: oklch(98% 0.01 280);
        border: 1px solid oklch(90% 0.01 280);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            background: oklch(95% 0.01 280);
            border-color: oklch(80% 0.05 280);
            transform: translateX(4px);
        }

        &--active {
            background: oklch(85% 0.15 280);
            border-color: oklch(60% 0.2 280);
            box-shadow: 0 2px 8px oklch(60% 0.2 280 / 0.2);

            &:hover {
                transform: none;
            }
        }
    }

    .playground__component-name {
        font-weight: 600;
        color: oklch(20% 0.02 280);
        margin-bottom: 0.5rem;
        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    .playground__component-meta {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .playground__badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        background: oklch(92% 0.01 280);
        color: oklch(40% 0.05 280);
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 500;

        &--cache {
            background: oklch(85% 0.15 140);
            color: oklch(30% 0.1 140);
        }
    }

    /* ========================================
       Main Content Area
       ======================================== */

    .playground__main {
        padding: 2rem;
        overflow-y: auto;
    }

    .playground__section {
        margin-bottom: 3rem;
        background: oklch(100% 0 0);
        border: 1px solid oklch(90% 0.01 280);
        border-radius: 0.75rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.05);
    }

    .playground__section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: oklch(20% 0.02 280);
        margin: 0 0 1rem 0;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid oklch(90% 0.01 280);
    }

    /* ========================================
       State Editor
       ======================================== */

    .playground__state-editor {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .playground__textarea {
        width: 100%;
        padding: 1rem;
        border: 1px solid oklch(85% 0.01 280);
        border-radius: 0.5rem;
        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
        font-size: 0.875rem;
        line-height: 1.5;
        background: oklch(98% 0.01 280);
        color: oklch(20% 0.02 280);
        resize: vertical;
        min-height: 200px;

        &:focus {
            outline: none;
            border-color: oklch(60% 0.2 280);
            box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
        }
    }

    .playground__editor-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .playground__validation {
        padding: 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
    }

    .playground__success {
        color: oklch(35% 0.15 140);
        font-weight: 500;
    }

    .playground__error {
        color: oklch(50% 0.2 30);
        font-weight: 500;
    }

    /* ========================================
       Buttons
       ======================================== */

    .playground__button {
        padding: 0.75rem 1.5rem;
        background: oklch(95% 0.01 280);
        color: oklch(30% 0.05 280);
        border: 1px solid oklch(85% 0.01 280);
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            background: oklch(92% 0.01 280);
            border-color: oklch(80% 0.05 280);
        }

        &:active {
            transform: translateY(1px);
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
        }

        &--primary {
            background: oklch(60% 0.2 280);
            color: oklch(100% 0 0);
            border-color: oklch(60% 0.2 280);

            &:hover {
                background: oklch(55% 0.2 280);
                border-color: oklch(55% 0.2 280);
            }
        }

        &--action {
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            background: oklch(85% 0.15 140);
            color: oklch(25% 0.1 140);
            border-color: oklch(75% 0.15 140);

            &:hover {
                background: oklch(80% 0.15 140);
                border-color: oklch(70% 0.15 140);
            }
        }
    }

    /* ========================================
       Live Preview
       ======================================== */

    .playground__preview {
        min-height: 300px;
        padding: 2rem;
        background: oklch(98% 0.01 280);
        border: 1px dashed oklch(85% 0.01 280);
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }

    /* ========================================
       Performance Metrics
       ======================================== */

    .playground__metrics {
        padding: 1rem;
        background: oklch(95% 0.01 280);
        border-radius: 0.5rem;
        border: 1px solid oklch(90% 0.01 280);
    }

    .playground__metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }

    .playground__metric {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .playground__metric-label {
        font-size: 0.75rem;
        color: oklch(50% 0.05 280);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .playground__metric-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: oklch(20% 0.02 280);
        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    /* ========================================
       Actions
       ======================================== */

    .playground__actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .playground__action {
        padding: 1rem;
        background: oklch(98% 0.01 280);
        border: 1px solid oklch(90% 0.01 280);
        border-radius: 0.5rem;
    }

    .playground__action-params {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid oklch(90% 0.01 280);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;

        label {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: oklch(30% 0.05 280);
            font-weight: 500;
        }

        input {
            padding: 0.75rem;
            border: 1px solid oklch(85% 0.01 280);
            border-radius: 0.5rem;
            font-size: 0.875rem;

            &:focus {
                outline: none;
                border-color: oklch(60% 0.2 280);
                box-shadow: 0 0 0 3px oklch(90% 0.1 280 / 0.3);
            }
        }
    }

    /* ========================================
       Code Generator
       ======================================== */

    .playground__code-generator {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .playground__code {
        padding: 1.5rem;
        background: oklch(15% 0.01 280);
        color: oklch(90% 0.05 140);
        border-radius: 0.5rem;
        font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
        font-size: 0.875rem;
        line-height: 1.6;
        overflow-x: auto;
        margin: 0;

        code {
            color: inherit;
            background: none;
        }
    }

    /* ========================================
       Empty States & Loading
       ======================================== */

    .playground__empty {
        padding: 3rem;
        text-align: center;
        color: oklch(60% 0.05 280);
        font-size: 0.875rem;
    }

    .playground__loading {
        padding: 2rem;
        text-align: center;
        color: oklch(50% 0.05 280);
        font-size: 0.875rem;

        &::after {
            content: '';
            display: inline-block;
            width: 1rem;
            height: 1rem;
            margin-left: 0.5rem;
            border: 2px solid oklch(80% 0.05 280);
            border-top-color: oklch(60% 0.2 280);
            border-radius: 50%;
            animation: playground-spin 0.8s linear infinite;
        }
    }

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

    /* ========================================
       Responsive Design
       ======================================== */

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

        .playground__sidebar {
            border-right: none;
            border-bottom: 1px solid oklch(90% 0.01 280);
            max-height: 400px;
        }

        .playground__metrics-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ========================================
       Dark Mode Support
       ======================================== */

    @media (prefers-color-scheme: dark) {
        .playground {
            background: oklch(15% 0.01 280);
        }

        .playground__header,
        .playground__sidebar,
        .playground__section {
            background: oklch(20% 0.01 280);
            border-color: oklch(30% 0.01 280);
        }

        .playground__title {
            color: oklch(90% 0.02 280);
        }

        .playground__subtitle {
            color: oklch(70% 0.05 280);
        }

        .playground__search-input,
        .playground__textarea {
            background: oklch(15% 0.01 280);
            color: oklch(90% 0.02 280);
            border-color: oklch(30% 0.01 280);
        }

        .playground__component-item {
            background: oklch(18% 0.01 280);
            border-color: oklch(30% 0.01 280);

            &:hover {
                background: oklch(25% 0.01 280);
            }

            &--active {
                background: oklch(35% 0.15 280);
                border-color: oklch(50% 0.2 280);
            }
        }

        .playground__button {
            background: oklch(25% 0.01 280);
            color: oklch(85% 0.02 280);
            border-color: oklch(35% 0.01 280);

            &:hover {
                background: oklch(30% 0.01 280);
            }
        }

        .playground__preview,
        .playground__metrics,
        .playground__action {
            background: oklch(18% 0.01 280);
            border-color: oklch(30% 0.01 280);
        }

        .playground__metric-value {
            color: oklch(90% 0.02 280);
        }
    }
}