/* ========================================================================================================
   Dashboard PANEL-kártyák (asd.md Task 1+) — a cards.css-ből kiemelve, mert a panelek saját, közös
   "műszerfal" mintát követnek (motor / navigáció / elektromos eszköz / elektromos csoport / mini-preset).
   A panel-tartalom általános osztályai: .panel (keret/elrendezés), .panel-cell (egy readout = PanelReadoutCell).
   A generikus kártya-építőkövek (.card, .card-viz, .card-bar) MARADNAK a cards.css-ben (a DisplayCard is használja).
   ======================================================================================================== */

/* ── A panelek a metrika-rácson belül ──
   A 4 nagy panel a kamerával/preset-tel AZONOS módon él a rácsban (egy SortableJS lista), 2×2 cellát fog át.
   A külső .card keretet MEGTARTJUK (a tartalmat a *PanelComponent adja). A presets-mini 1×1 marad. */
.cards-section .card.engine-panel,
.cards-section .card.elec-panel,
.cards-section .card.elec-group-panel,
.cards-section .card.nav-panel,
.cards-section .card.footage-panel {
    grid-column: span 2;
    grid-row: span 2;
    position: relative;
}

.cards-section .card.presets-mini-card {
    position: relative;
    /* A tartalom az 1 soros cellánál magasabbra nőne → a grid-auto-rows:1fr megnyújtaná a SORT. A
       switches-kártya abszolút-pozíciós mintája: a törzs a cellát tölti, NEM járul hozzá a sor-magassághoz. */
    padding: 0;
    overflow: hidden;
    min-height: 90px;
}

.cards-section .card.presets-mini-card > div {
    position: absolute;
    inset: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
}

.cards-section .card.presets-mini-card > div > div {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Szerkesztés módban a törlés-gomb a kártya jobb felső sarkába lebeg (nem foglal sort a magasság-rácsban). */
.cards-section .card.engine-panel > fluent-button,
.cards-section .card.elec-panel > fluent-button,
.cards-section .card.elec-group-panel > fluent-button,
.cards-section .card.nav-panel > fluent-button,
.cards-section .card.footage-panel > fluent-button,
.cards-section .card.presets-mini-card > fluent-button {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
}

/* === Műszerfal-panelek kerete (motor + navigáció + elektromos eszköz) ===============================
   A "műszerfal" tartalma (fejléc + hero + readout-rács) a 2×2 cellánál magasabbra is nőhet, ezért — a
   csoport-panel/switches mintájára — abszolút-pozíciós törzs: a cella adja a magasságot, a belső .panel
   görget, így a globális grid-auto-rows:1fr NEM nyújtja meg a sort. A .card keret marad; a paddinget 0-ra
   állítjuk, az abszolút .card-content adja a belső paddingot. */
.cards-section .card.engine-panel,
.cards-section .card.nav-panel,
.cards-section .card.elec-panel,
.cards-section .card.elec-group-panel,
.cards-section .card.footage-panel {
    padding: 0;
    overflow: hidden;
    /* A törzs ABSZOLÚT pozícionált (0 intrinsic magasság), ezért a magasságot a 2×2 cella adja. Sima
       kártyák mellett a szomszéd 1×1-ek húzzák fel a sorokat (~2× kártyamagasság); DE ha CSAK 2×2 panel
       van a dashboardon (nincs szomszéd 1×1), a sorok a min-height-re esnének → a panel összemegy és görget.
       Ezért a min-height ~2× egy sima kártya magassága: a magányos panel is elég magas, a vegyes elrendezést
       viszont nem nyújtja (a min-height/2 ≈ a sima kártya magassága, így a grid-auto-rows:1fr-t nem lépi túl).
       (Ha egy panel tartalma ennél is magasabb, a belső .panel továbbra is görget.) */
    min-height: 280px;
}

.cards-section .card.engine-panel > div,            /* .card-content: cím (.source-name) + törzs */
.cards-section .card.nav-panel > div,
.cards-section .card.elec-panel > div,
.cards-section .card.elec-group-panel > div,
.cards-section .card.footage-panel > div {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
}

.cards-section .card.engine-panel > div > div,      /* a ChildContent-burkoló — a panelt tölti */
.cards-section .card.nav-panel > div > div,
.cards-section .card.elec-panel > div > div,
.cards-section .card.elec-group-panel > div > div,
.cards-section .card.footage-panel > div > div {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* A műszerfal-panel a fejlécét (név + dátum + pötty) maga adja, ezért a CardComponent .source-name
   kártya-címét és a DisplayCard "Panel" .secondline-ját elrejtjük. Ez a .cards-section rácsra vonatkozik,
   ami MOST a kártya-választót is jelenti: a picker ÉLŐ panel-előnézetet renderel (saját fejléccel), ezért
   ott is a panel saját címét akarjuk, nem a CardComponent duplikált címét. A csoport-panelnél a .secondline
   a csoportnév, azt is mi adjuk a fejlécben → elrejtjük. */
.cards-section .card.engine-panel > div > .source-name,
.cards-section .card.engine-panel .secondline,
.cards-section .card.nav-panel > div > .source-name,
.cards-section .card.nav-panel .secondline,
.cards-section .card.elec-panel > div > .source-name,
.cards-section .card.elec-panel .secondline,
.cards-section .card.elec-group-panel > div > .source-name,
.cards-section .card.elec-group-panel .secondline,
.cards-section .card.footage-panel > div > .source-name,
.cards-section .card.footage-panel .secondline {
    display: none;
}

/* === Műszerfal-panel belső elrendezése (közös: motor, navigáció, …) ================================== */
.panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    gap: 8px;
    /* Iránytű két tűjének színe (navigáció): heading = brand, course = zöld. Egy helyen hangolható. */
    --panel-heading-clr: var(--primary-clr);
    --panel-course-clr: var(--c-success);
}

/* Night témán a zöld scotopikusan rossz (a night paletta vörös-eltolt, kék/zöld kerülendő) + a heading
   ott crimson → a course-t amberre váltjuk: night-barát és jól elválik a piros heading-tűtől. */
:root[data-theme="night"] .panel {
    --panel-course-clr: var(--nt-amber-600);
}

/* Fejléc: név (balra) + a minta dátuma és a státusz-pötty (jobbra). */
.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.panel__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-clr);
    text-align: left;
}

