/**
 * cat-tree.css
 *
 * Стили карточек кошек для генеалогического дерева.
 * Переопределяем и дополняем базовые стили family-chart.
 */

/* ── Фон дерева ──────────────────────────────────────────────────────────────── */
.cat-pedigree-wrap {
    background-color: #1a1a2e;  /* Тёмно-синий фон */
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
}

/* Переопределяем CSS-переменные family-chart для нашей цветовой схемы */
.cat-pedigree-wrap.f3 {
    --female-color:     #c4748a;   /* Розовый для кошек */
    --male-color:       #5b8fa8;   /* Синий для котов */
    --genderless-color: #7a7a7a;
    --background-color: #1a1a2e;
    --text-color:       #ffffff;
}

/* ── Карточка кошки — внешняя обёртка ───────────────────────────────────────── */
/* .f3 div.card-cont — генерируется family-chart, мы стилизуем только внутренность */
.f3 .cat-card-inner {
    width: 180px;
    height: 230px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;

    /* family-chart v2 уже центрирует контейнер — translate НЕ нужен */
    transform: none;
}

/* Hover управляется динамически через JS (настройки наведения) */

/* ── Цвет по полу ───────────────────────────────────────────────────────────── */
.f3 .cat-card--female {
    background: linear-gradient(160deg, #c4748a 0%, #8b3a52 100%);
    border: 2px solid #e8a0b0;
}

.f3 .cat-card--male {
    background: linear-gradient(160deg, #5b8fa8 0%, #2c5f7a 100%);
    border: 2px solid #87bdd8;
}

/* ── Главная кошка (нижняя) — выделяем ─────────────────────────────────────── */
.f3 .cat-card--main {
    /* Масштаб и hover задаются через JS */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Hover главной карточки — через JS */

/* ── Блок фото ──────────────────────────────────────────────────────────────── */
.f3 .cat-card-photo {
    height: 120px;
    overflow: hidden;
    flex-shrink: 0;
}

.f3 .cat-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Обрезаем фото по размеру блока */
    object-position: center top; /* Выравниваем по верху (морда кошки обычно вверху) */
    display: block;
}

/* ── Блок текстовой информации ──────────────────────────────────────────────── */
.f3 .cat-card-info {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Титулы (CH.(WCF) и т.д.) — самый маленький текст */
.f3 .cat-card-titles {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Имя кошки — основной крупный текст */
.f3 .cat-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* Максимум 2 строки */
    -webkit-box-orient: vertical;
}

/* Порода и окрас */
.f3 .cat-card-breed {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Страна с флажком */
.f3 .cat-card-country {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: auto; /* Прижимаем к низу карточки */
}

/* ── Карточки в режиме редактора — небольшой визуальный отличитель ─────────── */
.f3 .cat-card--editable::after {
    content: '✎';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* ── Стили линий-связей между карточками ────────────────────────────────────── */
.f3 .links_view path {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2px;
    fill: none;
}

/* ── Кнопки добавления (+) в режиме редактора ──────────────────────────────── */
.f3 .card_add rect {
    fill: rgba(255, 255, 255, 0.1);
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 2px;
    cursor: pointer;
}

.f3 .card_add:hover rect {
    fill: rgba(255, 255, 255, 0.2);
}

.f3 .card_add text {
    fill: rgba(255, 255, 255, 0.8);
    font-size: 24px;
}

/* ── Форма редактирования (popup от family-chart) ───────────────────────────── */
/* family-chart создаёт форму с классом .f3-form */
.f3 .f3-form {
    background: #2a2a4a;
    color: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.f3 .f3-form label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.f3 .f3-form input,
.f3 .f3-form select {
    background: #1a1a2e;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 6px 8px;
}

/* ── Адаптив для мобильных ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cat-pedigree-wrap {
        height: 500px !important;
    }

    .f3 .cat-card-inner {
        width: 130px;
        height: 180px;
    }

    .f3 .cat-card-photo {
        height: 85px;
    }

    .f3 .cat-card-name {
        font-size: 11px;
    }

    .f3 .cat-card-titles {
        display: none; /* Скрываем титулы на мобиле — не помещаются */
    }
}

/* ── Питомник (новое поле) ───────────────────────────────────────────────────── */
.f3 .cat-card-cattery {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Линии между карточками — видимые по умолчанию ──────────────────────────── */
/* family-chart рисует линии внутри svg.main_svg в группе .links_view */
.f3 svg.main_svg .links_view path,
.f3 svg.main_svg .links_view line {
    stroke: rgba(255, 255, 255, 0.45) !important;
    stroke-width: 2px !important;
    fill: none !important;
    opacity: 1 !important;
}

/* При наведении линии на пути к главной кошке ярче */
.f3 svg.main_svg .links_view path.f3-path-to-main,
.f3 svg.main_svg .links_view line.f3-path-to-main {
    stroke: rgba(255, 255, 255, 0.9) !important;
    stroke-width: 2.5px !important;
}

/* ── Произвольные поля с подписью ────────────────────────────────────────────── */
.f3 .cat-card-field {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f3 .cat-card-field .cat-card-field-lbl {
    opacity: 0.65;
    font-size: 9px;
}

/* ── Обёртка карточки с кнопками ────────────────────────────────────────────── */
/* family-chart позиционирует card_cont — внутри него наша обёртка */
.f3 .cat-card-wrap {
    position: relative;
    display: inline-block;
}

/* ── Панель кнопок — справа от карточки ─────────────────────────────────────── */
.f3 .cat-card-actions {
    position: absolute;
    right: -44px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    /* Задержка скрытия 300ms — мышь успевает добраться до кнопок */
    transition: opacity 0.15s ease 0s;
    z-index: 20;
    /* Расширяем зону hover — невидимый padding слева соединяет карточку и кнопки */
    padding-left: 14px;
}

/* Показываем кнопки при наведении на обёртку */
.f3 .cat-card-wrap:hover .cat-card-actions {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.1s ease 0s;
}

/* Кнопки не скрываются пока мышь над ними */
.f3 .cat-card-actions:hover {
    opacity: 1;
    pointer-events: auto;
}

/* ── Одна кнопка ─────────────────────────────────────────────────────────────── */
.f3 .cat-card-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.f3 .cat-card-btn svg {
    width: 14px;
    height: 14px;
}

/* 🔍 Кнопка подробнее — светло-голубая */
.f3 .cat-card-btn--modal {
    background: rgba(135, 189, 216, 0.9);
    color: #1a2a3a;
}
.f3 .cat-card-btn--modal:hover {
    background: #87bdd8;
    transform: scale(1.15);
}

/* 🎯 Кнопка центрировать — светло-розовая */
.f3 .cat-card-btn--center {
    background: rgba(232, 160, 176, 0.9);
    color: #3a1a2a;
}
.f3 .cat-card-btn--center:hover {
    background: #e8a0b0;
    transform: scale(1.15);
}

/* На мобиле кнопки всегда видны (нет hover) */
@media (max-width: 640px) {
    .f3 .cat-card-actions {
        opacity: 1;
        pointer-events: auto;
        right: -34px;
    }
    .f3 .cat-card-btn {
        width: 26px;
        height: 26px;
    }
    .f3 .cat-card-btn svg {
        width: 12px;
        height: 12px;
    }
}

/* ── Круглый стиль карточек ──────────────────────────────────────────────────── */
.f3 .cat-card-round-wrap {
    position: relative;
    padding-bottom: 4px;
}

/* Кнопки для круглого стиля — под кругом */
.f3 .cat-card-actions--round {
    position: absolute;
    right: -38px;
    top: 10px;
    flex-direction: column;
    gap: 6px;
}

/* Главная карточка в круглом стиле */
.f3 .cat-card-main-round .cat-card-round-circle {
    box-shadow: 0 0 0 3px #fff, 0 4px 20px rgba(0,0,0,0.5) !important;
    transform: scale(1.05);
}

/* Линии для круглого стиля — чуть тоньше */
.f3.cat-style-round svg.main_svg .links_view path,
.f3.cat-style-round svg.main_svg .links_view line {
    stroke-width: 1.5px !important;
}

/* ── Панель управления (правый нижний угол блока) ────────────────────────────── */
.cat-ped-ctrl-panel {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
}

.cat-ped-ctrl-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
    padding: 0;
    opacity: 0.75;
}

.cat-ped-ctrl-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Кнопка анимации — тёплый акцент */
.cat-ped-ctrl-anim {
    background: rgba(239, 159, 39, 0.92);
    color: #3a2800;
}
.cat-ped-ctrl-anim[data-anim-running="1"] {
    background: rgba(196, 116, 138, 0.92);
    color: #2a0010;
}

/* Кнопка zoom */
.cat-ped-ctrl-zoom {
    background: rgba(90, 160, 200, 0.92);
    color: #001828;
}
.cat-ped-ctrl-zoom[data-zoomed="1"] {
    background: rgba(100, 180, 130, 0.92);
    color: #001208;
}
.cat-ped-ctrl-zoom svg {
    width: 18px;
    height: 18px;
}

/* ── Значок "В продаже" ─────────────────────────────────────────────────────── */
.f3 .cat-card-sale-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #e8a030;
    color: #1a0a00;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.4px;
    z-index: 5;
    pointer-events: none;
}
.f3 .cat-card-sale-badge--round {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    white-space: nowrap;
}