/*
 * Styles complémentaires du modal d'édition.
 *
 * Règle de ce fichier:
 * - on réutilise en priorité les classes du composeur create (.cab-*)
 * - ici on ajoute seulement ce qui est spécifique à l'édition
 */

#blogPostEditModal {
    z-index: var(--z-blog-modal, 110080);
}

#blogPostEditModal .modal-dialog {
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
}

#blogPostEditModal .modal-content {
    max-height: calc(100vh - 2rem);
    background: #f0f0f0;
    box-shadow: 0 18px 42px rgba(100, 116, 139, 0.35);
}

#blogPostEditModal .modal-body {
    overflow-y: auto;
}

#blogPostEditModal textarea,
#blogPostEditModal input,
#blogPostEditModal select {
    background: #ffffff;
}

#blogPostEditModal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
}

.blog-post-edit-image-preview-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f8fafc;
    max-width: 100%;
    max-height: 360px;
}

.blog-post-edit-image-preview {
    display: block;
    width: 100%;
    max-height: none;
    object-fit: contain;
}

/*
 * Backdrop fallback de l'édition.
 * Sert de sécurité si bootstrap ne gère pas le backdrop.
 */
.blog-post-edit-fallback-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: var(--z-blog-modal-backdrop, 110070);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.blog-post-edit-fallback-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="dark"] #blogPostEditModal .modal-content {
    background: #0f172a;
    color: #f8fafc;
    box-shadow:
        0 0 0 5px rgba(68, 221, 255, 0.2),
        0 18px 42px rgba(2, 6, 23, 0.65);
}

[data-theme="dark"] #blogPostEditModal .modal-header,
[data-theme="dark"] #blogPostEditModal .modal-footer {
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-visibility-inline {
    background: #1f2937;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-visibility-select {
    color: #f8fafc;
}

[data-theme="dark"] #blogPostEditModal textarea,
[data-theme="dark"] #blogPostEditModal input,
[data-theme="dark"] #blogPostEditModal select {
    background: #111827;
    color: #f8fafc;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-panel {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.66);
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-title {
    color: #cbd5e1;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-item:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-item:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-categories {
    border-bottom-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-category:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-category:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-emoji-category.is-active {
    color: #7dd3fc;
    background: #1e3a5f;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-add-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon {
    background: #111827;
    color: #e5edf9;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon:focus-visible {
    background: #1f2937;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon.is-more {
    background: transparent;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon.is-more:hover,
[data-theme="dark"] #blogPostEditModal .cab-composer-action-icon.is-more:focus-visible {
    background: #1e293b;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-background-picker {
    background: #111827;
    border-color: #334155;
}

[data-theme="dark"] #blogPostEditModal .cab-composer-background-section-title {
    color: #cbd5e1;
}