.panel__meta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.panel__date {
    font-size: 11px;
    color: var(--muted-clr);
    white-space: nowrap;
}

.panel__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--c-success);
}

    .panel__status.stale { background: var(--stale-clr); }
    .panel__status.alarm-warning { background: var(--warning-clr); }
    .panel__status.alarm-error { background: var(--critical-clr); }

/* Az EGY-dátumos 2×2 panelek (motor / navigáció / egy-eszközös elektromos) fejléc-metája — a STÁTUSZ-PÖTTY
   ÉS a dátum együtt (mint az 1×1 kártyák .card-status-line-ja: [pötty] dátum) — a kártya BAL ALSÓ sarkába
   kerül. A dátum+pötty közös konténerét (engine/nav: .panel__meta, egy-eszközös elec: .elec-block__meta)
   pozícionáljuk abszolút a nem-görgő .card-content-hez képest (a .panel static + görget, így NEM az ő
   containing block-ja) → görgetéskor is a sarokban marad. A markup [dátum][pötty] sorrendjét row-reverse
   fordítja [pötty][dátum]-ra (1×1-gyel egyező). A .panel alsó paddingja helyet tart, hogy ne fedje a
   legalsó tartalom-sort. A csoport-panel (.elec-group-panel) per-eszköz dátum+pöttyei SZÁNDÉKOSAN maradnak
   a blokk-fejlécekben, a felső aggregált pötty is a csoport-fejlécben. */
.cards-section .card.engine-panel .panel,
.cards-section .card.nav-panel .panel,
.cards-section .card.elec-panel .panel {
    padding-bottom: 18px;
}

