/*
 * Steam Manager Gutenberg Blocks Editor Styles
 * Simple and clean appearance in the block editor
 */

/* Block Editor Styles */
.steammanager-block-preview {
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
    background: #f9f9f9;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.steammanager-block-preview::before {
    content: '🎮 Steam Manager';
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* When block is selected */
.is-selected .steammanager-block-preview {
    border-color: #0073aa;
    background: #f0f6fc;
}

/* Loading state */
.steammanager-block-preview .components-spinner {
    margin: 20px auto;
}

/* Block icons in inserter */
.block-editor-block-types-list__item[data-id="steammanager/profile"] .block-editor-block-types-list__item-icon,
.block-editor-block-types-list__item[data-id="steammanager/library"] .block-editor-block-types-list__item-icon,
.block-editor-block-types-list__item[data-id="steammanager/wishlist"] .block-editor-block-types-list__item-icon,
.block-editor-block-types-list__item[data-id="steammanager/singlegame"] .block-editor-block-types-list__item-icon {
    background: linear-gradient(135deg, #1b2838 0%, #2a475e 50%, #66c0f4 100%);
    color: white !important;
}

/* Panel styling */
.components-panel__body-title {
    font-weight: 600;
}

/* Steam-themed controls */
.components-select-control__input:focus,
.components-text-control__input:focus,
.components-range-control__slider:focus {
    border-color: #66c0f4;
    box-shadow: 0 0 0 1px #66c0f4;
}

.components-toggle-control .components-form-toggle.is-checked .components-form-toggle__track {
    background-color: #66c0f4;
}

.components-range-control__slider::-webkit-slider-thumb {
    background-color: #66c0f4;
}

.components-range-control__slider::-moz-range-thumb {
    background-color: #66c0f4;
}

/* Block preview content styles */
.steammanager-block-preview .steam-profile,
.steammanager-block-preview .steam-library {
    width: 100%;
    max-width: 600px;
}

/* Responsive preview */
@media (max-width: 782px) {
    .steammanager-block-preview {
        padding: 15px;
    }
    
    .steammanager-block-preview::before {
        font-size: 11px;
        top: 6px;
        left: 10px;
    }
}

/* Inspector controls styling */
.block-editor-block-inspector .components-panel__body {
    border-top: 1px solid #e0e0e0;
}

.block-editor-block-inspector .components-panel__body:first-child {
    border-top: none;
}

/* Help text styling */
.steammanager-help-text {
    font-size: 13px;
    color: #757575;
    margin-top: 8px;
    font-style: italic;
}

/* Block validation styling */
.block-editor-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 12px;
    margin: 10px 0;
}

.block-editor-warning .components-button {
    margin-top: 8px;
}

/* Single Game View Block Specific */
.wp-block-steammanager-singlegame .steammanager-block-preview {
    border: 2px dashed #66c0f4;
    background: linear-gradient(135deg, #f0f6fc 0%, #e8f4fd 100%);
}

.wp-block-steammanager-singlegame .steammanager-block-preview::before {
    content: '🎮 Single Game View';
    background: #66c0f4;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.wp-block-steammanager-singlegame .steammanager-block-preview h4 {
    color: #1b2838;
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.wp-block-steammanager-singlegame .steammanager-block-preview p {
    color: #2a475e;
    margin: 4px 0;
    font-size: 14px;
}

.wp-block-steammanager-singlegame .steammanager-block-preview small {
    color: #666;
    font-style: italic;
}