/**
 * STRYKE WP — Gutenberg Block Editor Compatibility
 *
 * Accent color overrides ONLY — no background/dark mode changes.
 * The editor must remain in its native light theme so content
 * is displayed as it will appear on the frontend.
 *
 * Loaded only on block editor screens (checked in AdminStyles::enqueue()).
 */

/* ==========================================================================
   0. LAYOUT — Fix editor content area behind STRYKE sidebar
   ========================================================================== */

/* Remove shell padding so the editor can manage its own full-width layout */
body.stryke-shell #wpbody-content {
    padding: 0 !important;
    min-height: auto !important;
}

/* ==========================================================================
   1. ACCENT COLORS — Publish / Primary Buttons
   ========================================================================== */

.editor-post-publish-button,
.editor-post-publish-button__button {
    background: var(--stryke-primary) !important;
    color: #fff !important;
    border-color: var(--stryke-primary) !important;
}

.editor-post-publish-button:hover,
.editor-post-publish-button__button:hover {
    background: var(--stryke-primary-hover) !important;
    border-color: var(--stryke-primary-hover) !important;
}

.editor-post-publish-button:focus,
.editor-post-publish-button__button:focus {
    box-shadow: 0 0 0 2px var(--stryke-primary) !important;
}

/* ==========================================================================
   2. ACCENT — Links & Active States
   ========================================================================== */

/* Sidebar active tab */
.components-tab-panel__tabs button.is-active,
.components-tab-panel__tabs button[aria-selected="true"] {
    color: var(--stryke-primary) !important;
    box-shadow: inset 0 -2px 0 var(--stryke-primary) !important;
}

/* Panel body toggle arrows — accent on hover */
.components-panel__body-title button:hover {
    color: var(--stryke-primary) !important;
}

/* Links in sidebar */
.edit-post-sidebar a,
.interface-complementary-area a,
.editor-sidebar a {
    color: var(--stryke-primary) !important;
}

/* ==========================================================================
   3. ACCENT — Form Controls (Checkbox, Radio, Toggle)
   ========================================================================== */

.components-form-toggle.is-checked .components-form-toggle__track {
    background: var(--stryke-primary) !important;
    border-color: var(--stryke-primary) !important;
}

.components-checkbox-control__input[type="checkbox"]:checked {
    accent-color: var(--stryke-primary) !important;
}

.components-radio-control__input[type="radio"]:checked {
    accent-color: var(--stryke-primary) !important;
}

/* Range slider thumb */
.components-range-control__slider::-webkit-slider-thumb {
    background: var(--stryke-primary) !important;
    border-color: var(--stryke-primary) !important;
}

/* ==========================================================================
   4. ACCENT — Focus States
   ========================================================================== */

.components-text-control__input:focus,
.components-input-control__input:focus,
.components-select-control__input:focus,
.components-textarea-control__input:focus {
    border-color: var(--stryke-primary) !important;
    box-shadow: 0 0 0 1px var(--stryke-primary) !important;
}

.components-button:focus:not(:disabled) {
    box-shadow: 0 0 0 2px var(--stryke-primary) !important;
}

/* ==========================================================================
   5. ACCENT — Primary / Secondary / Tertiary Buttons
   ========================================================================== */

.components-button.is-primary {
    background: var(--stryke-primary) !important;
    color: #fff !important;
    border-color: var(--stryke-primary) !important;
}

.components-button.is-primary:hover {
    background: var(--stryke-primary-hover) !important;
}

.components-button.is-tertiary {
    color: var(--stryke-primary) !important;
}

.components-button.is-tertiary:hover {
    background: rgba(24, 155, 167, 0.08) !important;
}

/* ==========================================================================
   6. ACCENT — Block Selection Outline
   ========================================================================== */

.block-editor-block-list__block.is-selected {
    outline-color: var(--stryke-primary) !important;
}

/* Insertion point indicator */
.block-editor-block-list__insertion-point-indicator {
    background: var(--stryke-primary) !important;
}

/* ==========================================================================
   7. ACCENT — Block Toolbar Active State
   ========================================================================== */

.block-editor-block-toolbar button.is-pressed,
.block-editor-block-contextual-toolbar button.is-pressed {
    color: var(--stryke-primary) !important;
    background: rgba(24, 155, 167, 0.08) !important;
}

/* ==========================================================================
   8. ACCENT — Color Palette Selection
   ========================================================================== */

.components-circular-option-picker__option.is-pressed {
    box-shadow: 0 0 0 2px var(--stryke-primary) !important;
}

/* ==========================================================================
   9. ACCENT — Notices in Editor
   ========================================================================== */

.components-notice.is-success {
    border-left-color: #4CAF50 !important;
}

.components-notice.is-error {
    border-left-color: #ff5555 !important;
}

.components-notice.is-warning {
    border-left-color: #FFC107 !important;
}

.components-notice.is-info {
    border-left-color: var(--stryke-primary) !important;
}

/* ==========================================================================
   10. ACCENT — Snackbar Actions
   ========================================================================== */

.components-snackbar .components-snackbar__action {
    color: var(--stryke-primary) !important;
}

/* ==========================================================================
   11. ACCENT — Spinner
   ========================================================================== */

.components-spinner {
    border-left-color: var(--stryke-primary) !important;
}

/* ==========================================================================
   12. ACCENT — Publish Panel
   ========================================================================== */

.editor-post-publish-panel__header-publish-button .components-button {
    background: var(--stryke-primary) !important;
    color: #fff !important;
}

.editor-post-publish-panel__header-publish-button .components-button:hover {
    background: var(--stryke-primary-hover) !important;
}

/* Post-publish links */
.editor-post-publish-panel__postpublish-buttons .components-button.is-primary {
    background: var(--stryke-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   13. ACCENT — Command Palette Selection
   ========================================================================== */

.commands-command-menu__container [cmdk-item][aria-selected="true"] {
    background: rgba(24, 155, 167, 0.08) !important;
    color: var(--stryke-primary) !important;
}

/* ==========================================================================
   14. BLOCK-SPECIFIC ACCENTS
   ========================================================================== */

/* Quote block border */
.editor-styles-wrapper .wp-block-quote {
    border-left-color: var(--stryke-primary) !important;
}

/* Button block default */
.editor-styles-wrapper .wp-block-button__link {
    background: var(--stryke-primary) !important;
    color: #fff !important;
}
