/* app/static/css/containers/card.css */
/**
 * Стили карточек
 * Только уникальные свойства, отсутствующие в утилитах
 * Базовые стили (фон, границы, тени, скругления) задаются через app- классы в макросе
 */

/* ------------------------------------------------------------------
   1. БАЗОВЫЙ КОНТЕЙНЕР КАРТОЧКИ
------------------------------------------------------------------ */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    transition: box-shadow var(--app-transition-fast) ease;
}

/* Базовый фон карточки определяется через CSS-переменную */
/* Конкретные компоненты переопределяют --card-bg-default в своих CSS-файлах */
.light-theme {
    --card-bg-default: transparent;
}

.dark-theme {
    --card-bg-default: transparent;
}

.card {
    background-color: var(--card-bg-default, transparent);
}

/* ------------------------------------------------------------------
   2. КЛИКАБЕЛЬНЫЕ КАРТОЧКИ
------------------------------------------------------------------ */

.card--clickable {
    cursor: pointer;
}

.card--clickable:hover {
    box-shadow: var(--app-shadow-lg) !important;
}

/* ------------------------------------------------------------------
   3. СТИКЕР-ИКОНКА (эффект наклейки)
------------------------------------------------------------------ */

.card__sticker {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-lg); /* Как у самой карточки */
    box-shadow: var(--app-shadow-lg);
    z-index: 10;
}

/* Отступ для заголовка, если есть стикер */
.card__sticker + .card__title-wrapper {
    padding-top: var(--app-spacing-md);
}

/* ------------------------------------------------------------------
   4. СЕКЦИИ КАРТОЧКИ
------------------------------------------------------------------ */

.card__header {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    margin-bottom: 0;
}

.card__header + .card__title-wrapper {
    padding-top: 0;
}

.card__title-wrapper {
    padding: var(--app-spacing-md) var(--app-spacing-lg) 0 var(--app-spacing-lg);
}

.card__title {
    margin-top: 0;
    margin-bottom: 0;
}

.card__body {
    padding: var(--app-spacing-lg);
    flex: 1 0 auto; /* Растягивание контента внутри карточки */
}

.card__footer {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    margin-top: 0;
}

/* ------------------------------------------------------------------
   5. СКЕЛЕТОН (СОСТОЯНИЕ ЗАГРУЗКИ)
------------------------------------------------------------------ */

/* Контейнер скелетона - занимает всю карточку с учетом скругления */
.card__skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 10;
    display: flex;
    align-items: stretch;
    border-radius: inherit;
    overflow: hidden;
}

/* Полноразмерный скелетон на всю карточку */
.card__skeleton .app-skeleton-full {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    flex: 1;
}

/* Растягивание карточки со скелетоном только в grid-сетке */
[class*="app-col-span-"] .card:has(.card__skeleton),
[class*="md:app-col-span-"] .card:has(.card__skeleton),
.grid_item .card:has(.card__skeleton),
.h-100 .card:has(.card__skeleton) {
    height: 100%;
}

/* Убираем минимальную высоту - карточка должна равняться на соседей */
.card:has(.card__skeleton) {
    position: relative;
    min-height: 0;  /* Сбрасываем min-height */
    height: 100%;   /* Растягиваем на всю высоту родителя */
}

/* Для Bootstrap рядов - растягиваем через h-100 */
.row .col > .card:has(.card__skeleton) {
    height: 100%;
}

/* ------------------------------------------------------------------
   6. УПРАВЛЕНИЕ ВЫСОТОЙ
------------------------------------------------------------------ */

/* Режим равной высоты (grid_row) */
.app-grid.app-auto-rows-fr .card {
    height: 100%;
}

/* Режим разной высоты (grid_row_auto) - обычные карточки */
.app-grid:not(.app-auto-rows-fr) .card:not([class*="app-row-span-"]) {
    height: auto;
    min-height: 0;
}

/* Режим разной высоты (grid_row_auto) - карточки с rows>1 */
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-2 .card,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-3 .card,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-4 .card,
.app-grid:not(.app-auto-rows-fr) [class*="app-row-span-"] .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Растягивание контента для карточек с rows>1 */
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-2 .card__body,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-3 .card__body,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-4 .card__body,
.app-grid:not(.app-auto-rows-fr) [class*="app-row-span-"] .card__body {
    flex: 1 1 auto;
}

/* Фиксация заголовка и футера для карточек с rows>1 */
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-2 .card__title-wrapper,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-3 .card__title-wrapper,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-4 .card__title-wrapper,
.app-grid:not(.app-auto-rows-fr) [class*="app-row-span-"] .card__title-wrapper,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-2 .card__header,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-3 .card__header,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-4 .card__header,
.app-grid:not(.app-auto-rows-fr) [class*="app-row-span-"] .card__header,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-2 .card__footer,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-3 .card__footer,
.app-grid:not(.app-auto-rows-fr) .md\:app-row-span-4 .card__footer,
.app-grid:not(.app-auto-rows-fr) [class*="app-row-span-"] .card__footer {
    flex-shrink: 0;
}

/* Явная кастомная высота имеет приоритет */
.card[style*="height:"] {
    height: inherit !important;
}

/* ------------------------------------------------------------------
   7. АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
------------------------------------------------------------------ */

@media (max-width: 768px) {
    .card__sticker {
        top: -0.5rem;
        right: -0.5rem;
        width: 2rem;
        height: 2rem;
        font-size: var(--app-font-size-sm);
        border-radius: var(--app-radius-md);
    }

    .card__title-wrapper {
        padding: var(--app-spacing-md) var(--app-spacing-md) 0 var(--app-spacing-md);
    }

    .card__body,
    .card__skeleton {
        padding: var(--app-spacing-md);
    }

    .card__header,
    .card__footer {
        padding: var(--app-spacing-sm) var(--app-spacing-md);
    }
}