.cards-section .card.engine-panel .panel__meta,
.cards-section .card.nav-panel .panel__meta,
.cards-section .card.elec-panel .elec-block__meta {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 5px;
    margin-left: 0;
    /* Átlátszatlan chip a kártya hátterével (--list-bg): kis képernyőn, amikor a .panel GÖRGET, a tartalom
       a rögzített dátum MÖGÉ kerül (nem folyik át rajta). Görgetés nélkül a chip beleolvad a háttérbe → csak
       a pötty+dátum látszik. A panelek sosem alarm-színűek (a panel-piece AlarmLevel=Normal), ezért a
       --list-bg mindig a helyes kártya-háttér. A .panel padding-bottom-ja (lásd fent) gondoskodik róla, hogy
       a legaljára görgetve az utolsó sor a chip FÖLÖTT, teljesen látszódjon. */
    background: var(--list-bg);
    padding: 2px 6px;
    border-radius: 8px;
}

/* Hero: középen a nagy mérő (RPM / iránytű …), két oldalán readout-oszlopok (a szélesség kihasználása). */
.panel__hero {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1rem;
}

.panel__hero-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.panel__hero-center {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 6px;
    padding: 0 4px;
}

.panel__hero-gauge {
    width: 84px;
    height: 53px;
}

    .panel__hero-gauge g {
        transition: transform .3s ease;
    }

/* Iránytű-hero (navigáció): négyzetes tárcsa — a közös hero-viz nagyobb (a motor mérőjének ~kétszerese). */
.panel__hero-compass {
    width: 116px;
    height: 116px;
}

    .panel__hero-compass g {
        transition: transform .3s ease;
    }

/* Iránytű-legend: a heading és course értéke külön sorban, mindkettő a tűje színét viseli
   (pötty + felirat + érték), hogy egyértelmű legyen, melyik-melyik. */
.panel__compass-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
    width: 100%;
    max-width: 130px;
}

.panel__compass-row {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.15;
}

.panel__compass-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.panel__compass-lbl {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel__compass-val {
    font-size: 14px;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

.panel__compass-row--heading .panel__compass-dot { background: var(--panel-heading-clr); }
.panel__compass-row--heading .panel__compass-lbl,
.panel__compass-row--heading .panel__compass-val { color: var(--panel-heading-clr); }

.panel__compass-row--course .panel__compass-dot { background: var(--panel-course-clr); }
.panel__compass-row--course .panel__compass-lbl,
.panel__compass-row--course .panel__compass-val { color: var(--panel-course-clr); }

/* Kiemelt pozíció-sor (navigáció): koordináták ikonnal, teljes szélességben. */
.panel__pos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.panel__pos-val {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-clr);
    line-height: 1.25;
}

.panel__pos.stale {
    opacity: 0.5;
    filter: grayscale(0.7);
}

.panel__hero-num {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1;
}

.panel__hero-val {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-clr);
}

.panel__hero-unit {
    font-size: 12px;
    color: var(--muted-clr);
}

.panel__hero-nodata {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-clr);
}

/* A hero közepének (mérő-cella) alarm-szín / elavult-szürke állapota. */
.panel__hero-center.stale {
    opacity: 0.5;
    filter: grayscale(0.7);
}

.panel__hero-center.alarm-warning {
    background: color-mix(in srgb, var(--warning-clr) 22%, transparent);
}

.panel__hero-center.alarm-error {
    background: color-mix(in srgb, var(--critical-clr) 18%, transparent);
}

    .panel__hero-center.alarm-error .panel__hero-val {
        color: var(--critical-clr);
    }

/* Readout-rács: 3 oszlop, kompakt cellák. */
.panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: 4px 8px;
}

/* === Egy readout-cella (PanelReadoutCell.razor) ===================================================== */
.panel-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    padding: 4px;
    border-radius: 6px;
    min-width: 0;
}

.panel-cell__label {
    font-size: 12px;
    color: var(--muted-clr);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A mini-viz mindig BALRA (a valrow elején), az érték+egység utána (jobbra). */
.panel-cell__valrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
}

.panel-cell__val {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-clr);
}

.panel-cell__unit {
    font-size: 12px;
    color: var(--muted-clr);
    margin-left: 2px;
}

.panel-cell__nodata {
    font-size: 12px;
    color: var(--muted-clr);
}

/* Alarm-szín / elavult-szürke a kis kártyák (DisplayCard) logikájával egyezően. */
.panel-cell.stale {
    opacity: 0.5;
    filter: grayscale(0.7);
}

