/*
 * Card (ТЗ ч.4, разд. 219–220): карточки разных типов различаются содержимым,
 * но радиус, тень, граница, паддинг и иерархия текста у них общие.
 * Доменные карточки (VehicleCard, ServerRow, ResourceCard…) собираются на этих
 * же примитивах — этап 5.
 */

.card {
    display: flex;
    position: relative;
    flex-direction: column;
    background: var(--bg-card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.card--flat {
    box-shadow: none;
}

.card--warm {
    background: var(--bg-warm);
}

.card--panel {
    border-radius: var(--radius-panel);
}

/* Кликабельная карточка: лёгкий подъём, без «прыжка» (ТЗ ч.4, разд. 239) */
.card--interactive:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
}

.card--interactive:focus-within {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-elevated);
}

.card.is-selected {
    border-color: var(--primary);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--primary);
}

.card.is-disabled {
    opacity: .6;
    pointer-events: none;
}

.card__media {
    position: relative;
    aspect-ratio: var(--ratio-card);
    background: var(--bg-soft);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Место изображения, когда кадра нет: нейтральная подложка со знаком раздела
   вместо выдуманной картинки (ТЗ ч.4, разд. 229). */
.media-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--bg-soft);
    color: var(--text-muted);
}

/* Брендовый кадр из assets/img/brand (App\Support\Media::picture).
   <picture> по умолчанию инлайновый — здесь он ведёт себя как блок-картинка
   и заполняет родителя, который задаёт пропорции (card__media и т.п.).
   В обычном потоке высота остаётся авто: процент от auto-высоты не считается. */
.brand-media {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bg-soft);
}

.brand-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Предмет на светлой подложке (машина в hero): кадр не режем. */
.brand-media--contain {
    background: transparent;
}

.brand-media--contain img {
    object-fit: contain;
}

/* Самостоятельный кадр вне карточки: пропорции задаёт --brand-media-ratio. */
.brand-media--ratio {
    aspect-ratio: var(--brand-media-ratio, var(--ratio-hero));
    border-radius: var(--radius-card);
    overflow: hidden;
}

.card__media--wide    { aspect-ratio: var(--ratio-hero); }
.card__media--vehicle { aspect-ratio: var(--ratio-vehicle); }

/* Метка поверх изображения: игра, «Продвижение», статус */
.card__media-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
}

.card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.card__body--dense {
    gap: var(--space-2);
    padding: var(--space-4);
}

.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.card__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.card__title a {
    color: inherit;
}

.card__title a:hover {
    color: var(--primary);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.card__text {
    color: var(--text-secondary);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-w) solid var(--border-soft);
}

.card__footer--plain {
    border-top: 0;
    padding-top: 0;
}

/* Иконка в квадратной подложке — приём из 1gta.png */
.card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    background: var(--primary-light);
    color: var(--primary);
}

.card__icon--orange { background: var(--accent-orange-soft); color: var(--accent-orange); }
.card__icon--blue   { background: var(--accent-blue-soft);   color: var(--accent-blue); }
.card__icon--purple { background: var(--accent-purple-soft); color: var(--accent-purple); }
.card__icon--soft   { background: var(--bg-soft);            color: var(--text-secondary); }

/* --- KPI-плитка ----------------------------------------------------------- */

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    background: var(--bg-card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
}

.stat__label {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.stat__value {
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-snug);
    font-variant-numeric: tabular-nums;
}

.stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.stat__delta--up   { color: var(--success); }
.stat__delta--down { color: var(--danger); }
.stat__delta--flat { color: var(--text-muted); }

/* --- Компактная строка списка (плотные данные, ТЗ ч.4, разд. 222) ---------- */

.list-rows {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    color: var(--text-primary);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.list-row + .list-row {
    border-top: var(--border-w) solid var(--border-soft);
}

.list-row:hover {
    background: var(--bg-warm);
    color: var(--text-primary);
}

.list-row__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.list-row__title {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
}

.list-row__note {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.list-row__aside {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-3);
}

/* --- Прогресс-бар (100%-трекер, ёмкости, рейтинги) ------------------------- */

/* display задан явно: бар и трек размечаются <span>, а инлайновый элемент
   игнорирует width/height — заливка была бы не видна. */
.progress {
    display: block;
    width: 100%;
    height: 8px;
    background: var(--bg-soft);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress__bar {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-pill);
    transition: width var(--dur-slow) var(--ease-out);
}

.progress--sm { height: 6px; }
.progress--xs { height: 4px; }

.progress__bar--orange  { background: var(--accent-orange); }
.progress__bar--blue    { background: var(--accent-blue); }
.progress__bar--neutral { background: var(--status-neutral); }

.progress-row {
    display: grid;
    grid-template-columns: minmax(96px, 132px) 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.progress-row__label {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.progress-row__value {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

/* --- Список «параметр — значение» ----------------------------------------- */
/* Правая панель карточки транспорта, панель маркера, инфопанель сервера,
   характеристики бизнеса: приём из 1gta.png — подпись слева, значение справа,
   тонкий дивайдер между строками. Пустое значение показывается прочерком. */

.spec-list {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.spec-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.spec-list__row + .spec-list__row {
    border-top: var(--border-w) solid var(--border-soft);
}

.spec-list__label {
    flex: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.spec-list__value {
    color: var(--text-primary);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.spec-list__value--empty {
    color: var(--text-muted);
    font-weight: var(--fw-medium);
}

.spec-list--compact .spec-list__row {
    padding-block: var(--space-2);
}

@media (max-width: 768px) {
    .card__body { padding: var(--space-4); }
    .card__footer { padding: var(--space-3) var(--space-4); }
    .list-row { padding: var(--space-3) var(--space-4); }
}