/**
 * Inline Editor Styles
 *
 * Стили для inline редактора контента с contenteditable
 *
 * @version 2.0
 * @date 2025-12-24
 */

/* ============================================
   Режим редактирования - подсветка
   ============================================ */

/* Подсветка редактируемых элементов в edit-mode */
body.edit-mode [data-edit-id] {
    outline: 2px dashed #ffc107;
    outline-offset: 2px;
    cursor: text;
    transition: outline 0.2s ease, background-color 0.2s ease;
    position: relative;
}

body.edit-mode [data-edit-id]:hover {
    outline-color: #fd7e14;
    background-color: rgba(255, 193, 7, 0.1);
    outline-width: 3px;
}

/* Тултип "Редактировать" при наведении — скрыт в edit-mode (избыточен) */
/* Hover tooltips are suppressed in edit-mode: they overlap text and are redundant */
body.edit-mode [data-edit-id]:hover::before {
    content: none;
}

/* ============================================
   Активный editable элемент
   ============================================ */

/* Элемент с contenteditable=true */
.editable-active {
    outline: 2px solid #ffc107 !important;
    outline-offset: 2px;
}

/* При фокусе - редактирование */
.editable-editing {
    outline: 3px solid #fd7e14 !important;
    background-color: rgba(253, 126, 20, 0.05) !important;
    box-shadow: 0 0 0 4px rgba(253, 126, 20, 0.15);
}

/* Tooltip disabled — caused layout jumps. Hints shown via notifications instead. */

/* ============================================
   Состояния сохранения
   ============================================ */

/* Сохранение в процессе */
.editable-saving {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.editable-saving::after {
    content: '⏳';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Успешно сохранено */
.editable-saved {
    outline: 3px solid #28a745 !important;
    background-color: rgba(40, 167, 69, 0.1) !important;
}

/* Saved tooltip disabled — shown via notification instead. */

/* ============================================
   Уведомления
   ============================================ */

.inline-editor-notifications {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

.inline-editor-notifications .alert {
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   Кнопка Edit Mode
   ============================================ */

.admin-edit-mode-btn {
    position: fixed;
    bottom: 20px;
    right: 80px;  /* Рядом с шестерёнкой (она на right: 20px, ширина 50px + gap 10px) */
    z-index: 1049;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.admin-edit-mode-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.admin-edit-mode-btn.active {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(253, 126, 20, 0);
    }
}

/* ============================================
   Адаптивность
   ============================================ */

@media (max-width: 768px) {
    .inline-editor-notifications {
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .admin-edit-mode-btn {
        bottom: 80px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    /* Hover tooltip suppressed globally — no mobile override needed */
}

/* ============================================
   Темная тема (опционально)
   ============================================ */

@media (prefers-color-scheme: dark) {
    body.edit-mode [data-edit-id] {
        outline-color: #ffca2c;
    }

    body.edit-mode [data-edit-id]:hover {
        background-color: rgba(255, 202, 44, 0.15);
        outline-color: #fd7e14;
    }

    .editable-editing {
        background-color: rgba(253, 126, 20, 0.1) !important;
    }

    .editable-saved {
        background-color: rgba(40, 167, 69, 0.15) !important;
    }
}

/* Edit-mode: freeze AOS animations — prevents layout re-triggers on focus */
body.edit-mode [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Edit-mode: suppress hover animations to prevent cursor jumping */
body.edit-mode .service-card,
body.edit-mode .staff,
body.edit-mode .result-item,
body.edit-mode .contact-item,
body.edit-mode .principle-item {
    transition: none !important;
    transform: none !important;
}
body.edit-mode .service-card:hover,
body.edit-mode .staff:hover,
body.edit-mode .result-item:hover,
body.edit-mode .contact-item:hover,
body.edit-mode .principle-item:hover {
    transform: none !important;
}