/* ============================================================
   Business PC V2 — CARDS (PHASE 3)
   Единый источник стилей карточек: поверхность, радиус,
   тень, панель, карточка-плитка и пустое состояние.

   Правило подключения: ПОСЛЕ ui/tables.css, но ДО site.css
   и страничных стилей. Значения совпадают с текущими
   (admin.css/.panel/.stat-card, card.css/.product-card) —
   подключение НЕ меняет вид.

   Компоненты ТЗ: Card, Panel, StatCard, EmptyState.
   ============================================================ */

/* ---------- Базовая карточка ----------
   Общая поверхность: белый фон, рамка, радиус карточки. */
.card {
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* ---------- Панель (контейнер с шапкой и телом) ---------- */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    /* overflow НЕ скрываем: выпадающие списки подбора комплектующих
       (.tags-drop) позиционируются абсолютно и на нижних полях
       (память/SSD в редакторе компьютера) должны выходить за
       границы панели, иначе список обрезается и его нельзя
       пролистать. Скругление углов достигается отступами
       .panel-head/.panel-body. */
    overflow: visible;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
}

.panel-body { padding: 8px 18px 18px; }

/* ---------- Карточка-плитка (метрика) ---------- */
.stat-card {
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.stat-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.stat-card-value {
    display: block;
    margin-top: 8px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* ---------- Пустое состояние ---------- */
.empty-a {
    padding: 30px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-dim);
}

/* ---------- Скелетон холодной загрузки ---------- */
.skel-card {
    min-width: 0;
    padding: 12px;
    background: var(--nv-panel, #fff);
    border: 1px solid var(--nv-line-soft, #e5e5ea);
    border-radius: 10px;
}
.skel-img,
.skel-line {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.06) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s ease-in-out infinite;
}
.skel-img { min-height: 150px; margin-bottom: 10px; }
.skel-line { height: 12px; margin-top: 8px; }
.skel-line.short { width: 55%; }
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}