/* ──────────────────────────────────────────────────────────────────────────
   Modbus editor + vessel_settings list + health badge
   (modbus-integration-plan.md §5.1 / §5.2). Uses the shared design tokens.
   ────────────────────────────────────────────────────────────────────────── */

/* The register table needs far more than the 40rem edit-card default. */
.modbus-edit-page .edit-page-card {
    max-width: 72rem;
}

.modbus-conn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.modbus-slave-card {
    border: 1px solid var(--subtle-divider-clr);
    border-radius: var(--list-border-radius, 8px);
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    background: var(--list-bg);
}

.modbus-slave-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.modbus-empty {
    color: var(--muted-clr);
    font-style: italic;
}

/* Register editor: kártyánként EGY register. A mezők flex-wrappel törnek több sorba, így a szekció
   SOHA nem görget oldalra (a régi 13-oszlopos, min-width:72rem rács helyett). A per-oszlop súgó-„?"
   mostantól minden mező saját mini-feliratában él. */
.modbus-register-cards {
    display: grid;
    gap: 0.6rem;
}

.modbus-register-card {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--subtle-divider-clr);
    border-radius: 6px;
    background: var(--list-bg);
}

.modbus-register-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.mrf-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 7rem;
    min-width: 0;
}

.mrf-cell--wide   { flex: 2 1 11rem; }
.mrf-cell--num    { flex: 0 1 5.5rem; }
/* max-width: a switch-cella egy beágyazott konténer (SwitchKind + Is reversed + Bit) → önálló sorra
   törve ne nyúljon a teljes kártyaszélességre. */
.mrf-cell--switch { flex: 1 1 10rem; max-width: 20rem; }

/* Checkbox-cellák: a checkbox hozza a saját feliratát → csak az input-alapvonalra igazítjuk. */
.mrf-cell--check {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.modbus-register-fields .fluent-input-label {
    display: inline-flex;
    align-items: center;
}

/* A Fluent mezők töltsék ki a cellájukat. A fluent-select FluentUI-default min-width:250px-e
   túlnyúlt a keskeny cellán és rátakart a szomszédra → min-width:0 !important (a text/number-field
   min-width:auto, azok eleve fértek). Ugyanez a fogás a dialog.css-ben is. */
.mrf-cell fluent-text-field,
.mrf-cell fluent-number-field,
.mrf-cell fluent-select {
    width: 100%;
    min-width: 0 !important;
}

.modbus-register-actions {
    display: flex;
    gap: 0.25rem;
    align-items: flex-end;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.modbus-register-card .modbus-register-error,
.modbus-register-card .modbus-register-test {
    flex-basis: 100%;
}

/* ── health badge (§3.7) — a Modbus busz-lista most a közös BaseListComponent-et
   használja (a többi vessel_settings-szekcióval egységesen); a régi .modbus-bus-*
   flex-lista törölve. A health-badge a lista Health-oszlopának cellájában él. ── */
.modbus-health-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.modbus-health-ok         { color: #0a7a2f; background: rgba(10, 122, 47, 0.12); }
.modbus-health-connecting { color: #8a6d00; background: rgba(138, 109, 0, 0.12); }
/* Kapcsolódik, de van per-register olvasási hiba (pl. IllegalDataAddress egy címen) → borostyán figyelmeztetés. */
.modbus-health-warn       { color: #9a5b00; background: rgba(214, 128, 0, 0.16); }
.modbus-health-fail       { color: #b3261e; background: rgba(179, 38, 30, 0.12); }
.modbus-health-unknown    { color: var(--muted-clr); background: rgba(0, 0, 0, 0.06); }

/* Per-register ÉLŐ olvasási hiba a busz-szerkesztőben (health-ből, a register-kártya alján) —
   megkülönböztetve a validációs .modbus-register-error-tól. */
.modbus-register-liveerror {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b3261e;
    background: rgba(179, 38, 30, 0.10);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    margin-top: 0.15rem;
}
.modbus-liveerror-time {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.72rem;
}

/* ── Modbus-sourced appliance composer (modbus-appliance-datasource-plan.md §8) ── */
.modbus-appliance-panel {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--subtle-divider-clr);
}

.modbus-appliance-list {
    display: grid;
    gap: 0.5rem;
}

.modbus-appliance-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--subtle-divider-clr);
    border-radius: 6px;
    background: var(--list-bg);
}

.modbus-appliance-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.modbus-appliance-name {
    font-weight: 600;
}

.modbus-appliance-meta {
    font-size: 0.8rem;
    color: var(--muted-clr);
}

.modbus-appliance-actions {
    display: flex;
    gap: 0.25rem;
}

.modbus-appliance-form {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--subtle-divider-clr);
    border-radius: var(--list-border-radius, 8px);
    background: var(--list-bg);
}

/* Field-map: role → register párok kompakt reszponzív rácsban. */
.modbus-appliance-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.modbus-appliance-map-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modbus-appliance-form-footer {
    display: flex;
    gap: 0.5rem;
}

/* ── HelpTip: kattintható „?" súgó-jelvény (Layout/Elements/HelpTip.razor) ──
   Jelenleg csak a Modbus-editor használja; ha máshol is kell, emelhető közös css-be. */
.help-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.help-tip__btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--muted-clr);
    background: transparent;
    border: 1px solid var(--muted-clr);
    border-radius: 50%;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.help-tip__btn:hover,
.help-tip__btn--open {
    color: var(--primary-clr);
    border-color: var(--primary-clr);
    /* Téma-agnosztikus szürke tint (a --subtle-fill-clr token nem létezik; a fekete fallback
       sötét/éjszakai témán láthatatlan volt). */
    background: rgba(128, 128, 128, 0.18);
}

/* Nyitott állapotban a „?" a backdrop (z-index:4000) FÖLÉ kerül, hogy a gombra kattintás maga is
   zárja a buborékot (különben a backdrop nyelné el a kattintást). */
.help-tip__btn--open {
    position: relative;
    z-index: 4002;
}

/* Átlátszó teljes-képernyős fogó a click-outside záráshoz. */
.help-tip__backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: transparent;
}

/* A buborék position:fixed (a kurzornál) → kívül esik a scroll-konténerek overflow-clipjén. */
.help-tip__pop {
    position: fixed;
    z-index: 4001;
    width: max-content;
    max-width: 22rem;
    /* A tényleges max-height-et a HelpTip.razor inline állítja (a clampelt top-tól a viewport aljáig),
       hogy hosszú szöveg belül görögjön és a doboz alja soha ne lógjon le. Itt csak az overflow kell. */
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    color: var(--text-clr);
    background: var(--list-bg, #ffffff);
    border: 1px solid var(--subtle-divider-clr);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Label + „?" egy sorban, alatta az input (a Fluent Label helyett, hogy a súgó a felirat mellé kerüljön). */
.field-with-help {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-with-help > .fluent-input-label {
    display: inline-flex;
    align-items: center;
}