/* public/css/components/property-card.css
   Shared component: Property Owner Card (.prop-owner-card*)
   Used on: /dashboard (dashboard/index.html.twig + dashboard/_properties.html.twig)
            /properties (properties/index.html.twig)
*/

/* ── Property Owner Card ── */
.prop-owner-card {
    background: var(--color-card-background, #FFFFFF);
    border: var(--border-width-thin) solid var(--color-border-card, #D7DFF2);
    border-radius: var(--border-radius);
    padding-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 12px;
    container-type: inline-size;
    container-name: prop-card;
    position: relative;
}

.prop-owner-card__cover {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: var(--color-surface-subtle, #F5F8FF);
}

/* <picture> от preview_picture — inline по умолчанию и схлопывается, из-за чего
   LQIP-плейсхолдер (background на <picture>) не виден, пока грузится <img>.
   Растягиваем picture на весь cover, чтобы LQIP перекрывал площадь до загрузки. */
.prop-owner-card__cover picture {
    display: block;
    width: 100%;
    height: 100%;
}

.prop-owner-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Кликабельное фото (TASK-000484) — ведёт на ту же цель, что и «Деталі».
   Presentational duplicate для AT (tabindex=-1 + aria-hidden в разметке), поэтому
   без :hover/:focus стилизации. height:100% обязателен — иначе фото схлопнется
   относительно .prop-owner-card__cover (height: 180px). */
.prop-owner-card__cover-link {
    display: block;
    width: 100%;
    height: 100%;
}

.prop-owner-card__photo--placeholder {
    object-fit: contain;
    padding: 40px;
    opacity: 0.4;
}

.prop-owner-card__status {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    z-index: var(--z-card-content);
    pointer-events: none;
}

.prop-owner-card__status--rented {
    background: var(--color-success-strong, #009F13);
    color: var(--color-white, #FFFFFF);
}

.prop-owner-card__status--free {
    background: var(--color-card-background, #FFFFFF);
    color: var(--color-text, #141C30);
}

.prop-owner-card__menu-anchor {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: var(--z-card-control);
}

/* Override dropdown trigger to Figma square 36×36 translucent */
.prop-owner-card__menu-anchor .header-btn.with-text {
    width: 36px;
    height: 36px;
    min-width: 0;
    background: var(--color-white-alpha-50);
    border: none;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    gap: 0;
    box-shadow: none;
    color: var(--color-icon);
}

.prop-owner-card__menu-anchor .header-btn.with-text:hover {
    background: var(--color-white-alpha-80);
    box-shadow: none;
    transform: none;
    color: var(--color-icon);
}

.prop-owner-card__menu-anchor .header-btn svg {
    width: 24px;
    height: 24px;
    color: var(--color-icon);
}

.prop-owner-card__menu-anchor .menu-chevron {
    display: none;
}

.prop-owner-card__body {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prop-owner-card__price {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    color: var(--color-text, #141C30);
}

/* Вторинна сума — найближче нарахування (прорейт), показуємо лише якщо ≠ ставці. */
.prop-owner-card__next-charge {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted, #898E97);
    white-space: nowrap;
}
.prop-owner-card__next-charge svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.prop-owner-card__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    color: var(--color-text, #141C30);
}

.prop-owner-card__address {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text-muted, #898E97);
}

.prop-owner-card__divider {
    border: none;
    border-top: var(--border-width-thin) solid var(--color-border-card, #D7DFF2);
    margin: 0;
    height: 0;
}

.prop-owner-card__debt {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    min-height: 24px;
}

.prop-owner-card__debt--has {
    color: var(--color-danger-strong, #C30A41);
}

.prop-owner-card__debt--has svg {
    color: var(--color-danger-strong, #C30A41);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.prop-owner-card__debt--clear {
    color: var(--color-success-strong, #009F13);
}

.prop-owner-card__debt--clear svg {
    color: var(--color-success-strong, #009F13);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.prop-owner-card__info {
    background: var(--color-surface-subtle, #F5F8FF);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.prop-owner-card__info-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
    flex: 1;
}

.prop-owner-card__info-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text-muted, #898E97);
}

.prop-owner-card__info-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text, #141C30);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prop-owner-card__info-divider {
    width: 1px;
    height: 40px;
    background: var(--color-border-card, #D7DFF2);
    flex-shrink: 0;
}

.prop-owner-card__actions {
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: auto;
}

.prop-owner-card__actions-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.prop-owner-card__details {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 132px;
    height: 52px;
    padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-2xl);
    background: var(--color-text, #141C30);
    opacity: 0.8;
    border: var(--border-width-thin) solid var(--color-white, #FFFFFF);
    border-radius: var(--border-radius);
    color: var(--color-white, #FFFFFF);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.15s;
}

.prop-owner-card__details:hover {
    opacity: 1;
    color: var(--color-white, #FFFFFF);
    text-decoration: none;
}

.prop-owner-card__icon-btn {
    width: 52px;
    height: 52px;
    background: var(--color-surface-subtle, #F5F8FF);
    border: var(--border-width-thin) solid var(--color-border-card, #D7DFF2);
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icon);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.prop-owner-card__icon-btn:hover {
    background: var(--color-surface-lavender);
    border-color: var(--color-primary);
    color: var(--color-icon);
    text-decoration: none;
}

.prop-owner-card__toggle {
    /* ui-toggle (Brand Book base) задаёт width/height/display/position — наш кастомный
       размер карточного тоггла перекрывает их явно, не завися от порядка загрузки CSS. */
    position: relative;
    width: 88px;
    height: 48px;
    border: none;
    border-radius: 40px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.prop-owner-card__toggle--on {
    background: var(--color-success-strong, #009F13);
    justify-content: flex-end;
}

.prop-owner-card__toggle--off {
    background: var(--color-text-muted, #898E97);
    justify-content: flex-start;
}

.prop-owner-card__toggle-thumb {
    width: 40px;
    height: 40px;
    background: var(--color-white, #FFFFFF);
    border-radius: 50%;
    display: block;
}

/* ── Inactive card: grayscale + opacity mute ──
   Mute ТОЛЬКО контент карточки (cover/body/actions), а НЕ корень —
   иначе CSS filter на предке засеривает и overlay с оранжевой кнопкой «Активувати». */
.prop-owner-card--inactive {
    position: relative;
}

.prop-owner-card--inactive .prop-owner-card__cover,
.prop-owner-card--inactive .prop-owner-card__body,
.prop-owner-card--inactive .prop-owner-card__actions {
    filter: grayscale(1);
    opacity: 0.7;
}

/* Overlay with centered Activate button */
.prop-owner-card__activate-overlay {
    position: absolute;
    inset: 0;
    /* Полупрозрачный белый overlay для неактивной карточки (TD-63 Фаза C:
       нет канонического токена под это значение → прямое значение). */
    background: var(--color-white-alpha-60);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    z-index: var(--z-card-scrim-top);
    pointer-events: none;
}

/* Разрешить клики по интерактивным дочерним элементам (split-button) */
.prop-owner-card__activate-overlay > * {
    pointer-events: auto;
}

/* ── Actions reflow: container queries по ширине самой карточки ── */
/* Контент actions (без padding): innerContent = cardWidth − 40 (2×20 padding).
   Базовая сумма групп: 132 + 6 + 168 + 6 + 88 = 400px → нужен innerContent ≥ 400, т.е. cardWidth ≥ 440.
   Подбрейкпоинты:
   - ≤439: details на отдельную строку, icons + toggle рядом
     (icons 168 + 6 + toggle 88 = 262 → нужен innerContent ≥ 262 → cardWidth ≥ 302)
   - ≤301: все 3 группы на отдельных строках; иконки space-between */

@container prop-card (max-width: 439px) {
    .prop-owner-card__actions {
        justify-content: space-between;
    }
    .prop-owner-card__actions-group--details {
        flex-basis: 100%;
    }
    .prop-owner-card__actions-group--details .prop-owner-card__details {
        max-width: none;
        width: 100%;
    }
    .prop-owner-card__actions-group--icons {
        display: contents;
    }
}

@container prop-card (max-width: 301px) {
    .prop-owner-card__actions-group--icons {
        flex-basis: 100%;
        justify-content: space-between;
    }
    .prop-owner-card__actions-group--toggle {
        flex-basis: 100%;
        justify-content: stretch;
    }
    .prop-owner-card__actions-group--toggle .prop-owner-card__toggle {
        width: 100%;
    }
}

/* ===== Activate modal: plan tiles / balance / terms / actions (shared dashboard+properties) ===== */
/* ── Activate modal: plan tiles ── */
.ui-plan-selector {
    display: flex;
    gap: 12px;
    margin: 4px 0 20px;
}

.ui-plan-option {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: 18px 16px;
    border: var(--border-width-normal) solid var(--color-border, rgba(20, 28, 48, .12));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.ui-plan-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ui-plan-option:hover {
    border-color: var(--color-info, #4f7cf7);
}

.ui-plan-option:has(input:checked) {
    border-color: var(--color-info, #4f7cf7);
    background: var(--color-primary-soft, rgba(79, 124, 247, .08));
    box-shadow: inset 0 0 0 1px var(--color-info, #4f7cf7);
}

.ui-plan-option__label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text, #141c30);
}

.ui-plan-option__price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-info, #4f7cf7);
}

/* ── Activate modal: disabled plan tile (insufficient balance) ── */
.ui-plan-option--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Remove hover/selected visual effects on disabled tiles */
.ui-plan-option--disabled:hover {
    border-color: var(--color-border, rgba(20, 28, 48, .12));
}

.ui-plan-option--disabled:has(input:checked) {
    border-color: var(--color-border, rgba(20, 28, 48, .12));
    background: none;
    box-shadow: none;
}

/* ── Activate modal: balance info row ── */
.ui-plan-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary, #6b7280);
}

.ui-plan-balance strong {
    color: var(--color-text, #141c30);
}

.ui-plan-balance__topup {
    font-size: var(--font-size-xs);
    color: var(--color-info, #4f7cf7);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.ui-plan-balance__topup:hover {
    text-decoration: underline;
}

/* terms-required: stack message + CTA vertically (base .ui-alert is a flex row) */
#activate-error.ui-alert--stacked {
    flex-direction: column;
    align-items: stretch;
}

/* terms-required CTA: full-width button on its own line inside the error zone.
   Scoped under .ui-alert to win specificity over the base .btn (inline-flex).
   Use flex centering (not display:block) so the base .btn vertical/horizontal
   text alignment is preserved. */
.ui-alert .ui-terms-accept-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

/* horizontal action buttons */
.ui-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: var(--spacing-sm);
}

/* compact activate button — used in _property_owner_card.html.twig and _property_menu_dropdown.html.twig */
.activate-property-btn {
    width: auto;
    flex: 0 0 auto;
}