.panel-cell.alarm-warning {
    background: color-mix(in srgb, var(--warning-clr) 22%, transparent);
}

.panel-cell.alarm-error {
    background: color-mix(in srgb, var(--critical-clr) 18%, transparent);
}

    .panel-cell.alarm-error .panel-cell__val,
    .panel-cell.alarm-error .panel-cell__label {
        color: var(--critical-clr);
    }

/* === Elektromos eszköz-blokk (ElectricalDeviceBlock — per-eszköz + csoport-panel közös) ============= */
.elec-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A per-eszköz panelnél a blokk az EGYETLEN tartalom → töltse ki a cellát (a battery-rombusz height:100%-ához).
   A csoport-panelnél több blokk van (NEM only-child), ezek tartalom-magasságúak, egymás alatt görgethetők. */
.panel > .elec-block:only-child {
    height: 100%;
}

/* Csoport-panelben elválasztó a (felső) csoportnév-fejléc ÉS az első blokk közé, valamint a blokkok közé.
   (A .panel gap adja a külső térközt; itt csak a vonal + kis belső térköz.) */
.panel__head + .elec-block,
.elec-block + .elec-block {
    padding-top: 8px;
    border-top: var(--border-thin);
}

.elec-block__head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.elec-block__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-clr);
}

.elec-block__chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-clr) 14%, transparent);
    color: var(--primary-clr);
}

.elec-block__meta {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* DC akku — ROMBUSZ elrendezés: felül a nagyobb SoC-gyűrű, balra feszültség, jobbra áram, alul hőmérséklet.
   3×3 grid: SoC a felső középen, V bal-közép, I jobb-közép, T alsó-közép. */
.elec-batt {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 4px 8px;
    height: 100%;
}

/* A SoC a felső-középen; a feszültség/áram VELE EGY SORBAN (a SoC vonalába érve, align-items:center →
   a gyűrű függőleges közepéhez igazítva); a hőmérséklet a SoC alatt, középen. */
.elec-batt__soc {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-radius: 6px;
}
.elec-batt__v   { grid-column: 1; grid-row: 2; }
.elec-batt__i   { grid-column: 3; grid-row: 2; }
.elec-batt__t   { grid-column: 2; grid-row: 3; }

/* SoC-gyűrű középre írt %-kal (nagyobb mérő — a rombusz központi eleme). */
.elec-batt__ring {
    position: relative;
    width: 116px;
    height: 116px;
}

    .elec-batt__ring svg {
        width: 100%;
        height: 100%;
    }

        .elec-batt__ring svg circle {
            transition: stroke-dashoffset .3s ease;
        }

.elec-batt__ring-val {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-clr);
}

.elec-batt__soc.stale { opacity: 0.5; filter: grayscale(0.7); }

    .elec-batt__soc.alarm-error .elec-batt__ring-val { color: var(--critical-clr); }

/* A V/I/T akku-cellák a közös PanelReadoutCell-t használják (felirat + balra viz + jobbra érték; a viz a
   MiniViz.Classify-ból: V→gauge, I→áram-nyíl, T→hőmérő). NAGYOBB érték a jó olvashatóságért (kevés adat,
   sok hely a 2×2 panelen — user-kérés). A solar (DC nem-akku, .elec-dc) ugyanígy nagyobb (lásd lent). */
.elec-batt .panel-cell__val { font-size: 22px; }
.elec-batt .panel-cell__unit { font-size: 14px; }

/* Kompakt összefoglaló (csoport-panel egy eszközéhez): kulcs-metrikák egy (törhető) sorban. */
.elec-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

    .elec-summary > .panel-cell {
        align-items: flex-start;
        padding: 0;
    }

.elec-summary__power {
    display: flex;
    flex-direction: column;
}

.elec-summary__power-lbl {
    font-size: 10px;
    color: var(--muted-clr);
}

.elec-summary__power-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-clr);
}

/* DC nem-akku (pl. solar): feszültség + áram egymás mellett, középre. */
.elec-dc {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
}

/* Solar/DC-nem-akku: nagyobb érték (2 érték, sok hely — user-kérés, az akku-rombusszal egyezően). */
.elec-dc .panel-cell__val { font-size: 22px; }
.elec-dc .panel-cell__unit { font-size: 14px; }

