@use '../base/variables' as *;
@use '../base/colors' as *;

.medium-editor-toolbar {
    display: none;
}

// --------------------------------------------------------------------------
// Editor toolbar — lite FLOATING bar (not docked).
//
// A true floating overlay: it never reserves layout space (no compensating
// body/content padding), it just sits on top of the page. Mobile/tablet:
// floating pill near the bottom, centered, own margin from the viewport edge.
// Desktop ($breakpoint-lg+): floating vertical rail near the left edge,
// vertically centered, sized to its own content (not full viewport height).
// --------------------------------------------------------------------------

$editor-toolbar-rail-width: 88px;

.editor-toolbar {
    position: fixed;
    left: 50%;
    bottom: $spacing-md;
    transform: translateX(-50%);
    width: auto;
    max-width: 480px;
    background: $color-light;
    border-radius: $radius-md;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    padding: $spacing-xs $spacing-sm;
    overflow-x: auto;

    @media (min-width: $breakpoint-lg) {
        left: $spacing-md;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: $editor-toolbar-rail-width;
        max-width: none;
        max-height: calc(100vh - $spacing-xxl);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: $spacing-md;
        padding: $spacing-md $spacing-xs;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.editor-toolbar__brand {
    display: none;

    @media (min-width: $breakpoint-lg) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-xs;
        text-align: center;
        padding-bottom: $spacing-sm;
        border-bottom: 1px solid $color-primary-lighter;
    }
}

.editor-toolbar__title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: $color-dark;
    overflow-wrap: anywhere;
}

.locale-badge {
    display: inline-block;
    background: $color-primary;
    color: $color-light;
    padding: 2px 10px;
    border-radius: $radius-sm;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.editor-toolbar__actions {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    flex: 1;

    @media (min-width: $breakpoint-lg) {
        flex-direction: column;
        align-items: stretch;
        flex: 1;
    }
}

.editor-toolbar__action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: $spacing-xs;
    font-size: 12px;
    font-weight: 600;
    font-family: $font-family-sans;
    color: $color-primary-dark;
    background: transparent;
    border: 1px solid $color-primary;
    border-radius: $radius-sm;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;

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

    @media (min-width: $breakpoint-lg) {
        width: auto;
    }
}

.editor-toolbar__action-icon {
    --icon-size: 18px;
}

// Tooltip: shows the action's label (via `data-tooltip`) on hover/focus, since
// icons alone don't self-describe. Rendered in `document.body` with `position:
// fixed` by `Tooltip.ts` (not a CSS `::after`) because `.editor-toolbar` clips
// overflow for its scrollable rail/pill, which would otherwise hide it.
.toolbar-tooltip {
    position: fixed;
    padding: 4px 8px;
    border-radius: $radius-sm;
    background: $color-dark;
    color: $color-light;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 1100;

    &.is-visible {
        opacity: 1;
    }
}

.editor-toolbar__action--primary {
    background: $color-primary;
    color: $color-light;

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

.save-status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: $radius-sm;

    svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    &:empty {
        display: none;
    }

    @media (min-width: $breakpoint-lg) {
        width: 100%;
    }

    &.success {
        background: #d4edda;
        color: #155724;
    }

    &.warning {
        background: $color-warning;
        color: $color-light;
    }

    &.info {
        background: #d1ecf1;
        color: #0c5460;
    }

    &.error {
        background: #f8d7da;
        color: #721c24;
    }

    @media (min-width: $breakpoint-lg) {
        text-align: center;
        margin-top: auto;
    }
}

.editor-content {
    [data-editable="true"] {
        outline: 2px dashed transparent;
        transition: outline 0.2s;

        &:hover {
            outline-color: $color-primary;
        }

        &:focus {
            outline-color: $color-primary;
            outline-style: solid;
        }

        // Ghost-text placeholder (input-like): shown only while the field has zero
        // content, never part of the actual value — ContentSerializer reads
        // `innerHTML`, which stays empty, so this is never persisted on save.
        &[data-placeholder]:empty::before {
            content: attr(data-placeholder);
            pointer-events: none;
        }
    }
}

// --------------------------------------------------------------------------
// Editable image fields — empty-state placeholder
//
// Shared across every `[data-editable-image="true"]` field (Actualité hero/block
// images, and any other template using the same MediaSelectorModal flow) so admins
// have a clear "click to add an image" affordance before one is picked, instead of
// a broken/blank `<img>` pointing at a placeholder file that doesn't exist.
// `MediaSelectorModal.selectMedia()` removes `.is-empty-image` once an image is chosen.
// --------------------------------------------------------------------------

