/* Fleet feature layouts use the shared production primitives and tokens. */
.fleet-management-active .fleet-view,
.fleet-management-active .device-view { display: none; }
.fleet-management-view { min-width: 0; display: grid; gap: var(--space-5); }
.fleet-management-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fleet-management-header h2 { font-size: 20px; margin: 0; }
.fleet-management-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fleet-management-tabs button[aria-current="page"] { border-color: var(--color-accent); background: var(--color-surface-3); }
.fleet-management-form { display: grid; gap: var(--space-4); }
.fleet-management-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); }
.fleet-management-fields label { min-width: 0; display: grid; gap: var(--space-2); }
.fleet-management-fields input, .fleet-management-fields select, .fleet-management-fields textarea { min-width: 0; width: 100%; }
.fleet-management-device-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); }
.fleet-management-device-choice { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.fleet-management-device-choice span { min-width: 0; overflow-wrap: anywhere; }
.fleet-management-records { display: grid; gap: var(--space-4); }
.fleet-management-record { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; }
.fleet-management-record header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fleet-management-record p { overflow-wrap: anywhere; }
.fleet-management-target { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-3); border-top: 1px solid var(--color-border); padding: var(--space-3) 0; align-items: center; }
.fleet-management-target span { overflow-wrap: anywhere; }
.fleet-management-output { max-height: 400px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.fleet-management-message { min-height: 1.5em; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fleet-management-muted { color: var(--color-text-muted); }
@media (max-width: 767px) {
	.fleet-management-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
	.fleet-management-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .fleet-management-target { grid-template-columns: minmax(0, 1fr); }
  .fleet-management-header > button { width: 100%; }
}

[data-topology-map] { min-width: 0; max-width: 100%; overflow-x: auto; }
.fleet-topology-graph { width: 100%; min-width: 620px; height: auto; display: block; }
.fleet-topology-graph rect { fill: var(--color-surface-2); stroke: var(--color-border-strong); }
.fleet-topology-graph path { fill: none; stroke: var(--color-accent); }
.fleet-topology-graph path.is-stale { stroke: var(--color-text-muted); stroke-dasharray: 4 4; }
.fleet-topology-graph text { fill: var(--color-text); font-family: var(--font-mono); font-size: 13px; }