/* AC táblázat: V/A/Hz/W/PF sorok × fázis-oszlopok. */
.elec-ac {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    font-size: 12px;
}

.elec-ac__corner {
    /* üres bal-felső sarok a fázis-fejléc sorban */
}

.elec-ac__phase {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-clr);
    text-align: right;
}

.elec-ac__rowlbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-clr);
    white-space: nowrap;
}

.elec-ac__cell {
    text-align: right;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-clr);
    border-radius: 4px;
    padding: 0 2px;
}

    .elec-ac__cell.stale { opacity: 0.5; filter: grayscale(0.7); }
    .elec-ac__cell.alarm-warning { background: color-mix(in srgb, var(--warning-clr) 22%, transparent); }
    .elec-ac__cell.alarm-error { background: color-mix(in srgb, var(--critical-clr) 18%, transparent); color: var(--critical-clr); }

/* Kiemelt összteljesítmény az AC táblázat alatt. */
.elec-ac__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: var(--border-thin);
}

.elec-ac__total-lbl {
    font-size: 11px;
    color: var(--muted-clr);
}

.elec-ac__total-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-clr);
}

/* (Kompakt módban — csoport-panel — a teljes táblázat/rombusz HELYETT az .elec-summary kulcs-metrika-sor
   jelenik meg, ezért külön .compact méret-override-okra nincs szükség.) */

/* (Az elektromos-CSOPORT panel kerete a fenti közös műszerfal-frame-be olvadt: abszolút törzs +
   görgethető .panel, hogy sok eszköznél se nyúljon meg a 2×2 cella.) */

/* Szerkesztés/stub placeholder a 4 nagy panelhez: a helyfoglalást mutatja a (még üres) tartalom helyett. */
.panel-card__placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    height: 100%;
    min-height: 120px;
    color: var(--muted-clr);
    font-size: 13px;
    text-align: center;
}

/* A presets-mini (1×1) placeholdere: csak ikon, középre. */
.presets-mini-card__placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    height: 100%;
    min-height: 60px;
    color: var(--muted-clr);
}

/* Mobil/keskeny nézet: a nagy panelek teljes szélességűek (a presets-mini 1×1 marad). */
@media (max-width: 768px) {
    .cards-section .card.engine-panel,
    .cards-section .card.elec-panel,
    .cards-section .card.elec-group-panel,
    .cards-section .card.nav-panel,
    .cards-section .card.footage-panel {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* === Footage-panel (a legutóbbi 4 felvétel thumbnailje) ============================================
   A .panel (flex column: fejléc + rács) mintáját követi. A rács 2×2 (max 4 elem), a cellák a rendelkezésre
   álló magasságot töltik (grid-auto-rows:1fr) — a thumbnail 16:9 helyett flex-kitöltés, hogy a 2×2 cellán
   belül maradjon. A footage-lista mintája: thumbnail + hossz-badge + dátum. */
.footage-panel__grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 6px;
}

.footage-panel__item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 3px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.footage-panel__thumb-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--background-clr);
}

.footage-panel__item:hover .footage-panel__thumb-wrap {
    outline: 2px solid var(--primary-clr);
    outline-offset: -2px;
}

.footage-panel__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footage-panel__duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    background: var(--c-scrim-medium);
    padding: 2px 4px;
    border-radius: 4px;
}

.footage-panel__date {
    flex: none;
    font-size: 11px;
    color: var(--muted-clr);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Üres állapot: középre igazított üzenet a panel közepén. */
.footage-panel__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted-clr);
    font-size: 13px;
    text-align: center;
}

/* A globális `span { color: text-clr }` (app.css) a szöveg-spanre KÖZVETLENÜL illeszkedik → felülírná a
   szülő öröklött muted színét. Ezért a spanre EXPLICIT muted (view módban ez a "nincs footage" üzenet). */
.footage-panel__empty span {
    color: var(--muted-clr);
}

/* Dőlt CSAK megjelenítéskor (view); a pickerben/edit módban NEM (a font-style öröklődik a spanre). */
.footage-panel__empty--view {
    font-style: italic;
}