[data-editable-image="true"] {
    position: relative;

    &.is-empty-image {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        background: $color-neutral;
        border: 2px dashed $color-primary;
        border-radius: $radius-sm;
        transition: background-color 0.2s, border-color 0.2s;

        img {
            display: none;
        }

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

// Hover tooltip carrying the explicit "add"/"edit" button (injected by
// MediaSelectorModal.registerField()). Replaces the old "click anywhere on the
// image to open the picker" behavior: the field itself is inert, only this
// button opens the modal, so a stray click on the image no longer reopens it.
.editable-image__tooltip {
    position: absolute;
    top: $spacing-xs;
    right: $spacing-xs;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: $spacing-xs;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;

    [data-editable-image="true"]:hover & {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.editable-image__tooltip-btn {
    display: inline-flex;
    align-items: center;
    gap: $spacing-xs;
    padding: $spacing-xs $spacing-sm;
    background: $color-primary;
    color: $color-light;
    border: none;
    border-radius: $radius-sm;
    font-family: $font-family-sans;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s;

    &:hover {
        background: $color-primary-dark;
    }
}

.editable-image__tooltip-remove {
    background: $color-dark;
}

// `display: inline-flex` on the base button class would otherwise defeat `[hidden]`.
.editable-image__tooltip-remove,
.editable-image__tooltip-frame {
    &[hidden] {
        display: none;
    }
}

// Slot being framed by ImageFrameEditor.ts: the image itself becomes the focal-point picker.
.is-framing {
    cursor: crosshair;
    outline: 3px solid $color-primary;
    outline-offset: -3px;
    touch-action: none;

    .editable-image__tooltip {
        display: none;
    }
}

.image-frame-editor {
    position: fixed;
    bottom: $spacing-md;
    left: 50%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;
    width: min(360px, calc(100vw - 32px));
    padding: $spacing-sm $spacing-md;
    background: $color-light;
    color: $color-dark;
    border-radius: $radius-sm;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    font-family: $font-family-sans;
    font-size: 13px;
    transform: translateX(-50%);

    &[hidden] {
        display: none;
    }
}

.image-frame-editor__title {
    margin: 0;
    font-weight: 600;
}

.image-frame-editor__hint {
    margin: 0;
    opacity: 0.7;
}

.image-frame-editor__row {
    display: flex;
    flex-direction: column;
    gap: 4px;

    &[hidden] {
        display: none;
    }
}

.image-frame-editor__actions {
    display: flex;
    justify-content: flex-end;
    gap: $spacing-xs;
}

.image-frame-editor__btn {
    padding: $spacing-xs $spacing-sm;
    background: $color-primary;
    color: $color-light;
    border: none;
    border-radius: $radius-sm;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.image-frame-editor__btn--secondary {
    background: transparent;
    color: $color-dark;
    border: 1px solid currentColor;
}

.editable-image__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-xs;
    color: $color-primary-dark;
    font-family: $font-family-sans;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.editable-image__placeholder-icon {
    font-size: 32px;
    line-height: 1;
}

.editable-image__placeholder-label {
    font-size: 14px;
    font-weight: 600;
}

// --------------------------------------------------------------------------
// Actualité — dynamic block editor controls (add/remove/reorder, mobile-position toggle)
//
// Admin-only chrome for the Actualité template's repeatable content-blocks list (see
// spec-driven-development/rules/section-component-architecture.md, "Repeatable Block
// Templates" exception). Markup only exists in the DOM when `editMode` is true (guarded
// in templates/components/_actualite-block-controls.html.twig and
// templates/pages/actualite.html.twig) — never rendered on the public page — so these
// rules are inert (no matching DOM) outside edit mode despite being compiled into the
// shared public CSS bundle, consistent with the existing `.editor-toolbar`/`.editor-content`
// rules above.
// --------------------------------------------------------------------------

.actualite-block {
    position: relative;
}

.actualite-block__editor-controls {
    display: flex;
    flex-direction: column;
    gap: $spacing-xs;
    border: 1px dashed $color-primary;
    position: absolute;
    top: 0;
    left: 50%;
    width: 90vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;

    // `.actualite-block--text-image` switches to `flex-direction: row` at
    // $breakpoint-md (see _actualite-block.scss), which would otherwise squeeze
    // these controls into a 3rd column alongside the image/text. Force them to
    // stay a full-width bar above both, same as the text-only block layout.
    @media (min-width: $breakpoint-md) {
        flex-basis: 100%;
        order: -1;
    }
}

.actualite-block__editor-controls-row {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    margin: 0 auto;
    z-index: 1;
}

.actualite-block__control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    font-family: $font-family-sans;
    line-height: 1.4;
    color: $color-primary-dark;
    background: $color-light;
    border: 1px solid $color-primary;
    border-radius: $radius-sm;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    z-index: 1;

    &:hover:not(:disabled) {
        background: $color-primary;
        color: $color-light;
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

.actualite-block__control--remove {
    margin-left: auto;
    color: #a94442;
    border-color: #a94442;

    &:hover:not(:disabled) {
        background: #a94442;
        color: $color-light;
    }
}

.actualite-block__control--mobile-position.is-active {
    background: $color-primary;
    color: $color-light;
}

.actualite-block__mobile-position-toggle {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    flex-wrap: wrap;
}

.actualite-block__mobile-position-label {
    font-size: 13px;
    font-family: $font-family-sans;
    color: $color-dark;
}

.actualite-page__add-block {
    display: flex;
    gap: $spacing-sm;
    flex-wrap: wrap;
    margin: $spacing-md 0;
    padding: $spacing-sm;
    border: 1px dashed $color-primary;
    border-radius: $radius-sm;
}

.actualite-block__control--add {
    padding: $spacing-xs $spacing-sm;
    font-weight: 600;
}

// --------------------------------------------------------------------------
// Actualité — page-level tag picker (TagPicker.ts)
//
// Also admin/edit-mode only: rendered in place of the public `.actualite-page__tags` pill
// list only when `editMode` is true (see templates/pages/actualite.html.twig).
// --------------------------------------------------------------------------

.tag-picker {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    flex-wrap: wrap;
    margin-top: $spacing-sm;
}

.tag-picker__chips {
    display: flex;
    gap: $spacing-xs;
    flex-wrap: wrap;
}

.tag-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 14px;
    font-size: 14px;
    font-family: $font-family-sans;
    color: $color-primary-dark;
    background: $color-light;
    border: 1px solid $color-primary;
    border-radius: 40px;
}

.tag-picker__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: $color-primary-dark;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;

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

.tag-picker__add-select {
    padding: 4px 10px;
    font-size: 14px;
    font-family: $font-family-sans;
    color: $color-primary-dark;
    background: $color-light;
    border: 1px solid $color-primary;
    border-radius: $radius-sm;
    cursor: pointer;

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

.tag-picker__create-input {
    padding: 4px 10px;
    font-size: 14px;
    font-family: $font-family-sans;
    color: $color-primary-dark;
    background: $color-light;
    border: 1px solid $color-primary;
    border-radius: $radius-sm;
}

.tag-picker__create-button {
    padding: 4px 10px;
    font-size: 14px;
    font-family: $font-family-sans;
    color: $color-light;
    background: $color-primary;
    border: 1px solid $color-primary;
    border-radius: $radius-sm;
    cursor: pointer;

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

// --------------------------------------------------------------------------
// Preview mode — toggled by PreviewToggle.ts (`body.is-previewing`).
//
// Hides every editing affordance and collapses the toolbar to its preview toggle.
// `.editor-content` is also `inert` (interaction is blocked in JS/HTML, not here).
// Chrome that only exists in edit mode is listed explicitly; add new edit-only
// controls to the list below.
// --------------------------------------------------------------------------

.is-previewing {
    .editor-toolbar__brand,
    .editor-toolbar__actions > :not(#preview-toggle-btn),
    .save-status {
        display: none;
    }

    .medium-editor-toolbar,
    .medium-editor-anchor-preview,
    .editable-image__tooltip,
    .image-frame-editor,
    .editable-image__placeholder,
    .href-editor__badge,
    .actualite-block__editor-controls,
    .actualite-block__control,
    .actualite-page__add-block,
    .project-detail__add-block,
    .project-detail-block-gallery__remove,
    .project-detail-block-paragraphs-image__paragraph-remove,
    .project-detail-info__item-handle,
    .project-detail-info__item-remove,
    .tag-picker {
        display: none !important;
    }

    .editor-content {
        [data-editable="true"] {
            outline: none;

            &[data-placeholder]:empty::before {
                content: none;
            }
        }

        [data-editable-image="true"].is-empty-image {
            display: none;
        }
    }
}