/**
 * Credit Score Block - Gutenberg Editor Styles
 * Styles for the block editor interface
 */

/* ===== Editor Container ===== */
.wp-block-custom-credit-score {
    position: relative;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
}

/* ===== Editor Notice/Info ===== */
.editor-notice {
    background: linear-gradient(135deg, #f8f9fa 0%, #e8eaf6 100%);
    border-left: 5px solid #9c27b0;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.1);
}

.editor-notice p {
    margin: 8px 0;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

.editor-notice p:first-child {
    font-weight: 700;
    color: #9c27b0;
    font-size: 15px;
    margin-bottom: 12px;
}

.editor-notice small {
    color: #666;
    font-size: 12px;
}

/* ===== Inspector Controls ===== */
.components-panel__body-title {
    font-weight: 600;
    color: #1a1a1a;
}

.components-base-control {
    margin-bottom: 16px;
}

.components-base-control__label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 13px;
}

.components-text-control__input,
.components-select-control__input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    transition: all 0.2s ease;
}

.components-text-control__input:focus,
.components-select-control__input:focus {
    outline: none;
    border-color: #9c27b0;
    box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.components-toggle-control {
    margin: 16px 0;
}

.components-toggle-control__label {
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

/* ===== Color Palette ===== */
.components-color-palette {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.components-color-palette__item {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.components-color-palette__item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.components-color-palette__item.is-active {
    border-color: #333;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}

/* ===== Sidebar Panel ===== */
.edit-post-sidebar .components-panel__body {
    border-bottom: 1px solid #e0e0e0;
}

.edit-post-sidebar .components-panel__body:last-child {
    border-bottom: none;
}

/* ===== Block Preview ===== */
.wp-block[data-type="custom/credit-score"] {
    margin: 0 0 28px 0;
}

.wp-block[data-type="custom/credit-score"] .block-editor-block-list__block {
    margin: 0;
}

/* ===== Block Toolbar ===== */
.wp-block[data-type="custom/credit-score"] .block-editor-block-toolbar {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

/* ===== Block Selection ===== */
.wp-block[data-type="custom/credit-score"].is-selected {
    box-shadow: inset 0 0 0 1px #9c27b0;
    outline: none;
}

.wp-block[data-type="custom/credit-score"].is-hovered {
    box-shadow: inset 0 0 0 1px #ddd;
}

/* ===== Placeholder Style ===== */
.wp-block-credit-score-placeholder {
    background: linear-gradient(135deg, #f8f9fa 0%, #e8eaf6 100%);
    border: 2px dashed #9c27b0;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #666;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-credit-score-placeholder::before {
    content: "📊";
    display: block;
    font-size: 48px;
    margin-bottom: 16px;
}

/* ===== Inspector Divider ===== */
.components-panel__body-title::after {
    content: "";
    display: block;
    height: 1px;
    background: #e0e0e0;
    margin-top: 12px;
}

/* ===== Form Elements in Editor ===== */
.components-panel__body .components-text-control {
    margin-bottom: 12px;
}

.components-panel__body .components-select-control {
    margin-bottom: 12px;
}

.components-panel__body .components-toggle-control {
    margin-bottom: 12px;
}

/* ===== Number Input ===== */
input[type="number"].components-text-control__input {
    font-family: 'Monaco', 'Courier New', monospace;
    text-align: center;
}

/* ===== Help Text ===== */
.components-base-control__help {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.4;
}

/* ===== Button Styles in Editor ===== */
.components-button {
    transition: all 0.2s ease;
}

.components-button.is-primary {
    background-color: #9c27b0;
    border-color: #9c27b0;
    color: white;
}

.components-button.is-primary:hover:not(:disabled) {
    background-color: #7b1fa2;
    border-color: #7b1fa2;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

.components-button.is-secondary {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.components-button.is-secondary:hover:not(:disabled) {
    background-color: #e8e8e8;
}

/* ===== Tab Navigation ===== */
.components-tab-panel__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
}

.components-tab-panel__tabs button {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.components-tab-panel__tabs button:hover {
    color: #9c27b0;
}

.components-tab-panel__tabs button.is-active {
    color: #9c27b0;
    border-bottom-color: #9c27b0;
}

/* ===== Select Dropdown ===== */
.components-select-control {
    position: relative;
}

.components-select-control__input {
    padding-right: 32px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    padding-right: 32px;
}

/* ===== Validation States ===== */
.has-error .components-text-control__input,
.has-error .components-select-control__input {
    border-color: #e74c3c;
}

.has-error .components-base-control__help {
    color: #e74c3c;
}

.has-success .components-text-control__input,
.has-success .components-select-control__input {
    border-color: #27ae60;
}

/* ===== Editor Block Wrapper ===== */
.wp-block-custom-credit-score {
    background: white;
    border-radius: 4px;
}

/* ===== Loading State ===== */
.wp-block-custom-credit-score.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.wp-block-custom-credit-score.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #9c27b0;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Right Click Context Menu ===== */
.wp-block-custom-credit-score .block-editor-context-menu {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== Block Insertion Point ===== */
.wp-block-custom-credit-score ~ .wp-block-custom-credit-score::before {
    content: "";
    height: 20px;
    background: transparent;
}

/* ===== Dark Mode Support ===== */
@media (prefers-color-scheme: dark) {
    .wp-block-custom-credit-score {
        background: #1a1a1a;
        color: #f5f5f5;
    }

    .editor-notice {
        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
        border-left-color: #9c27b0;
    }

    .editor-notice p {
        color: #e0e0e0;
    }

    .editor-notice p:first-child {
        color: #bb86fc;
    }

    .editor-notice small {
        color: #999;
    }

    .components-base-control__label {
        color: #e0e0e0;
    }

    .components-text-control__input,
    .components-select-control__input {
        background-color: #2a2a2a;
        border-color: #444;
        color: #e0e0e0;
    }

    .components-text-control__input:focus,
    .components-select-control__input:focus {
        border-color: #9c27b0;
        box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.2);
    }

    .components-toggle-control__label {
        color: #e0e0e0;
    }

    .components-panel__body {
        border-bottom-color: #444;
    }

    .components-base-control__help {
        color: #999;
    }
}

/* ===== Print Styles ===== */
@media print {
    .wp-block-custom-credit-score {
        page-break-inside: avoid;
    }

    .edit-post-sidebar,
    .block-editor-block-toolbar {
        display: none;
    }
}

/* ===== Accessibility ===== */
.wp-block-custom-credit-score:focus-within {
    outline: 2px solid #9c27b0;
    outline-offset: 2px;
}

/* Keyboard navigation */
.wp-block-custom-credit-score .components-button:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9c27b0;
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .wp-block-custom-credit-score {
        border: 2px solid #333;
    }

    .components-button.is-primary {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wp-block-custom-credit-score,
    .components-button,
    .components-text-control__input {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Editor Width Constraints ===== */
.wp-block-custom-credit-score {
    max-width: 100%;
}

@supports (display: grid) {
    .wp-block-custom-credit-score {
        display: grid;
        width: 100%;
    }
}

/* ===== Hover Effects for Inspector ===== */
.components-panel__body .components-text-control:hover,
.components-panel__body .components-select-control:hover,
.components-panel__body .components-toggle-control:hover {
    background: rgba(156, 39, 176, 0.02);
}

/* ===== Nested Block Support ===== */
.wp-block-custom-credit-score .block-editor-inner-blocks {
    margin-top: 16px;
}

/* ===== Error Boundary ===== */
.wp-block-custom-credit-score.block-editor-block-error {
    background: #fef5f1;
    border: 2px dashed #e74c3c;
    padding: 16px;
}

.wp-block-custom-credit-score.block-editor-block-error .block-editor-block-error__title {
    color: #e74c3c;
    font-weight: 700;
    margin-bottom: 8px;
}

.wp-block-custom-credit-score.block-editor-block-error .block-editor-block-error__content {
    color: #666;
    font-size: 13px;
}

/* ===== Responsive Editor ===== */
@media (max-width: 782px) {
    .edit-post-sidebar {
        width: 100%;
    }

    .components-panel__body {
        margin: 0;
        padding: 16px;
    }

    .wp-block-custom-credit-score {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ===== Custom Scrollbar for Editor ===== */
.wp-block-custom-credit-score::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.wp-block-custom-credit-score::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.wp-block-custom-credit-score::-webkit-scrollbar-thumb {
    background: #9c27b0;
    border-radius: 4px;
}

.wp-block-custom-credit-score::-webkit-scrollbar-thumb:hover {
    background: #7b1fa2;
}

/* ===== Help Tooltip ===== */
.components-tooltip {
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

/* ===== Icon Buttons ===== */
.components-button.has-icon {
    padding: 6px;
    min-width: 30px;
    height: 30px;
}

.components-button.has-icon svg {
    width: 20px;
    height: 20px;
}

/* ===== Divider ===== */
.wp-block-custom-credit-score .components-divider {
    margin: 12px 0;
    height: 1px;
    background: #e0e0e0;
}

/* ===== Custom Properties ===== */
:root {
    --wp-block-custom-credit-primary: #9c27b0;
    --wp-block-custom-credit-secondary: #f39c12;
    --wp-block-custom-credit-success: #27ae60;
    --wp-block-custom-credit-danger: #e74c3c;
    --wp-block-custom-credit-gray: #999;
}