/* ===========================
 * LSH-ds Panel (LSH-141)
 * Generic card/panel surface — the Metric card's chrome recipe
 * (12px padding / 8px radius / border-secondary / no shadow)
 * generalized for widget panels, dashboard cards, and content
 * groupings. The yfirlit `.yf-panel` placeholder migrates here.
 *
 * Anatomy:
 *   .lsh-panel
 *     .lsh-panel-header  → [.lsh-panel-icon] .lsh-panel-title [.lsh-panel-actions]
 *     .lsh-panel-meta    → timestamp / context line
 *     .lsh-panel-body    → the consumer's free area
 *     .lsh-panel-footer  → pinned to the bottom in equal-height grids
 *
 * CSS-only — zero JS, zero new :root tokens. Header actions compose
 * the shipped Button / Badge / Menu components untouched.
 * Dark mode flips free via semantic tokens (data-theme).
 * =========================== */

.lsh-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);                     /* 8px */
    padding: var(--spacing-3);                 /* 12px */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);           /* 8px — the Metric card recipe */
}


/* ── Header: [icon] title …(actions cluster flush right) ── */

.lsh-panel-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);                     /* 4px */
}

.lsh-panel-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-primary);
}

.lsh-panel-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-sm);            /* 14px */
    line-height: var(--line-height-sm);        /* 20px */
    font-weight: 500;
    color: var(--text-primary);
}

/* Trailing cluster — compose Buttons / Badges / Menu triggers here */
.lsh-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
}


/* ── Meta line (timestamp / context) below the header ── */

.lsh-panel-meta {
    margin: 0;
    font-size: var(--font-size-xs);            /* 12px */
    line-height: var(--line-height-xs);
    font-weight: 400;
    color: var(--text-quaternary);
}


/* ── Body — the consumer's free area ── */

.lsh-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 0;
}


/* ── Footer — margin-top:auto pins it in equal-height grids ── */

.lsh-panel-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}