/* ──────────────────────────────────────────────────────────────────────
 * Card presentation modes — `[data-card-mode="comfortable|compact|dense"]`
 *
 * Sister to the dashboard `[data-density]` system (which governs section
 * header/gap only). This file targets the **card grids and the cards
 * themselves**: column min-width, gap, internal padding, and which
 * mod-* blocks render visibly.
 *
 * Apply the attribute to the grid container OR any ancestor (the page
 * tab, the section). All tokens cascade.
 *
 *   <section data-card-mode="dense">
 *     <div class="devices-grid">…</div>
 *   </section>
 *
 *   <div class="dashboard-section" data-density="dense" data-card-mode="dense">
 *     …
 *   </div>
 *
 * Defaults (= `compact`) live in base.css :root; this file only overrides
 * for `comfortable` and `dense`. Default mode is implicit; the attribute
 * may be omitted on grids that haven't migrated yet.
 * ────────────────────────────────────────────────────────────────────── */

/* ── Comfortable: roomier columns, expanded card padding ─────────── */
[data-card-mode="comfortable"] {
    --card-grid-min:        440px;
    --card-grid-gap:        18px;
    --card-grid-min-narrow: 360px;
    --card-grid-gap-narrow: 16px;
    --templates-grid-min:   400px;
    --templates-grid-gap:   22px;
}

[data-card-mode="comfortable"] .card,
[data-card-mode="comfortable"] .template-card {
    padding: 22px 24px 20px;
}

[data-card-mode="comfortable"] .dashboard-target:has(.mod-head) {
    padding: 20px 22px 18px 26px;
    gap: 16px;
}

[data-card-mode="comfortable"] .dashboard-autostart:has(.mod-head),
[data-card-mode="comfortable"] .dashboard-integration:has(.mod-head) {
    padding: 18px 20px 16px;
}

/* ── Dense: tight columns, slim padding, hide auxiliary mod-* blocks ── */
[data-card-mode="dense"] {
    --card-grid-min:        260px;
    --card-grid-gap:        8px;
    --card-grid-min-narrow: 220px;
    --card-grid-gap-narrow: 6px;
    --templates-grid-min:   240px;
    --templates-grid-gap:   10px;
}

[data-card-mode="dense"] .card,
[data-card-mode="dense"] .template-card {
    padding: 12px 14px 10px;
}

[data-card-mode="dense"] .dashboard-target:has(.mod-head) {
    padding: 10px 14px 10px 18px;
    gap: 8px;
}

[data-card-mode="dense"] .dashboard-autostart:has(.mod-head),
[data-card-mode="dense"] .dashboard-integration:has(.mod-head) {
    padding: 10px 12px 8px;
    gap: 6px;
}

/* Auxiliary content drops out in dense — keeps identity (icon, name,
   badge, dot) and primary control surfaces, sheds preview + secondary
   text. The actual data-bearing metric row is preserved. */
[data-card-mode="dense"] .mod-leds {
    display: none;
}

[data-card-mode="dense"] .mod-head {
    gap: 6px;
    margin-bottom: 6px;
}

[data-card-mode="dense"] .mod-foot {
    padding-top: 6px;
    gap: 4px;
}

/* Secondary text-button labels collapse to icon-only in dense; icon-only
   buttons and the kebab menu are unaffected. Primary action keeps its
   label so the "what does this card do" affordance survives. */
[data-card-mode="dense"] .mod-btn:not(.mod-btn-icon):not(.mod-btn-primary) .mod-btn-label {
    display: none;
}

[data-card-mode="dense"] .mod-metrics {
    gap: 4px 8px;
}

[data-card-mode="dense"] .mod-metric .k {
    font-size: 0.62rem;
}

[data-card-mode="dense"] .mod-metric .v {
    font-size: 0.92rem;
}

/* Dashed corner bracket and channel stripe stay — they are the card's
   identity even at small sizes. No display:none on ::before / ::after. */

/* ── Row: single column, full-width stacked list ─────────────────────
 * Differs from `dense` in layout, not just padding: the grid collapses
 * to one column so every card spans the available width. Cards keep
 * their column-flex internals (mod-head → metrics → foot) — a true
 * horizontal row layout would require rewriting the mod-card vocabulary
 * and is a separate future mode.
 * ────────────────────────────────────────────────────────────────── */
[data-card-mode="row"] {
    --card-grid-min:        100%;
    --card-grid-gap:        6px;
    --card-grid-min-narrow: 100%;
    --card-grid-gap-narrow: 6px;
    --templates-grid-min:   100%;
    --templates-grid-gap:   6px;
}

[data-card-mode="row"] .card,
[data-card-mode="row"] .template-card {
    padding: 10px 14px 10px;
}

[data-card-mode="row"] .dashboard-target:has(.mod-head) {
    padding: 10px 14px 10px 18px;
    gap: 8px;
}

[data-card-mode="row"] .dashboard-autostart:has(.mod-head),
[data-card-mode="row"] .dashboard-integration:has(.mod-head) {
    padding: 10px 12px 8px;
    gap: 6px;
}

/* Same auxiliary trims as `dense` — the row layout is information-dense
   by nature, so secondary visuals drop out for the same reasons. */
[data-card-mode="row"] .mod-leds {
    display: none;
}

[data-card-mode="row"] .mod-head {
    gap: 6px;
    margin-bottom: 6px;
}

[data-card-mode="row"] .mod-foot {
    padding-top: 6px;
    gap: 4px;
}

[data-card-mode="row"] .mod-btn:not(.mod-btn-icon):not(.mod-btn-primary) .mod-btn-label {
    display: none;
}

[data-card-mode="row"] .mod-metrics {
    gap: 4px 8px;
}

[data-card-mode="row"] .mod-metric .k {
    font-size: 0.62rem;
}

[data-card-mode="row"] .mod-metric .v {
    font-size: 0.92rem;
}



/* ──────────────────────────────────────────────────────────────────────
 * Segmented `C / M / D` toggle — sibling of dash-cust-density but
 * standalone so any section header / page toolbar can host one without
 * pulling in the dashboard-customize stylesheet.
 * ────────────────────────────────────────────────────────────────────── */
.card-mode-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
    border-radius: var(--lux-r-sm, var(--radius-sm));
    background: var(--lux-bg-1, var(--card-bg));
}

.card-mode-toggle__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--lux-ink-dim, var(--text-secondary));
    font: 600 0.7rem/1 var(--font-mono, monospace);
    letter-spacing: 0.04em;
    padding: 4px 8px;
    min-width: 22px;
    cursor: pointer;
    border-radius: calc(var(--lux-r-sm, var(--radius-sm)) - 1px);
    transition: background 0.15s ease, color 0.15s ease;
}

.card-mode-toggle__btn:hover {
    color: var(--lux-ink, var(--text-color));
    background: var(--hover-bg, rgba(255, 255, 255, 0.04));
}

.card-mode-toggle__btn.is-active {
    color: var(--primary-contrast, #fff);
    background: var(--primary-color);
}

.card-mode-toggle__btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

