/* ============================================================
 *  Settings -> Firmware (OTA updates, #121)
 *
 *  A single flat device table: installed vs available firmware,
 *  a status chip from the device's heartbeat OTA report, and a
 *  queue / withdraw action per row. Reuses the global .pill chip
 *  vocabulary.
 * ============================================================ */

.fw-import {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-space-3);
}

/* -- online-mode disclosure -------------------------------- */

.fw-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-space-3);
  border-style: dashed;
}
.fw-offline__msg {
  display: flex;
  gap: var(--t-space-2);
  align-items: flex-start;
  margin: 0;
  max-width: 68ch;
  color: var(--t-fg-soft);
  font-size: var(--t-size-sm);
  line-height: 1.5;
}
.fw-offline__msg .ph {
  margin-top: 2px;
  color: var(--t-warn);
  flex: none;
}

/* Online variant of the disclosure card: manual re-check. Same layout,
   but a solid border and a neutral icon (nothing is wrong). */
.fw-checknow {
  border-style: solid;
}
.fw-checknow .fw-offline__msg .ph {
  color: var(--t-fg-soft);
}

/* -- device table ------------------------------------------ */

.fw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-size-sm);
}
.fw-table th {
  text-align: left;
  font-size: var(--t-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--t-fg-soft);
  padding: 0 var(--t-space-3) var(--t-space-2) 0;
}
.fw-table td {
  padding: var(--t-space-2) var(--t-space-3) var(--t-space-2) 0;
  border-top: 1px solid var(--t-border);
  vertical-align: middle;
}
.fw-table th:last-child,
.fw-table td:last-child {
  padding-right: 0;
}
.fw-row--attention td {
  background: color-mix(in oklab, var(--t-danger, #dc2626) 8%, transparent);
}
.fw-cell-name {
  font-weight: 600;
}
.fw-cell-name > span {
  display: block;
  min-width: 0;
}
.fw-cell-name .dx-status-muted {
  font-weight: 400;
}
.fw-cell-action {
  text-align: right;
}
.fw-cell-action form {
  display: inline-block;
}

/* Inline auto-update switch: reuses the global .switch track/thumb skin,
   but outside a .field--switch wrapper, so hide the raw checkbox here. */
.fw-cell-auto .switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.fw-cell-auto .switch input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* -- advanced fleet rollout -------------------------------- */

.fw-fleet-kind {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-2);
  padding: var(--t-space-3) 0;
  border-top: 1px solid var(--t-border);
}
.fw-fleet-kind__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--t-space-2);
}
.fw-canary {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-2);
  align-items: flex-start;
}
.fw-fleet-kind__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-space-2);
}
.fw-fleet-kind__actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -- manual import ----------------------------------------- */

.fw-manual > summary {
  display: flex;
  align-items: baseline;
  gap: var(--t-space-2);
  cursor: pointer;
  font-weight: 600;
}
.fw-manual[open] > summary {
  margin-bottom: var(--t-space-2);
}

@media (max-width: 640px) {
  .fw-table thead {
    display: none;
  }
  .fw-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--t-space-1) var(--t-space-3);
    padding: var(--t-space-2) 0;
    border-top: 1px solid var(--t-border);
  }
  .fw-table td {
    border-top: none;
    padding: 0;
  }
  .fw-cell-action {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}